Can Cross-Origin Resource Sharing headers authorize X-Domain IFRAME access?

by

CORS doesn’t let you do that, but you can use cross-document messaging to send strings between iframes and their parent windows even on different domains, and use that to communicate.

Most browsers support this although Internet Explorer’s way differs from the others‘.

Assuming what you want is to have the iframe announce to the parent page its desired height, you could put this in your iframe code (not tested):

var message = {
    width: desiredWidth,
    height: desiredHeight
};
window.parent.postMessage(JSON.stringify(message),'*');

And this in your containing page:

function onMessage (event) {
    if (event.source != theIFrameElement.contentWindow) return;
    var message = JSON.parse(event.data);
    var desiredHeight = message.height;
    var desiredWidth = message.width;   
}

if (window.attachEvent)
    window.attachEvent('onmessage', onMessage);
else if (window.addEventListener)
    window.addEventListener('message', onMessage, false);

The attachEvent is for IE and addEventListener is for everyone else. You might want to check the target origin for security purposes, but that’s the general idea.

EDIT: Browser support for Cross-document messaging (—fsb)

More Related Contents:

  1. Is there a cross-domain iframe height auto-resizer that works?
  2. How do I use Access-Control-Allow-Origin? Does it just go in between the html head tags?
  3. using postmessage to refresh iframe’s parent document
  4. How does Access-Control-Allow-Origin header work?
  5. How can I access the contents of an iframe with JavaScript/jQuery?
  6. Origin is not allowed by Access-Control-Allow-Origin
  7. AngularJS performs an OPTIONS HTTP request for a cross-origin resource
  8. IE9 jQuery AJAX with CORS returns “Access is denied”
  9. When do browsers send the Origin header? When do browsers set the origin to null?
  10. How to create cross-domain request?
  11. cross-domain iframe resize
  12. htaccess Access-Control-Allow-Origin
  13. javascript access parent DOM across domains?
  14. How do I implement Cross Domain URL Access from an Iframe using Javascript?
  15. How to enable cross-origin resource sharing (CORS) in the express.js framework on node.js
  16. Youtube iframe wmode issue
  17. Content script for iframe inside extension popup or background script
  18. Uncaught DOMException: Blocked a frame with origin “http://localhost:8080” from accessing a cross-origin frame while listing the iframes in page
  19. Is CORS a secure way to do cross-domain AJAX requests?
  20. Angular, onLoad function on an iFrame
  21. same-origin policy and CORS – what’s the point?
  22. CORS and phonegap apps
  23. What is the issue CORS is trying to solve?
  24. Javascript module not working in browser?
  25. HTTP and HTTPS iframe
  26. How does the ‘Access-Control-Allow-Origin’ header work?
  27. Using iframe with local files in Chrome
  28. google homepage will not load in an iframe
  29. Enable CORS with wamp on windows 8
  30. Cross domain iframe content load detection

Leave a Comment