24

I am running into same-origin policy issues in Javascript. I've read about a workaround for this using the document.domain variable, but I cannot get the workaround to work. The workaround is that you are supposed to be able to set document.domain to 'example.com' so that if you run code from foo.example.com it can load data via XHR from bar.example.com.

Details on the workaround are here:

https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript

My example code -- which doesn't produce the desired results -- is run from a URL like http://foo.example.com/:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script>
document.domain = 'example.com';
window.onload = function() {
    var req = new XMLHttpRequest();
    var url = 'http://bar.example.com/';
    req.open('GET', url, true);
    req.onreadystatechange = function (aEvt) {
        if (req.readyState == 4) {
            var elem = document.getElementById('result');
            if (req.status == 200) {
                var data = req.responseText;
            } else {
                var data = "Error loading page: " + req.status;
            }
            elem.innerHTML = data;
        }
    };
    req.send(null);
};
</script>
Result:<hr>
<div id="result"></div>
</body>
</html>

The output from this code:

Result:
Error loading page: 0

If I change url to 'http://foo.example.com/', everything works correctly. Is there a bug in my example code?

I don't want to use a proxy because they're slower, less efficient, and will increase traffic on our web server. It'd be really cool if this workaround actually worked. Is this workaround "pie in the sky"?

1 Answer 1

24

document.domain allows the communication between frames/iframes. Not XHR.

<body>
<iframe src="http://bar.example.com/"></iframe>
<script>
    document.domain = 'example.com';
    var ifr = document.getElementsByTagName('IFRAME')[0];
    ifr.onload = function(e){
        //will log the string "BODY" in the console
        console.log(ifr.contentWindow.document.body.tagName);
    };
</script>
</body>

If you remove the line with document.domain, reading the content of the contentWindow will throw the Same Origin Policy error.

5
  • I tried it. Setting document.domain in chrome return network error. Developers tools told the same origin policy problem. Sep 12, 2015 at 0:02
  • 1
    Did you try to set document.domain to the same value in both the parent domain and the subdomain ? If not, this causes an error.
    – Mic
    Sep 21, 2015 at 8:19
  • I guess It’s because the iframe is completely a different domain. Sep 21, 2015 at 10:26
  • yes, the domain must be the same. This is just useful for sub domain/port issues.
    – Mic
    Sep 22, 2015 at 11:32
  • if foo.example.com sets document.domain=example.com would also bar.foo.example.com be able to communicate if it sets document.domain=example.com ?
    – Jau L
    Dec 9, 2016 at 6:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.