Content Security Policy (CSP) Demo

https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

Meta

<meta http-equiv="Content-Security-Policy" content="default-src 'self';">

To enable CSP, you need to configure your web server to return the Content-Security-Policy HTTP header (sometimes you will see mentions of the X-Content-Security-Policy header, but that's an older version and you don't need to specify it anymore).

Alternatively, the element can be used to configure a policy, for example:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

<div class="columns">

Remote Local

<span style="font-size:0.25em">

A CSP compatible browser will then only execute scripts loaded in source files received from those whitelisted domains, ignoring all other script (including inline scripts and event-handling HTML attributes).

<span id="file-js">

<span id="inline-js">

Inline JS doesn't work

Try on the dev-tools

These functions are defined in script.js (already loaded).


    function tryFetchMaliciousURL () {
      document.head.innerHTML = '<meta http-equiv="Content-Security-Policy" content="">';
      fetch('//example.com').then(v => console.info(v));
    }


      function tryLoadMaliciousImage() {
        document.head.innerHTML = '<meta http-equiv="Content-Security-Policy" content="">';
        document.body.innerHTML = '<img src="http://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg" width="50%" />';
      }