0

My app does the following:

  • Load a 3rd party website using Node Request
  • Inject a script in the html, which adds a listener to click events, to grab the text and put it in a custom dispatch event - eg. window.parent.document.dispatchEvent(clickedText)
  • Puts this in an iframe on a page for the user. The parent window has a listener for these events, to then do things with that text.

This generally works fine. However... some websites never display as they get stuck trying to load resources that never arrive. And in rare occasions, a website seems to have some script which takes control of the parent page, and redirects it elsewhere.

I've tried adding a sandbox attribute to the iframe, which resolves both problems. But it then also blocks the dispatch event.

Is there a solution that will solve these problems, but still allow the iframe to send events to the parent window? I don't know a lot about iframe and cross-origin policy stuff, but I'm wondering if the iframe could talk to the node app, which the parent window could then request from node. No idea if that's possible though...

Rusty
  • 609
  • 1
  • 4
  • 19
  • I am struggling to come up for a legit reason for why you are doing this. If third party sites put in measures against you doing this then, you should accept that they would rather you didn’t engage in this activity – David Bradshaw Nov 12 '19 at 15:52
  • What we're doing is going to directly benefit the organizations who own these websites - it's nothing shady. The biggest problem is that when you load up somebody else's HTML, it often gets stuck loading cookies and external resources that expect to have the request from the website's domain. So this isn't an anti-bot design I'm trying to subvert - just a non intended use case – Rusty Nov 12 '19 at 16:22
  • Then it would be much easier to get these websites to included your JS code, rather than mounting a man in the middle proxy attack on them – David Bradshaw Nov 12 '19 at 16:25
  • Getting 10k orgnizations to include code on their websites is definitely not easier! What I'm trying to build is more like a custom browser that displays for the user and allows easy extraction of data - not an "attack". It's also directly aimed at benefiting charity organizations, so if you do have any technical solutions, I don't think you've got to worry about ethics. – Rusty Nov 12 '19 at 16:34
  • Does this answer your question? [How to communicate between iframe and the parent site?](https://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site) – Michael Freidgeim Jun 01 '22 at 21:05

1 Answers1

0

OK... answering my own question, in case it's useful to anyone else. postMessage() provides an alternative way to send messages that is not blocked by the sandbox attribute.

So in the iframe, which has the sandbox attribute, there's something like this to send data

parent.postMessage("send me to parent","http://parentURL/");

Then in the parent, there's this to receive:

var eventMethod = window.addEventListener
        ? "addEventListener"
        : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent"
    ? "onmessage"
    : "message";
eventer(messageEvent, function (e) {
     console.log(e.data);
});
Rusty
  • 609
  • 1
  • 4
  • 19
  • 1
    Just been struggling to send messages the other way, as an iframe with sandbox property has an origin of "null" which will error when you try and send a postMessage to it. So if you're also struggling there, the solution I found was this: var frame = document.getElementById('iframe') frame.contentWindow.postMessage('message',"*"); – Rusty Nov 12 '19 at 19:30