CSP and iframe sandbox Comparison

Learn how Content-Security-Policy sandbox headers and iframe sandbox attributes interact


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 is created on-the-fly with proper headers and content.

I didn't actually know how to 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. The things I haven't touched (e.g. the Presentation API) involve tools I'm not familiar with (yet).

WARNING: messing around with this tool involves a lot of popups, alerts, and generally really annoying stuff. You've been warned.

sandbox demo

Source sandbox allow-scripts allow-popups allow-modals allow-forms allow-same-origin allow-orientation-lock allow-pointer-lock allow-presentation allow-popups-to-escape-sandbox allow-top-navigation
CSP Embed