〇、效果演示

一、问题背景

    要问哪种网页最难捕获元素节点，那就是包含iframe元素，特别是嵌套了多层的网页。这种情况下，捕获出来的节点会非常复杂且容易发生变化。因此，对于变化较大的节点，使用影刀的元素捕获方法可能不够灵活，而采用更灵活的xpath定位方法则可以解决这个问题。
但问题又来了，虽然影刀的元素捕获方法可以实现跨域，但xpath并不具备这个能力，今天来教大家如何用xpath跨域定位元素

二、实现原理

2.1 利用影刀跨域

    前面谈到，影刀的元素捕获可以实现跨域，我们今天就是利用这一点实现xpath跨域。
先利用影刀的元素捕获，帮我们实现跨域，拿到iframe中的一个元素，如下图

然后再通过【执行js脚本】指令，执行下面的代码

let ele = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue

    这段代码是js中通过xpath获取元素的方法，其中第二个参数很关键，可以指定DOM对象，简单理解为父元素。通过影刀的拿到iframe里面的元素后，传递给第二个参数，就可以在这个元素的基础上使用xpath


运行流程可以看到浏览器控制台成功打印元素

2.2 伪造元素

    跨域我们已经实现了，但是又出现了新的问题。在执行js脚本指令中是无法直接返回元素的，拿不到元素我们只能通过执行js脚本做后续的操作，这样很不方便，所以我们要伪造一个元素，把元素返回到影刀中。

2.2.1 伪造元素库

    先看看影刀是如何生成元素库的，直接找到源码如下

    在源码中可以看到是通过 SelectorStore 读取一个路径，生成元素库的选择函数，那我们只需要找到一个路径，存放元素，然后通过 SelectorStore 读取就好了

2.2.2 打标记

    伪造元素还需要精准定位元素，影刀在捕获元素的时候，会给元素打一个标记 uia-uid，如下图所示

    同理，我们也可以在定位到元素后，给元素打一个标记，这样我们在伪造元素的时候，只需要定位到这个标记就可以定位到元素，为了方便我直接用时间戳来打标记，自定义一个属性 diy-uid。下面是一层一层打标记实现跨域的过程

三、代码实现

和上一期一样，代码太长，发不出来，点击查看代码

四、可视化实现

五、小技巧

    在捕获iframe元素的时候常常遇到下面的情况

    因为影刀不能跨层级匹配，所以不能从中间删减元素节点来进行通配，但是iframe的元素比较特殊。可以把每一个iframe下面的元素节点当成是一个新的元素的节点，在一个新的元素中，我们是可以从上边或者下边开始删除节点。

所以就可以得到下边的元素

六、彩蛋

    前面说到通过 SelectorStore 读取一个路径，得到元素库。那么，如果把这个路径改成其他应用的路径呢？？