如何通过JS拖拽从跨域网站获取元素XPATH？解决跨域问题

问题背景 #

需求是通过拖拽操作，将另一跨域（不同域名/端口）网页中目标UI元素的XPATH获取到自身Web应用中。尝试的实现步骤及遇到的问题如下：

尝试的实现步骤 #

1. 用window.open从自身应用打开目标网站
2. 为目标网页所有元素添加拖拽监听，将XPATH存入dataTransfer：

function openWindow() {
    var targetWindow = window.open("https://www.otherwebsite.com","myWindow");
    var targetDocument = targetWindow.document;
    var allTargetElements = targetDocument.body.getElementsByTagName("*");
    allTargetElements.forEach(targetElement => {
       targetElement.addEventListener('dragstart', function handleDrag(event) {
           console.log('targetElement drag', event);
           // Get targeted element xpath from another method
           event.dataTransfer.setData("element_xpath", getElementXpath(event.target));
       });
    });
}

3. 在自身应用中添加放置区域，从dataTransfer读取自定义数据：

<script>
function drop(ev) {
  ev.preventDefault();
  var element_xpath = ev.dataTransfer.getData("element_xpath");
  console.log("Dropped element xpath from other website:" + element_xpath);
}
</script>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">Drop place</div>
<br>
<br>
<input type="button" id="openWindow" onclick="openWindow()" value="Open new window"/>
</body>

遇到的报错 #

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

核心疑问 #

是否存在通过JavaScript访问目标网站文档的可行方法？

解决方案说明 #

直接通过前端JavaScript跨域访问目标网站的DOM是不可能的——浏览器的同源策略是核心安全机制，会严格阻断这类跨域DOM访问。不过可以通过以下几种合法途径实现需求：

• 目标网站配置CORS：如果能控制目标网站，可在其服务器端配置跨域资源共享规则，允许你的域名访问其文档。但这种方式依赖对方配合，仅适用于你拥有目标网站控制权的场景。
• 开发浏览器扩展：浏览器扩展拥有特殊权限，可突破同源限制：
  • 编写内容脚本注入到目标网站页面，监听拖拽事件并计算元素XPATH；
  • 通过扩展的消息传递机制（如Chrome的chrome.runtime.sendMessage）将XPATH传递到你的Web应用；
  • 你的应用与扩展通信接收数据即可。这是最可靠的方案。
• 利用原生拖拽默认数据：浏览器原生拖拽会自动将元素的文本、链接等基础数据存入dataTransfer，你可在放置区域解析这些数据，再尝试反向推导XPATH，但这种方式局限性极大，仅能处理少数简单元素，无法精准获取目标XPATH。
• 后端代理中转：在你的后端搭建代理服务器，先请求目标网站HTML，后端解析DOM生成XPATH后返回给前端。但这种方式无法处理JS渲染的动态内容，还需应对目标网站的反爬机制。

内容的提问来源于stack exchange，提问作者Sentary