How to change iframe sandbox flags
I have an iframe in my aspx page. the code for this:
<iframe style="height: 513px; width: 1071px" id="iframe1" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="paymentprocess.aspx"></iframe>
sandbox attributes are needed to stop the iframe page to capture the entire window. after payment, the response page is loaded into an iframe due to automatic redirection. I want to change iframe attributes via javascript so that all windows will display the response page. I am getting an error in the javascript console.
the frame trying to navigate to the top-level window is isolated, but the "allow-top-navigation" flag is not set.
I am using this code:
if (top != self) {
top.location = self.location;
}
but this throws the above error in the console.
Please help me how to change iframe attributes of parent window from child page (confirmation page in this case)
source to share
I am assuming that the page that loads this iframe inside and the content you load inside the iframe are in different domains (interpreted with paymentprocess.aspx). If so, you cannot directly process the parent document due to the cross-origin policy. But you can send a message to the parent, handle that message in the parent, and set this extra flag in the iframe attributes with the set attribute.
Sample code:
from iframe:
window.parent.postmessage("ChangeIframeAttributes", *);
inside the parent document:
window.addEventListener('message', function (event) {
if (event.data === "ChangeIframeAttributes") {
document.getElementById("iframeId").setAttribute("property","value");
}
}, false);
If you are on the same domain, you can access the parent document with window.parent.document
, retrieve the element from the document object, and setAttribute
.
Update
I tried to just set the attribute using window.parent and the attribute gets updated, but the problem still persists when the top.location changes because the iframe is already loaded, and the attribute modification won't be done unless the nested iframe view context is included.
From w3c,
http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html
These flags only take effect when the nested iframe view context is moved. Removing or removing the entire sandbox attribute does not affect the already loaded page
If the allow-scripts keyword is specified along with the allow-same-origin keyword and the file is from the same origin as the iframe document, then the script in the "sandboxed" iframe can simply reach out, remove the sandbox attribute, and then reload itself. effectively ripping out of the sandbox altogether.
Generally speaking, dynamically deleting or changing a sandbox attribute is not recommended because it can make it difficult to reason about what will and won't be allowed.
In my opinion, two workable options.
- set the flag from the beginning. (this is not the best way to do it).
- use post by submitting url and setting window.location to parent.
Pseudocode:
in the main window:
<script type="text/javascript">
function f()
{
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent,function(e) {
var key = e.message ? "message" : "data";
var data = e[key];
window.location = data;
},false);
}
</script>
<body onload="f()">
<iframe id="iframeId" src="testiframe.html" sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
</iframe>
</body>
in the iframe:
<script type="text/javascript">
var callParent = function () {
window.parent.postMessage(" " + self.location, '*');
};
</script>
<button onclick="callParent()">set parent attribute<button>
Second approach I tested with the above code and it works.
Hope this is helpful.
source to share