latentflip/index.html

## index.html
<head>
  <!-- this will run -->
  <style nonce='1234'>
    .a {
      color: red;
    }
  </style>

  <!-- this won't run -->
  <style>
    .b {
      color: red;
    }
  </style>

  <script>
    // allowed (modifying nonced sheet)
    var sheet = document.styleSheets[0];
    console.log(sheet);
    sheet.insertRule(".c { color: red; }", 1);

    // not allowed (no nonce)
    var style = document.createElement("style");
    style.appendChild(document.createTextNode(".d { color: red; }"));
    document.head.appendChild(style);

    // not allowed correct nonce
    var style = document.createElement("style");
    style.setAttribute("nonce", "1234");
    style.appendChild(document.createTextNode(".e { color: red; }"));
    document.head.appendChild(style);
  </script>
</head>
<body>
  <p class="a">Inline, nonce</p>
  <p class="b">Inline, no nonce</p>
  <p class="c">Inserted into existing nonced sheet</p>
  <p class="d">Inserting new no nonce sheet</p>
  <p class="e">Inserting new nonced sheet</p>
</body>

## shell.sh
# Run with:

# copy the file above somewhere
npm install -g node-static
static . -a 0.0.0.0 -p 8080 -H "{ \"Content-Security-Policy\": \"script-src 'unsafe-inline'; style-src 'nonce-1234'\" }"
# visit http://{{yourip}}:8080

# NB:! localhost will not work, use a real ip/alias, browser will ignore CSP for localhost
	<head>
	<!-- this will run -->
	<style nonce='1234'>
	.a {
	color: red;
	}
	</style>

	<!-- this won't run -->
	<style>
	.b {
	color: red;
	}
	</style>

	<script>
	// allowed (modifying nonced sheet)
	var sheet = document.styleSheets[0];
	console.log(sheet);
	sheet.insertRule(".c { color: red; }", 1);

	// not allowed (no nonce)
	var style = document.createElement("style");
	style.appendChild(document.createTextNode(".d { color: red; }"));
	document.head.appendChild(style);

	// not allowed correct nonce
	var style = document.createElement("style");
	style.setAttribute("nonce", "1234");
	style.appendChild(document.createTextNode(".e { color: red; }"));
	document.head.appendChild(style);
	</script>
	</head>
	<body>
	<p class="a">Inline, nonce</p>
	<p class="b">Inline, no nonce</p>
	<p class="c">Inserted into existing nonced sheet</p>
	<p class="d">Inserting new no nonce sheet</p>
	<p class="e">Inserting new nonced sheet</p>
	</body>
	# Run with:

	# copy the file above somewhere
	npm install -g node-static
	static . -a 0.0.0.0 -p 8080 -H "{ \"Content-Security-Policy\": \"script-src 'unsafe-inline'; style-src 'nonce-1234'\" }"
	# visit http://{{yourip}}:8080

	# NB:! localhost will not work, use a real ip/alias, browser will ignore CSP for localhost