How to distinguish an iframe with the same origin from iframe with different origin

Question

I have 2 iframe on my webpage. iframe S has the same origin as the web page, iframe D has a different one:

<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe example 1" width="400" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

I need to addEventListener only onto the iframes that have the same origin. This is what I do:

for (let i = 0; i < frames.length; i++) {
    const iframe = window.frames[I]
    console.log(iframe)        
    if (iframe.document.domain === window.document.domain) {
        iframe.addEventListener('message', event => {
            console.log(event.data)
        }, false)
    }
}

But this gives an error, when I try to read iframe.document of iframe D.

Uncaught DOMException: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.

Because, unlike iframe S, iframe D gives me this object, when I try console.log(iframe) from the 2 snippet of code above:

And as you can see, there is no document property.

Possible duplicate of [SecurityError: Blocked a frame with origin from accessing a cross-origin frame](https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame) — Osvaldo Maria, Mar 07 '18 at 10:13

score 1 · Accepted Answer · answered Mar 07 '18 at 10:30

Simply select all iframes using querySelectorAll, then construct a new URL using their src attribute and check if it matches your own hostname.

document.querySelectorAll('iframe').forEach(frame => {
  const url = new URL(frame.src)

  if (url.hostname === window.location.hostname) {
    frame.addEventListener('message', event => {
        console.log(event.data)
    }, false)
  }
})

<iframe src="https://stackoverflow.com"></iframe>
<iframe src="https://stackoverflow.com"></iframe>
<iframe src="https://stackoverflow.com"></iframe>
<iframe src="https://stackoverflow.com"></iframe>
<iframe src="https://stackoverflow.com"></iframe>
<iframe src="https://google.com"></iframe>

Note that new URL won't work in IE browsers. You'd have to manually split your URL parts to do the hostname equality check.

score -1 · Answer 2 · answered Mar 07 '18 at 10:12

-1

Wrapping an entire if-statement with with try - catch block rids of the error, but not sure if that's the best way to tackle this problem.

for (let i = 0; i < frames.length; i++) {
    const iframe = window.frames[I]
    console.log(iframe)
    try {        
        if (iframe.document.domain === window.document.domain) {
            iframe.addEventListener('message', event => {
                console.log(event.data)
            }, false)
        }
    }
    catch(error) {
    }
}

answered Mar 07 '18 at 10:12

Eduard

8,437
10
42
64

Why not an `if` instead of a `try.. catch`? – nicholaswmin Mar 07 '18 at 10:16
How would you construct it? I tried if (iframe.document) and if (iframe). The first one is ridiculous because that accessing .document causes the error, the second one does not divide re-route iframe D to the else block. – Eduard Mar 07 '18 at 10:17
Check the `src` attribute of the `iframe` perhaps? – nicholaswmin Mar 07 '18 at 10:18
@NicholasKyriakides Same issue. I don't think we are allowed to access any prop of iframe D whatsoever. – Eduard Mar 07 '18 at 10:23
That doesn't make sense. The `iframe` is part of *your* DOM. – nicholaswmin Mar 07 '18 at 10:24

How to distinguish an iframe with the same origin from iframe with different origin

2 Answers2