Blocked a frame with origin from accessing a cross-origin frame
Same-Origin Policy
(SOP)
restricts how a document or script loaded from one origin can interact with a resource from another origin. For example, when
Site X
tries to fetch content from
Site Y
in a frame, by default, Site Y's pages are not accessible due to security reasons, it would be a huge security flaw if you could do it.
Origin is considered different if at least one of the following parts of the address isn't maintained:
protocol://hostname:port/...
Protocol,
hostname
and port must be the same of your domain if you want to access a frame.
How to solve?
The
window.postMessage()
method provides a controlled mechanism to securely circumvent this restriction. The
window.postMessage()
safely enables cross-origin communication between Window objects; e.g: between a page and an iframe embedded within it.
Syntax:
postMessage(message, targetOrigin)
postMessage(message, targetOrigin, [transfer])
-
targetOrigin
- specifies what the origin of targetWindow must be for the event to be dispatched, either as the literal string "*" (indicating no preference) or as a URI.
example
Main Page source
const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
The second argument to
postMessage()
can be '*' to indicate no preference about the origin of the destination. Always provide a specific targetOrigin, not
'*'
, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested
malicious
site.
The dispatched event
In your ‹iframe› contained in the main page, a window can listen for dispatched messages by executing the following JavaScript:
window.addEventListener('message', event => {
if (event.origin.startsWith('http://your-first-site.com')) { //check the origin of the data!
// The data was sent from your site. It sent with postMessage is stored in event.data:
console.log(event.data);
} else {
// The data was NOT sent from your site!
return;
Disabling same-origin policy in your browser
Running a browser with
same-origin
security settings disabled grants any website access to
cross-origin
resources.
For Windows:
Go into the command prompt and go into the folder where
Chrome.exe
is and type:
chrome.exe --disable-web-security
For Linux :
$ google-chrome --disable-web-security
Also if you're trying to access local files for development purposes like
AJAX
or JSON, you can use this flag too.
--allow-file-access-from-files
NOTE:
Disabling same-origin policy is very unsafe and should NEVER be done if you do not know exactly what you are doing.
Uncaught TypeError: 'undefined' is not a function
XMLHttpRequest cannot load no 'access-control-allow-origin'
TypeError: null is not an object
Uncaught RangeError: Maximum call stack size exceeded
Uncaught TypeError: Cannot set property
Unable to get property undefined or null reference
SyntaxError: Cannot use import statement outside a module
What is UnhandledPromiseRejectionWarning
net-informations.com (C) 2023 Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.
SiteMap
|
Terms
|
About
