- nodejs & npm - https://nodejs.org
Clone project
$ git clone https://github.com/stevenceuppens/iframe.gitRoot directory
$ cd iframeInstall required modules
$ npm install$ npm run-script run- The "RootApp" loads 6 different iFrames
- All iFrames are configured differently
- All iFrames load exactly the same content
iFrame configurations:
- iFrame1: No Cross Origin, No Sandbox
- iFrame1: No Cross Origin, Sandbox
- iFrame1: No Cross Origin, Sandbox, Allow-Srcipts
- iFrame1: Cross Origin, No Sandbox
- iFrame1: Cross Origin, Sandbox
- iFrame1: Cross Origin, Sandbox, Allow-Srcipts
I added simple javascript library, that is loaded by the GuestApp. The library checks if we are in a sandboxed iFrame. If this is the case we load the HTML (dumy form)
Changing the sanbox attributes after the page has loaded does not affect the iFrame. A page reload is required.
- CSP: frame-ancestors (locks down which hosts are allowed to embed this frame)
- CSP: script-src (Inline eval is not allowed by default)
I added this header, but it's not supported by chrome and safari.. and also redundant with CSP frame-ancestors
Try to access content from RootApp to GuestApp (No Sandbox)
Open javascript console inside the webbrowser (right click, inspect) and type the following. This will show you the HTML content of the iFrame.
$ document.getElementById('iframe1').contentWindow.document.body;
> <body onload="load()">…</body>Try to access content from RootApp to GuestApp (Sandbox)
Open javascript console inside the webbrowser (right click, inspect) and type the following. This will show you the HTML content of the iFrame.
$ document.getElementById('iframe6').contentWindow.document.body;
> SecurityError: Sandbox access violation: Blocked a frame at "http://127.0.0.1:3000" from accessing a cross-origin frame. The frame being accessed is sandboxed and lacks the "allow-same-origin" flag.Try to remove sandbox attribute and access content from RootApp to GuestApp (Drop Sandbox)
Open javascript console inside the webbrowser (right click, inspect) and type the following. This will show you the HTML content of the iFrame.
Remove sandbox attribute:
$ document.getElementById('iframe6').removeAttribute('sandbox');Try to access content: (fails as removing attributes do not take effect without reloading)
$ document.getElementById('iframe6').contentWindow.document.body;
> SecurityError: Sandbox access violation: Blocked a frame at "http://127.0.0.1:3000" from accessing a cross-origin frame. The frame being accessed is sandboxed and lacks the "allow-same-origin" flag.Reload content:
$ document.getElementById('iframe6').src = document.getElementById('iframe6').src;Access content:
$ document.getElementById('iframe6').contentWindow.document.body;
> SecurityError: Blocked a frame with origin "http://127.0.0.1:3000" from accessing a cross-origin frame. Protocols, domains, and ports must match.