javascript - how to correctly postMessage into an iframe that has sandbox attribute enabled - Stack Overflow

admin管理员组

文章数量:1395901

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

Share Improve this question Follow asked May 23, 2018 at 5:05 jojojojo 13.9k3636 gold badges9595 silver badges126126 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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.

本文标签： javascripthow to correctly postMessage into an iframe that has sandbox attribute enabledStack Overflow