CODEWITHSUNDEEP
htmlsecuritybootstrap-4content-security-policynonce
Samuel Johnson
Samuel Johnson

Reputation: 363

Content Security Policy nonce on style attribute being ignored

I am setting content security policy up, and a vendor library (bootstap) is setting styles inline to display a dialog and Edge/Chromium is saying that the change has been declined.

My CSP header (example split onto separate lines for ease of reading) is:

default-src 'none'; 
script-src 'self' 'nonce-OGrJRYbkub0OVcGnjoCFDw/OF+bamLQddwgBEfu9HjE='; 
style-src 'self' 'nonce-OGrJRYbkub0OVcGnjoCFDw/OF+bamLQddwgBEfu9HjE='; 
style-src-attr 'self' 'nonce-OGrJRYbkub0OVcGnjoCFDw/OF+bamLQddwgBEfu9HjE='; 
img-src 'self' https://www.gravatar.com;
font-src 'self' 'nonce-OGrJRYbkub0OVcGnjoCFDw/OF+bamLQddwgBEfu9HjE=';
connect-src 'self';
prefetch-src 'self';
form-action 'self';
manifest-src 'self';
upgrade-insecure-requests; block-all-mixed-content; report-to default;

As you can see, I have the style-src-attr set and my html is as follows:

<div id="large-right-modal" class="modal fade show" tabindex="1" role="dialog" aria-labelledby="large-right-modal-label" nonce="OGrJRYbkub0OVcGnjoCFDw/OF+bamLQddwgBEfu9HjE=" aria-modal="true">
</div>

When I display this bootstrap modal, the library adds the inline style style="display: block;" and the browser gives me the error:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-attr 'self' 'nonce-OGrJRYbkub0OVcGnjoCFDw/OF+bamLQddwgBEfu9HjE='". Either the 'unsafe-inline' keyword, a hash ('sha256-TH1YO7Owtg52rPfkQs+Us6yN6exn7w99CdIBBm9BmMQ='), or a nonce ('nonce-...') is required to enable inline execution.

This doesn't make much sense, the nonce is the same as that on the element being modified. The only thing that works is by adding unsafe-inline to the policy which I am trying to avoid.

Upvotes: 4

Views: 7087

Answers (1)

Halvor Sakshaug
Halvor Sakshaug

Reputation: 3455

Nonce can be used in nonceable elements. At least in CSP level 2 this would mostly be restricted to <script> and <style>. The problem is that you have the style in an attribute, try moving to a style block or css file.

Upvotes: 2

Related Questions