Search code examples
content-security-policycustom-data-attributenonce

nonce versus custom data. is it nonce= or nonce- on the client side? also is it nonce-xyz or 'nonce-xyz' on the client side

I'm confused about nonce implementation for inline scripts and CSS. I defined on the server that the

res.locals.cspNonce = crypto.randomBytes(16).toString("hex");

and

scriptSrc: ["'self'", 'nonce-${res.locals.cspNonce}']

and noticed the actual nonce values itself were not showing up on the client browser (Brave) - though none-the-less the script was executing - so not sure if that is just a browser-level security thing because when I changed my client-side inline nonce to something hard-coded like 'abc', the script refused to run which is good. I just don't get it yet. Is "nonce" just a standard phrase? If I so decided could I just set server-side

 scriptSrc: ["'self'", `'plackard=${res.locals.cspNonce}'`]

so the phrase 'nonce' is really irrelevant and I've just created a rule that client-side all script must match the attribute "plackard=$somerandomcharaters"?

Lastly, the server-side settings tend to put single quotes around the 'nonce=something' or nonce-something. Why? I understand the standard HTML 5 syntax for custom data attributes is: https://www.w3schools.com/tags/att_global_data.asp

    data-custom="abc"

not

    'data-custom="abc"'

The extra single quote seems unnecessary and even would confuse the browser client-side? So put extra single quotes around everything nonce, or ditch them? Is nonce an exception to the standardized HTML5 fieldname="value" paradigm and hence requires single quotes 'fieldname="value"' or not?

If it were my desire would there be any issue with setting my 'nonce' server-side as requiring my script data attribute to say

  data-my-custom-safe-attribute="$insertRandomCryptographyHere"

?

Solution

  • and noticed the actual nonce values itself were not showing up on the client browser (Brave)

    Check the Content-Security-Policy HTTP header, your nonce values are there.

    Is "nonce" just a standard phrase? If I so decided could I just set server-side scriptSrc: ["'self'", 'plackard=${res.locals.cspNonce}']

    nonce — «number that can only be used once». This name reserved by CSP spec and if you'll use any other names - browsers will ignore 'plackard-base64value' token abd scripts/styles will failed to execute.

    Lastly, the server-side settings tend to put single quotes around the 'nonce=something' or nonce-something. Why?

    There is not 'OR'. Single quoted 'nonce-base64value' is used only in the directives:
    script-src 'self' 'nonce-ABC' localhost http://example.com data:
    all keyword-expressions (tokens) are single quoted, all host-sources and scheme-sources - are not.

    nonce="ABC" is used in HTML-tags and it does not single quoted:

    <script nonce="ABC">
 var inline = 1;
</script>

    strongly in comply to HTML5 fieldname="value" paradigm.
    Pls note that in directive you use 'nonce-SomeValue' token and in HTML tags you use nonce="SomeValue" attribute.