What is a CSP nonce and why is it needed for styled-jsx?

A nonce is a one-time token in the CSP that authorizes inline styles. styled-jsx then uses a matching nonce on its style tags, allowing inline-like styles under a strict policy.

Which Next.js patterns are supported?

Pages Router with _document, App Router with server-driven rendering, and any custom SSR that can inject a server-generated nonce into HTML and CSP headers.

What are common pitfalls to avoid?

Mismatched nonces between HTML and CSP style-src, failing to propagate the nonce through all render paths, or forgetting to update style tags to include the nonce.

styled-jsx-csp-nonce

npx machina-cli add skill andireuter/skills-webapp/styled-jsx-csp-nonce --openclaw

Files (1)

SKILL.md

903 B

styled-jsx CSP Nonce Skill

Enable styled-jsx under strict Content-Security-Policy rules.

What to do

Identify the framework (Next.js pages router, app router, custom SSR).
Confirm where the nonce is generated (server) and how it reaches HTML.
Ensure:
- CSP header includes style-src with the same nonce
- styled-jsx style tags receive the nonce attribute

Output expectations

Provide the minimal code changes needed in the appropriate files.
Include notes on where the nonce originates and how it propagates.
Avoid insecure CSP suggestions (do not recommend unsafe-inline).

Source

git clone https://github.com/andireuter/skills-webapp/blob/main/skills/styled-jsx-csp-nonce/SKILL.mdView on GitHub

Overview

This skill explains how to run styled-jsx under a strict Content-Security-Policy by using server-generated nonces. It covers detecting the Next.js setup (pages router, app router, or a custom SSR), generating the nonce on the server, and ensuring the nonce is present in both the CSP header and the styled-jsx style tags. It emphasizes avoiding unsafe-inline and documenting the nonce flow.

How This Skill Works

A nonce is created on the server for each render and embedded into the HTML so that both the CSP header and the styled-jsx style tags reference the same token. In Next.js, wire this through a custom Document or server entry so that style tags receive a nonce attribute and the header's style-src includes the same nonce. This alignment prevents violations while still allowing styled-jsx to inject dynamic styles.

When to Use It

You have a strict CSP with no unsafe-inline and inline styles must be blocked
Using Next.js with pages router and a custom _document or SSR where nonce must be propagated
Using Next.js App Router or server components and need consistent nonce flow
You are migrating from unsafe-inline to nonce-based styling
You need to audit and fix CSP violations tied to styled-jsx-generated styles

Quick Start

Step 1: Generate a per-request nonce on the server and plan how it travels to the HTML and CSP header
Step 2: Add the nonce to the CSP header's style-src and ensure styled-jsx style tags receive the nonce attribute
Step 3: Update your Next.js Document or server renderer to inject and propagate the nonce to all styled-jsx outputs and HTML entry points

Best Practices

Generate the nonce on the server per request and reuse it in both HTML and CSP header
Propagate the nonce to all render paths: HTML, App Router pages, and custom Document
Keep CSP headers and nonce usage centralized to avoid mismatches
Test with browser devtools CSP reports and styled-jsx debug to verify nonce is applied
Avoid unsafe-inline entirely and never reuse nonces for unrelated assets

Example Use Cases

Next.js app router with a server-rendered page injecting a per-request nonce into CSP and styled-jsx
Custom _document implementation for Pages Router that adds nonce to style tags
Express SSR integrating helmet and a nonce provider for Next.js rendering
Migration path from unsafe-inline to nonce-based CSP for legacy styled-jsx usage
App Router with server components ensuring nonce is forwarded through SSR boundaries

Frequently Asked Questions

Add this skill to your agents