0

There is an iframe with the following structure that is loaded via an external site external.com and being hosted at my domain example.com:

<body> <!-- this is the body of my html from where I'm trying to make the reference -->
    <iframe>
      #document
          <html>
              <body>      
                  <script type="text/html" id="icon-close"><div class="icon icon-close">      
                      <div class="icon icon close"</div>  
                  </script>
              </body>
          </html>
    </iframe>      
</body>

I'm specifically trying to select the icon-close element in this case.

I can select the iframe using $("iframe") but when I try to access the contents in inspector code to select elements using $("iframe").contents() I receive the following:

 DOMException: Failed to read the 'contentDocument' property from 
'HTMLIFrameElement': Blocked a frame with origin 
"https://external.com" from accessing a cross-origin frame.

I've tried setting domain.document = 'example.com' before the reference:

 DOMException: Failed to set the 'domain' property on 'Document': 
'example.com' is not a suffix of 'external.com'.

I've also tried setting it to external.com:

DOMException: Failed to read the 'contentDocument' property from 
'HTMLIFrameElement': Blocked a frame with origin "http://example.com" from 
accessing a cross-origin frame.

I've seen related posts here and here but don't understand exactly how to resolve this.

How can I circumvent the same origin policy to access the elements in an iframe?

Community
  • 1
  • 1
Don
  • 3,876
  • 10
  • 47
  • 76
  • Have you tried setting `document.domain = 'http://example.com'` (with the protocol as well)? – Obsidian Age Jul 28 '17 at 04:26
  • @ObsidianAge both `http://example.com` and `https://example.com` fail saying they `could not be parsed properly` – Don Jul 28 '17 at 04:29

0 Answers0