Search code examples
javascriptsame-origin-policy

Why is same-origin-policy blocking this javascript call on a local domain?


I've got a local dev site running on http://mysite.local/ (it's a Django admin site with Grappelli installed, if that's any relevance).

The admin site opens a popup window for some operations (i.e. via showRelatedObjectLookupPopup())

Due to previous similar issues with same-origin-policy (in production, the admin site loads some URLs from a CDN domain, which can trigger it) we have a "normaliser" JS function that explicitly sets:

document.domain = "mysite.local";

Both in the parent and in the popup, on page load.

The popup contains a link with an onclick handler that triggers a JS function in the parent:

onclick="opener.dismissRelatedLookupPopup(window, '422'); return false;"

Clicking this link in Chrome or FF results in a similar browser error:

Permission denied to access property "dismissRelatedLookupPopup" on cross-origin object

or

Blocked a frame with origin "http://mysite.local" from accessing a cross-origin frame.

Both the popup and the opener URLs share the same protocol, domain and port.

This is only an issue on the local domain. On dev/uat/production sites, (i.e. dev.mysite.com), all of which have their domain set to the superdomain "mysite.com" by the above "normaliser" function, the popup can successfully call the JS function in the parent.

What's stopping it on the local domain? What have I missed?


Solution

  • It seems that switching the local domain, as per the original suggestion from @charlietfl, has indeed fixed the issue. It now runs locally as local.mysite.com instead of mysite.local, and the same-origin error has gone. I'm still unclear on what was triggering the error (was it because the the domain had only two parts as opposed to three? Was it something specific to domains ending in ".local"?) but in the unlikely event that anyone else trips up on this, that's what fixed it for me.