CSP and iframe sandbox Comparison


If you've loaded this page on my website, wizardsoftheweb.pro, you should know that I'm actively tracking your usage via Google Analytics. Google collects quite a bit of information which is then shared across Google apps, including Google Analytics.

As far as I know, Google Analytics does not respect the Do Not Track header. To opt out on my site, install the relevant Google Analytics Opt-out Browser Add-on. I also highly recommend reading EFF's DNT overview and installing EFF's Privacy Badger.

If you're cool with me (and by extension Google) tracking your usage, I really appreciate it. I'm curious about how you interact with my content and eventually want to play with the data.


This page attempts to illustrate how Content-Security-Policy sandbox headers and iframe sandbox attributes interact. I couldn't find any practical examples and wasn't sure how this would actually turn out, so I built this. tl;dr: always set the iframe attribute; also set the CSP header when you can.

Using the switches below, you can change the CSP header and the iframe attribute. The external file, embed-me.php, is a simple PHP script that creates a CSP header from $_GET params and serves a very basic HTML page with some JavaScript.

I didn't actually implement very many sandbox options. If there's something you'd like to see tested, shoot me an email (cj@ this website) or check out the repo and make a PR or a fork.

WARNING: disabling both sandboxes or turning on allow-modals triggers a vanilla alert. alerts are supremely annoying and should never be used unless you're trying to illustrate specific behavior (or you need a quick way to leave content live but make sure no one uses it more than once).

sandbox demo

Source sandbox allow-scripts allow-modals
Content-Security-Policy header
iframe attribute