# Styled Jsx Csp Nonce

> Configure styled-jsx to work with strict CSP using nonces (Next.js/custom Document patterns). Use when CSP blocks inline styles.

- Skill: `majiayu000/styled-jsx-csp-nonce` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/styled-jsx-csp-nonce`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/styled-jsx-csp-nonce/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/styled-jsx-csp-nonce

---


# styled-jsx CSP Nonce Skill

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

## What to do

1. Identify the framework (Next.js pages router, app router, custom SSR).
2. Confirm where the nonce is generated (server) and how it reaches HTML.
3. 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).