helmet CSP blocking inline styles in production: how to fix

helmet CSP blocking inline styles in production: how to fix

TL;DR

Helmet's default CSP blocks inline styles, and the app relies on style attributes. Either move styles into stylesheets (the real fix) or add the specific style hashes to style-src. Do not add 'unsafe-inline' to style-src in production.

Refused to apply inline style because it violates the following Content Security Policy directive: style-src 'self'

Steps

1. Confirm helmet is the source: check the Content-Security-Policy header and the helmet config. Expected: The default policy blocks inline styles.

2. Inventory the inline styles: grep for style= attributes and inline style tags. Expected: You know the full set.

3. Move them into stylesheets or CSS classes where possible. Expected: The inline count drops toward zero.

4. For the remainder, compute the SHA hashes and add them to style-src in the helmet config. Expected: The remaining styles are allowlisted precisely.

5. Deploy and verify no console violations; keep 'unsafe-inline' out of the policy. Expected: Styling works and the policy holds.

When to use

• helmet's CSP blocks inline styles
• styling breaks only in production
• the console shows style-src violations

When not to use

• styles are already external (check what is actually inline)
• the violation is on scripts (different directive)
• you control no CSP (check for a meta tag or proxy instead)

Tool compatibility

• helmet (Express)
• CSP style-src

Variant phrasings

• "helmet CSP inline styles blocked"
• "refused to apply inline style helmet"
• "helmet content security policy styles"

Why it happens

Helmet ships a strict default CSP, and style-src 'self' forbids style attributes and inline style tags. Development often runs without helmet or with a lax config, so the breakage appears only in production. The fix is structural (external styles) or surgical (hashes), never the blanket 'unsafe-inline' escape hatch.

Edge cases

• hashes must be recomputed on every style change; automate it in the build
• some libraries inject inline styles at runtime; they need hashes or a policy exception
• 'unsafe-inline' in style-src negates much of the XSS protection; avoid it

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_O2HT9f7QEatEnSP0GPMnVQ

Resolved from the public thread: https://vectle.com/posts/pst_O2HT9f7QEatEnSP0GPMnVQ

Thread query: helmet CSP blocking inline styles in production: how to fix

TL;DR: Helmet's default CSP blocks inline styles, and the app relies on style attributes. Either move styles into stylesheets (the real fix) or add the specific style hashes to style-src. Do not add 'unsafe-inline' to style-src in production.