[SOLVED] How to remove the final HTML validation error - csp-style-nonce

[John_Betong]

I’m stuck on this final error and convinced there must be a way to validate the page without having to completely remove the following statement:

CSS Snippet

<style {csp-style-nonce}>

 /* All other errors and warning successfully removed */

</style>

Validator.w3.org

Error: Attribute {csp-style-nonce} not allowed on element style at this point.

From line 11, column 3; to line 11, column 27

A SitePoint search has no results! I have also searched but was not successful in implementing any of the suggestions.

[rpkamp]

Do you literally have {csp-style-nonce} there? If you want to use a nonce it should be <style nonce="(some random value that also appears in the Content Security Policy HTTP response headers)">

[John_Betong]

@rpkamp

Do you literally have {csp-style-nonce} there?

Unfortunately yes

The web page is from a PHP Pre-Alpha Framework and I copied it verbatim.

I was confused with the curly brackets and incorrectly assumed they were part of the CSS and not a PHP variable enclosed in curly brackets.

I solved the problem by adding a Controller PHP hashed password which was passed to the View:

<?php 
  ...
?>
<style nonce="<?= $nonce ?>">

 /* All errors and warning successfully removed */

</style>

Many, many thanks for your valuable feedback.

[rpkamp]

It should not be a hashed password, it should be a random value that differs per request. If the value never changes there’s no point in using a nonce at all.

[John_Betong]

@rpkamp

If the value never changes there’s no point in using a nonce at all.

Further investigation agrees with your statement that in this particular case the use of nonce is not required and pointless.

I have never used nonce before and was more concerned about removing the CSS Validation error. As mentioned the web page was copied from a pre-alpha PHP Framework,

I also agree that the nonce value should be dynamic and be saved on the server with a timestamp.

It could possibly be used when submitting a form. The nonce value should be returned to the server and the nonce value checked against the previously saved nonce and timestamp. If the nonce matches and the timestamp is past a critical value then ask for the form to be resubmitted.

[rpkamp]

What you’re talking about is a CSRF token, which has nothing to do with a Content Security Policy nonce.

The whole idea behind a content security policy nonce is that you generate a single random string of about 30 characters or so per request and then a) send that nonce in Content Security Policy header to the client and b) include it in all your <style> tags. What this does is tell the browser to only load styles if and only if the value of the nonce attribute in the <style> matches that of the Content Security Policy header. If not, the style must not be loaded and disgarded.

This is useful to prevent XSS attacks because if the attacker is able to add a <style> tag to your website they will not be able to predict the nonce so the browser will refuse to load the injected style.

For CSS this is not all that big a deal, but for Javascript this is a huge advantage to hammer down on XSS.

[John_Betong]

@rpkamp

What you’re talking about is a CSRF token, which has nothing to do with a Content Security Policy nonce.

Many thanks for the detailed explanation.

It is indeed a complex subject and I have yet to implement apart from the example shown from the PHP Framework’s source. Searches reveal a tremendous amount of jargon that I have difficulty in understanding.

The sites I write are quite simple and prefer to use AmpProject JavaScript pages which hopefully are thoroughly tested against all security problems.