Add HTML5 sandbox attribute to an iframe using Javascript

Question

I've got an empty iframe and a button:

<input type="button" name="B1" value="google" onclick="frames['IFrameName1'].location.href='https://www.google.com/'">

But (besides .location.href) i need to set the attribute sandbox="allow-forms allow-scripts allow-same-origin, because the framed site "deframes". How to set location AND sandbox?

score 7 · Answer 1 · answered Sep 15 '18 at 18:48

While you can set the iframe.sandbox property as a string, it's technically a DOMTokenList interface, so you can also add() and remove() single tokens:

let myIframe = document.createElement('iframe');
myIframe.sandbox.add('allow-scripts');
myIframe.sandbox.toggle('allow-forms');

console.log(myIframe.sandbox.toString())
// Returns: "allow-scripts allow-forms"

console.log(myIframe.outerHTML)
// Returns: <iframe sandbox="allow-scripts allow-forms"></iframe>

Adam · Accepted Answer · 2012-10-23T22:09:46.123

5

If you want to do two things on one click event. Have a function do both of those things and fire that function on click.

window.onload = function(){
    var button = document.getElementsByName("B1")[0]
    var iframe = document.getElementsByName("IFrameName1")[0]
    button.addEventListener('click',addSandboxAndChangeLocation,false);

    function addSandboxAndChangeLocation(){
       frames['IFrameName1'].location.href='https://www.google.com/';
       iframe.sandbox = 'allow-forms allow-scripts allow-same-origin';
    }
}

Check it out on jsFiddle!

edited Oct 23 '12 at 22:09

answered Oct 22 '12 at 23:41

Adam

43,763
16
104
144

Thanks, i am trying.. May be it'd be easier with jQuery? – Ivan Oct 23 '12 at 00:04
It would be easier with jQuery for sure. – Adam Oct 23 '12 at 00:09
1

i'm afraid sandbox did not apply and it goes on deframing, while pure HTML iframe does not. – Ivan Oct 23 '12 at 00:16
I think I see our problem. We have to set the sandbox attribute on the iframe dom element not the frame itself. – Adam Oct 23 '12 at 00:37
Sure, i see it is working on jsFiddle. Thank you for your help and time ;) – Ivan Oct 23 '12 at 01:05
If it works on jsFiddle and does not work in browser, go to http://jsfiddle.net/draft/ and see the working code. May be this tip would help someone, as it helped me =) – Ivan Oct 23 '12 at 17:54
Vote Up requires 15 reputation, unfortunnately. I've got 11 – Ivan Oct 23 '12 at 21:10
Great. i did it. The only thing you, could do now, Adam, is to correct your anwser, placing it in "window.onload=function(){`your_anwser`}". That's why it worked in jsFiddle and did not in browser. – Ivan Oct 23 '12 at 22:01
There's a good reason why the fiddle uses bing and wikipedia and not google. Trying to use google results in this: Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. Any idea how to circumvent the effect of such header? – Alex May 12 '14 at 16:17
It can't be circumvented. It is a security feature. See http://stackoverflow.com/questions/9158024/iframe-with-external-page-not-working#9158079 – Adam May 12 '14 at 16:54
I try this on chrome the new value of the sandbox attr didn't apply anything. – M.Abulsoud Nov 28 '17 at 19:45

Add HTML5 sandbox attribute to an iframe using Javascript

2 Answers2

Linked