Get element XPATH from other website by drag and drop using Javascript

Shessuky 0
Viewed 28

I'm trying to inspect the XPATH of targeted UI elements within another web page (different domain and port) by drag and drop to my web application The only way I have found to achieve this goal is proceeding as follows:

  1. Open the targeted website from my web application by Javascript using the command window.open

  2. Add a drag listener to the targeted web page for ALL web elements where we append a custom data to dataTransfer containing the XPATH value (got from another algorithm)

    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. On the web application, add a drop area where we retrieve the custom data from 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>

The problem is that any attempt of accessing the targeted web site document has failed due to the cross-origin constraint:

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

Is there any way to access the target web site document by Javascript ?

Thanks a lot in advance

xpath javascript html
0 Answers
Related