10

I was trying to include script-nonce on my html file, but seems like none of the current browsers support it.

Is anyone aware of any version of any browser that supports this functionality? I'm currently using Chrome version Version 26.0.1410.63 and have tried version 28 as well, but it doesn't seem to be working

A sample html file with script nonce can be found here

All I see is the error on javascript console, which hints towards the browser not supporting script-nonce yet:

Unrecognized Content-Security-Policy directive 'script-nonce'
Rory Alsop
  • 61,367
  • 12
  • 115
  • 320
Jagat
  • 213
  • 2
  • 6

3 Answers3

8

It works on Chrome too, but so far (Version 26.0.1410.64 m) only with the temporary X-Content-Security-Policy instead of Content-Security-Policy header, as defined in the already updated code samples. W3C Web Application Security working group just moved the Content Security Policy 1.1 from previous working group draft to a W3C Editor's Draft status today, on 28th of April 2013. What are the chances of that, huh?

I guess Google Code jumped the gun with already updated code samples a few days too soon, and I expect the next Chrome update to change this accordingly.

Anyway, the solution was hiding in the fineprint of the Google's cached copy of previous draft version of CSP 1.1:

This document describes a proposal that has been discussed by the broader community for about two years. There are experimental implementations in Firefox and Chrome, using the header names X-Content-Security-Policy and X-WebKit-CSP respectively. Internet Explorer 10 Platform Preview also contains a partial implementation, using the header name X-Content-Security-Policy.

If we check Google Code samples again, the difference in these header values becomes glaringly obvious:

<meta http-equiv="Content-Security-Policy" content="script-nonce noncynonce;">

So it looks that all you have to do (for the time being, until Chrome updates to reflect the status change of the CSP 1.1 proposal) is, to change the header name back to X-Content-Security-Policy.

I've also tested these samples on latest Firefox and Opera browsers, and they already accepted Content-Security-Policy and didn't complain with console errors.

TildalWave
  • 10,801
  • 11
  • 45
  • 84
2

Yeah.

Looks like the script-nonce was removed from the spec, instead script-src 'nonce-ABCD4321'; is supposed to be the new syntax. From what I can tell, the new syntax isn't supported in Chrome 32 but is supported by Chrome 33 Beta.

See http://jsbin.com/iyukAwA/3 for example test page.

EDIT1: It looks like Blink patch https://chromium.googlesource.com/chromium/blink/+/adbf3bb0338931076b7c7bd002b043def760cc61 removes script-nonce support and adds script-src 'nonce-xxx'; support.

EDIT3: Latest spec.

EDIT2: I absolutely require inline script and css because my web app has in-page code to detect if included script or css source files fail to load (e.g. due to unreliable mobile connection). In Chrome, creating the meta element dynamically works:

<script>
var meta = document.createElement('meta');
meta.httpEquiv = 'Content-Security-Policy';
meta.content = "default-src 'none'; connect-src 'self'; img-src 'self'; style-src 'self';";
document.getElementsByTagName('head')[0].appendChild(meta);
</script>
</head>

From Content Security Policy 1.1 - W3C Working Draft 04 June 2013 :

Example 4: A website that relies on inline script elements wishes to ensure that script is only executed from its own origin, and those elements it intentionally inserted inline:

Content-Security-Policy: script-src 'self' 'nonce-$RANDOM';

The inline script elements would then only execute if they contained a matching nonce attribute:

<script nonce="$RANDOM">...</script>

EDIT5: http://jsbin.com/ArusOCu/1 has example of document.onsecuritypolicyviolation(event) logging. e.g.

document.onsecuritypolicyviolation = function (evt) {
    console.log('Bzzp! Security violation on', evt.documentURI);
}

EDIT5 - MORE: Chrome 33 Beta generated the following event details: 

blockedURI: ""
columnNumber: 0
currentTarget: document
documentURI: "http://jsbin.com/ArusOCu/1"
effectiveDirective: "script-src"
lineNumber: 0
originalPolicy: "default-src 'none'; script-src http://static.jsbin.com 'unsafe-eval' 'nonce-12345678'; connect-src 'self'; style-src http: 'unsafe-inline';"
referrer: ""
sourceFile: ""
statusCode: 200
target: document
timeStamp: 1390192192606
type: "securitypolicyviolation"
violatedDirective: "script-src http://static.jsbin.com 'unsafe-eval' 'nonce-12345678'"
__proto__: SecurityPolicyViolationEvent
[removed base Event parameters]

and the docs say that the following properties are required:

readonly attribute DOMString documentURI;
readonly attribute DOMString referrer;
readonly attribute DOMString blockedURI;
readonly attribute DOMString violatedDirective;
readonly attribute DOMString effectiveDirective;
readonly attribute DOMString originalPolicy;
readonly attribute DOMString sourceFile;
readonly attribute long      lineNumber;
readonly attribute long      columnNumber;
robocat
  • 141
  • 3
  • The meta tag approach works really nicely (in Chrome) for "whitelisting" any inline scripts that appear earlier in the document. I wish it also worked in Firefox! – frontendbeauty Aug 20 '14 at 19:25
1

Tidalwave has given an excellent answer.

However, you can get it working on Chrome Version 28.0.1490.2 dev, after enabling "Experimental Webkit Features" on chrome://flags. That way, you can use this syntax without any modification.

I got this answer from the developer of this feature on Chromium and he has warned that that syntax might change in future.

Jagat
  • 213
  • 2
  • 6