как правильно отправить сообщение в iframe с включенным атрибутом песочницы

Question

См. Ниже пример кода

• Если я закомментирую строку атрибута «песочница», все будет работать нормально.
• если я раскомментирую строку атрибута «песочница», в открытой консоли разработчика Chrome мы увидим ошибку «Не удалось выполнить 'postMessage' в 'DOMWindow': указан целевой источник ('https://www.bing.com')не соответствует происхождению окна получателя ('null'). "

есть идеи, как решить эту проблему?

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

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

Вы можете попробовать это по этой ссылке jsbin http://jsbin.com/gafobulife/edit?js,output

• открыть ссылку js bin в chrome
• открыть инструмент разработчика chrome -> перейти на вкладку консоли
• раскомментировать строку песочницы
• нажмите «запустить с js» из jsbin

Answer 1

Если вы не установите allow-same-origin в атрибуте песочницы, контент обрабатывается так, как если бы он был уникальным источником: см. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Attributes, и https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/.

Забавно, что allow-same-origin не означает, что iframe сможет получить доступ к своему родителю, как если бы они были одного и того же происхождения (если только они не одного и того же происхождения), но это означает, что он сможет обрабатываться так, как если быэто от его нормального происхождения (в данном случае https://www.bing.com).

Таким образом, вы можете изменить:

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

на

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

или если вы нене хотите, чтобы ваш iframe сохранил свое происхождение, измените:

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

на

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

Для меня есть дополнительные ошибки, если я не использую allow-same-origin, скорее всегоот того, как настроено bing.com.