Page CSP can block Reader Mode stylesheet

[Seirdy]

Description

A site's content-security-policy can block the Reader Mode's inline CSS from loading if the CSP uses a hash.

Steps to Reproduce

1. Navigate to any page on https://seirdy.one/
2. Open the Console in DevTools
3. Activate Reader Mode

Actual result:

The CSS for Reader Mode is not applied; the page is completely unstyled. The console reports the following error:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'sha256-yeoa9pw7t4Un85jGWHQcNLZ8XpPN6AiUnk6+8tiGT44='". Either the 'unsafe-inline' keyword, a hash ('sha256-/zANq2Ot1HS0JMxZ4NpGDtN5wIJOxobb5Rqjx9AKsCU='), or a nonce ('nonce-...') is required to enable inline execution.

Expected result:

Expected Reader Mode to function normally and render styled, as it does in other desktop browsers (Firefox, Safari, Edge, Vivaldi, Chromium with DOM Distiller, etc).

Reproduces how often:

Easily + consistently reproducible.

Brave version (info found on brave://version)

1.44.31 Chromium: 104.0.5112.81 (Official Build) nightly (64-bit)

Version/Channel Information:

I have only attempted to reproduce this issue on the Nightly channel. I first noticed the issue a month ago and reproduced it just now, so it should have tricked down to other channels by now.

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? No.
• Does the issue resolve itself when disabling Brave Rewards? No.
• Is the issue reproducible on the latest version of Chrome? No.

Miscellaneous Information:

The full CSP that triggers this issue:

content-security-policy: default-src 'none';img-src 'self';style-src 'sha256-yeoa9pw7t4Un85jGWHQcNLZ8XpPN6AiUnk6+8tiGT44=';frame-ancestors 'none';base-uri 'none';form-action https://seirdy.one/webmentions/receive https://seirdy.one/search/;manifest-src 'self';webrtc 'block';upgrade-insecure-requests;sandbox allow-same-origin allow-forms

The exact hash is subject to change if/when I update my site's stylesheet.

[Seirdy]

Other functionality broken by page CSPs: #24577

This issue can also be reproduced on https://grapheneos.org/articles/grapheneos-servers. This isolates the offending CSP directive to a style-src which does not allow unsafe-inline.

[stephendonner]

Verified PASSED using

Brave | 1.64.81 Chromium: 122.0.6261.43 (Official Build) beta (x86_64)
-- | --
Revision | 19b9ce86d7aed2a1fdb7734d6a27f2fe6abd0153
OS | macOS Version 14.4 (Build 23E5205c)

Steps:

1. installed 1.64.81
2. launched Brave
3. loaded https://seirdy.one/ and clicked on an archive entry
4. clicked on Turn on Speedreader
5. did the same for https://grapheneos.org/articles/grapheneos-servers

Confirmed Speedreader ("Reader mode") activated and rendered fine

example	example

example	example