See below sample code

• If I ment out the "sandbox" attribute line, everything run just fine.
• if I unment the "sandbox" attribute line, in chrome open developer console, we will see error "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('') does not match the recipient window's origin ('null')."

any idea how to solve this problem?

const iframeElement = document.createElement("iframe");
iframeElement.src = ""
//iframeElement.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-scripts");
iframeElement.onload = (e) => {
  iframeElement.contentWindow.postMessage("foo", "");
};

const containerElement = document.getElementById("place-holder-for-iframe");
containerElement.appendChild(iframeElement);

You can try it out with this jsbin link ,output

• open js bin link in chrome
• open chrome developer tool --> go to Console tab
• unment the sandbox line
• click "run with js" from jsbin

See below sample code

• If I ment out the "sandbox" attribute line, everything run just fine.
• if I unment the "sandbox" attribute line, in chrome open developer console, we will see error "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.bing.') does not match the recipient window's origin ('null')."

any idea how to solve this problem?

const iframeElement = document.createElement("iframe");
iframeElement.src = "https://www.bing."
//iframeElement.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-scripts");
iframeElement.onload = (e) => {
  iframeElement.contentWindow.postMessage("foo", "https://www.bing.");
};

const containerElement = document.getElementById("place-holder-for-iframe");
containerElement.appendChild(iframeElement);

You can try it out with this jsbin link http://jsbin./gafobulife/edit?js,output

• open js bin link in chrome
• open chrome developer tool --> go to Console tab
• unment the sandbox line
• click "run with js" from jsbin

• javascript
• html
• iframe
• cors

1 Answer 1

If you don't set allow-same-origin in the sandbox attribute, the content is treated as if it is from a unique origin: See https://developer.mozilla/en-US/docs/Web/HTML/Element/iframe#Attributes, and https://www.html5rocks./en/tutorials/security/sandboxed-iframes/.

Confusingly, allow-same-origin doesn't mean that the iframe will be able to access its parent, as if they were of the same origin (unless they are of the same origin), but it means that it will be able to treated as if it's from its normal origin (in this case, https://www.bing.).

So you can either change:

iframeElement.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-scripts")'

to

iframeElement.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-scripts allow-same-origin");

or if you don't want your iframe to maintain its origin, change:

iframeElement.contentWindow.postMessage("foo", "https://www.bing.");

to

iframeElement.contentWindow.postMessage("foo", "*");

For me, there are additional errors if I don't use allow-same-origin, most likely from how bing. is configured.