Getting around same origin policy in javascript without server side scripts

by

As David Dorward mentioned, JSON-P is the simplest and fastest; however, there is another trick, specifically using two iframes.

Two get around this issue without using JSONP, you can do the following. This technique assumes that you have some sort of development access to the parent page.

There are three pages on two domains/sites.

  1. Parent page
  2. Content page
  3. Cross-domain communication page (aka “xdcomm”)

Pages the parent and xdcomm pages are hosted on the same domain, the content page is hosted on any other domain. The content page is embedded as an iframe in the parent page and the xdcomm page is embedded as a hidden iframe in the content page.

enter image description here

The xdcomm page contains a very simple script that detects GET parameters in the query string, parses that string for method and args variables (where args is a JSON encoded string), and then executes the specified method with the specified arguments in the parent page. An example can be seen here (view source).

Even though JavaScript’s Same Origin Policy restricts code on one domain from accessing that of another, it doesn’t matter if domains are nested within each other (domain A, nested within domain B, nested within domain A).

So, in a nutshell, the content page sends messages to the parent page via the xdcomm page by changing the source of the iframe to something like http://domaina.com/xdcomm.html?src=foo&args=[1,2,3,4]. This would be equivalent to executing foo(1,2,3,4) in the parent page.

Also, know that there are already libraries that help you with this, such as easyxdm. What I’ve explained here is the basis of one of the techniques that they use, and while it might not be as fancy, it is certainly a fully functioning and lightweight implementation.

More Related Contents:

  1. Get List of jQuery UI themes – from an URL (same-origin-policy)
  2. http request has been block from https
  3. Why does my JavaScript code receive a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error, while Postman does not?
  4. Ways to circumvent the same-origin policy
  5. XMLHttpRequest cannot load XXX No ‘Access-Control-Allow-Origin’ header
  6. SecurityError: Blocked a frame with origin from accessing a cross-origin frame
  7. How do I send a cross-domain POST request via JavaScript?
  8. Origin is not allowed by Access-Control-Allow-Origin
  9. Access parent URL from iframe
  10. Why does canvas.toDataURL() throw a security exception?
  11. How to make cross domain request [duplicate]
  12. Cross-origin data in HTML5 canvas
  13. cross domain localstorage with javascript
  14. Unsafe JavaScript attempt to access frame with URL
  15. Cross domain POST request is not sending cookie Ajax Jquery
  16. How can I access the DOM elements within an iFrame
  17. Can I disable SOP (Same Origin Policy) on any browser for development?
  18. cross-origin ‘Authorization’-header with jquery.ajax()
  19. How is it possible for an iframe to access its parents DOM?
  20. Detect if the iframe content has loaded successfully
  21. Execute web worker from different origin
  22. Cross-domain requests stopped working due to no `Access-Control-Allow-Origin` header present in the response
  23. Three.js and loading a cross-domain image
  24. Embedding Google Apps Script in an iFrame
  25. Cross-domain connection in Socket.IO
  26. How to use HTTP.GET in AngularJS correctly? In specific, for an external API call?
  27. iframe not reading cookies in Chrome
  28. postMessage still broken on IE11?
  29. Same Origin Policy – AJAX & using Public APIs
  30. How to get data with JavaScript from another server?

Leave a Comment