One option is to disable the same-origin policy entirely, as detailed in Disable same origin policy in Chrome. This will probably do the trick for you, but it's a bit inelegant, as it turns off the same-origin policy for the entire browser instance.
A second option is to create a small Chrome extension that holds all of the files that you need to load. It will make your files accessible via chrome-extension://...
and only files within that extension will be immune from the same-origin policy.
Create a new folder, put your testing Web page in it, and create a manifest.json
file in the same folder:
/testing_extension
test_page_immune_from_same_origin.html
script_used_by_test_page.js
styles_for_test_page.css
manifest.json
The contents of manifest.json
should be
{
"name": "All-origin access extension",
"manifest_version": 2,
"version": "1.0",
"permissions": ["<all_urls>"]
}
Load the extension by going to chrome://extensions
, enabling Developer Mode
, and selecting the new folder with Load unpacked extension...
option.
You can view your page as an extension resource chrome-extension://[app_id]/[file_name]
, where "app_id
" is the hash listed for the extension on the chrome://extensions
page. (It will be a long string of lowercase letters.) Now when the page performs cross-origin resources, it does so with the authority of a browser extension, unrestricted by the same-origin policy.
Note that you will need to move any inline scripts into separate files in order to comply with extension CSP requirements.