{"id":715,"date":"2026-09-23T05:01:06","date_gmt":"2026-09-23T05:01:06","guid":{"rendered":"https:\/\/abrarqasim.com\/blog\/react-security-best-practices-csp-nonce-the-style-attribute-i-couldnt-lock-down\/"},"modified":"2026-09-23T05:01:06","modified_gmt":"2026-09-23T05:01:06","slug":"react-security-best-practices-csp-nonce-the-style-attribute-i-couldnt-lock-down","status":"publish","type":"post","link":"https:\/\/abrarqasim.com\/blog\/react-security-best-practices-csp-nonce-the-style-attribute-i-couldnt-lock-down\/","title":{"rendered":"React Security Best Practices: CSP Nonces and the Style I Couldn’t Lock Down"},"content":{"rendered":"

Confession: for about three years, every React app I shipped had a Content-Security-Policy header that I’d copied from a Stack Overflow answer, and the second directive in it was 'unsafe-inline'<\/code>. I knew that was the directive that switches off most of what CSP is for. I told myself I’d fix it after launch. Launch happened. I did not fix it.<\/p>\n

What finally made me do it was reading the pgAdmin 4 v9.18 release notes<\/a> last week. pgAdmin is a React and MUI app, like half of what I build, and the changelog describes exactly the migration I’d been avoiding: inline scripts now run under a per-request nonce instead of a blanket 'unsafe-inline'<\/code>, and 'unsafe-eval'<\/code> is gone. Then comes the line that made me laugh, because it’s the wall I’d hit every time I tried: style-src<\/code> still keeps 'unsafe-inline'<\/code>, “because MUI and React inject runtime styles and inline style attributes that cannot carry a nonce”.<\/p>\n

So the pgAdmin team, who have far more reason to care about this than I do, got scripts locked down and gave up on styles. That reframed the job for me. I’d been treating CSP as all-or-nothing and shipping nothing. It’s a two-part problem and one part is much easier than the other.<\/p>\n

What a nonce actually buys you<\/h2>\n

A quick recap so the rest makes sense. CSP is a response header that tells the browser which sources of script and style it’s allowed to run. The trouble with React apps is that the build output usually has at least one inline <script><\/code> in index.html<\/code>, and CSS-in-JS libraries inject <style><\/code> tags at runtime. The lazy way to allow those is 'unsafe-inline'<\/code>, which allows every inline script, including the one an attacker managed to inject through an unescaped field.<\/p>\n

A nonce is the alternative. Your server generates a random value per request, puts it in the header as 'nonce-abc123'<\/code>, and stamps the same value on every <script><\/code> tag it intends to run. Anything inline without that exact nonce is blocked. Injected script has no way to guess it, because it’s different on every response. That’s the whole trick, and it’s why the MDN CSP reference<\/a> is so insistent that the nonce be unpredictable and generated fresh per response.<\/p>\n

Here’s the header I’d been shipping. If yours looks like this, we were in the same club.<\/p>\n

Content-Security-Policy: default-src 'self';\n  script-src 'self' 'unsafe-inline' 'unsafe-eval';\n  style-src 'self' 'unsafe-inline';\n  img-src 'self' data:;\n<\/code><\/pre>\n
And here’s roughly where I’ve ended up, which I’ll build up piece by piece below.<\/p>\n
Content-Security-Policy: default-src 'self';\n  script-src 'self' 'nonce-${NONCE}';\n  style-src-elem 'self' 'nonce-${NONCE}';\n  style-src-attr 'unsafe-inline';\n  img-src 'self' data:;\n  object-src 'none';\n  base-uri 'self';\n<\/code><\/pre>\n
The interesting line is the style-src-attr<\/code> one. I’ll get to why it’s still there, because it took me an embarrassing amount of time to understand.<\/p>\n
Scripts: the part that’s easy once you find the Vite option<\/h2>\n
The reason I kept giving up in the past is that I assumed I’d need to write a plugin to thread a nonce through the build. I didn’t. Vite has a config option for it, html.cspNonce<\/code><\/a>, and when it’s set Vite adds a nonce<\/code> attribute to every <script><\/code>, <style><\/code> and stylesheet <link><\/code> it emits, plus a <meta property=\"csp-nonce\"><\/code> tag it uses internally for anything it injects later.<\/p>\n
\/\/ vite.config.ts\nimport { defineConfig } from "vite";\nimport react from "@vitejs\/plugin-react";\n\nexport default defineConfig({\n  plugins: [react()],\n  html: {\n    cspNonce: "__CSP_NONCE__",\n  },\n});\n<\/code><\/pre>\n
The value is a placeholder, not a real nonce. The build is static, so it can’t know the per-request value. Your server has to replace the placeholder on every response. This is the step the Vite docs put a warning box around, and rightly: if you ship the placeholder as the real nonce, it’s a constant, an attacker can read it out of the page, and you’ve built an elaborate 'unsafe-inline'<\/code>.<\/p>\n
I do the replacement in the reverse proxy. Caddy makes it short.<\/p>\n
example.com {\n  root * \/srv\/app\/dist\n  file_server\n\n  @html path \/ \/index.html\n  handle @html {\n    header Content-Security-Policy "default-src 'self'; script-src 'self' 'nonce-{http.request.uuid}'; style-src-elem 'self' 'nonce-{http.request.uuid}'; style-src-attr 'unsafe-inline'; img-src 'self' data:; object-src 'none'; base-uri 'self'"\n    templates\n  }\n}\n<\/code><\/pre>\n
That’s a sketch, not a drop-in. Caddy’s templates<\/code> directive can do string replacement on the HTML body, and {http.request.uuid}<\/code> gives you a per-request random value. In practice I ended up with a tiny Go handler in front of the static files because I wanted the nonce generated with crypto\/rand<\/code> and the substitution done in one place I could unit test. Either way the shape is the same: one random value, written into the header and into the HTML, on every request.<\/p>\n
If you’ve read my post on what this blog actually runs on<\/a> you’ll know I run Caddy on this box, and the nonce handling is one of the reasons I haven’t gone back. Doing the same in Nginx means sub_filter<\/code> plus a $request_id<\/code> variable, which works but reads like a ransom note.<\/p>\n
Dropping 'unsafe-eval'<\/code> was free. Nothing in my production bundles needed it. pgAdmin’s notes mention they re-add it automatically for development bundles when DEBUG<\/code> is set, and I copied that idea: my dev server config has a looser header and the production one doesn’t. The mistake I’d been making was using one header for both and letting dev requirements leak into prod.<\/p>\n
Styles: where I learned what style-src-attr means<\/h2>\n
This is the part where I got stuck, and where pgAdmin’s changelog was more honest than most of the tutorials I’d read.<\/p>\n
MUI uses Emotion to inject <style><\/code> elements at runtime. Those can carry a nonce. Emotion’s cache accepts one, and MUI’s CSP guide<\/a> shows the setup. You read the nonce from the meta tag Vite emitted and hand it to the cache.<\/p>\n
\/\/ main.tsx\nimport createCache from "@emotion\/cache";\nimport { CacheProvider } from "@emotion\/react";\n\nconst nonce =\n  document.querySelector<HTMLMetaElement>('meta[property="csp-nonce"]')\n    ?.nonce ?? "";\n\nconst cache = createCache({ key: "mui", nonce });\n\ncreateRoot(document.getElementById("root")!).render(\n  <CacheProvider value={cache}>\n    <App \/>\n  <\/CacheProvider>\n);\n<\/code><\/pre>\n
I did that, reloaded, and the console still filled with CSP violations. Every one of them was a style<\/code> attribute, not a <style><\/code> element. That’s the distinction I hadn’t understood. CSP level 3 splits style-src<\/code> into style-src-elem<\/code> (for <style><\/code> tags and stylesheet links) and style-src-attr<\/code><\/a> (for style=\"...\"<\/code> attributes on elements). A nonce can only be attached to an element. There is no place to put one on an attribute. So any component that renders style={{ width: 240 }}<\/code>, which is a lot of MUI internals and a lot of my own code, produces an inline style attribute that no nonce can ever authorise.<\/p>\n
MUI’s guide says this outright: style-src-elem<\/code> takes the nonce, style-src-attr<\/code> needs 'unsafe-inline'<\/code> because some components set inline styles for dynamic values like dimensions and positioning. pgAdmin’s changelog says the same thing in fewer words. I’d spent two evenings trying to make a nonce do something the spec doesn’t allow.<\/p>\n
The honest options for attributes are 'unsafe-inline'<\/code> scoped to style-src-attr<\/code> only, or 'unsafe-hashes'<\/code> with a hash of every inline style value your app can produce, which is not realistic when the values are computed at runtime. I took the first option. It’s a much smaller hole than the one I started with: an attacker who can inject markup can set inline styles, which enables some ugly UI-redressing tricks, but they cannot run script, which is the thing I actually lie awake about.<\/p>\n
The violations I found that weren’t mine<\/h2>\n
Once the header was strict, the browser started reporting things I’d never have found by reading my own code. Two stood out.<\/p>\n
A third-party analytics snippet I’d pasted into index.html<\/code> a year ago was an inline script with no nonce. Blocked. I moved it to an external file served from my own origin with a nonce on the tag, and while I was in there I noticed it was loading a second script from a domain I’d never heard of. That got removed rather than nonced.<\/p>\n
A small chart component was using new Function()<\/code> to evaluate a formatter string from its props. That’s an eval<\/code> in a trench coat and it had been sitting in the bundle for months. Dropping 'unsafe-eval'<\/code> surfaced it immediately. I rewrote it as a plain function map, which is what it should have been.<\/p>\n
Neither of these was an actual exploit. But both were exactly the class of thing a strict policy is meant to catch, and the only reason I found them is that the policy stopped being decorative. I’ve done security audits on Laravel apps<\/a> where the CSP was the first thing I checked, and I’d been quietly failing my own checklist on the React side.<\/p>\n
Rolling it out without breaking production<\/h2>\n
I did not flip the strict header on for everyone at once. Content-Security-Policy-Report-Only<\/code> exists for exactly this. It evaluates the policy, reports violations to an endpoint you nominate, and blocks nothing. I ran it for a week with a report-to<\/code> pointing at a tiny endpoint that appends to a log file, then read the log.<\/p>\n
The log was noisy for two days, mostly from browser extensions injecting their own scripts, which show up as violations you can’t do anything about. After filtering those out, the real list was the two items above plus a handful of inline event handlers in old code. Then I switched the header from report-only to enforcing, kept the report endpoint, and moved on.<\/p>\n
I’m still not certain I’ve got img-src<\/code> right. I allow data:<\/code> because Vite inlines small assets as data URIs by default, and the Vite docs suggest either allowing it or setting build.assetsInlineLimit<\/code> to zero. I went with allowing it. I might change my mind.<\/p>\n
What to do this week<\/h2>\n
Add Content-Security-Policy-Report-Only<\/code> to one React app you run, with script-src 'self' 'nonce-...'<\/code> and no 'unsafe-inline'<\/code> in it, point report-to<\/code> at any endpoint that writes to a file, and leave it for a few days. Don’t fix anything yet. Just read the report. Mine had two things in it that I’d been shipping for a year without knowing, and finding them cost nothing but the time to read a log. I do this kind of hardening on client apps through my consulting work<\/a>, and the report-only week is always where the interesting findings come from.<\/p>\n","protected":false},"excerpt":{"rendered":"
pgAdmin 9.18 moved inline scripts to a per-request nonce but kept ‘unsafe-inline’ for styles. Here’s why, and how I did the same on a Vite and MUI app.<\/p>\n","protected":false},"author":2,"featured_media":714,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"pgAdmin 9.18 moved inline scripts to a per-request nonce but kept 'unsafe-inline' for styles. Here's why, and how I did the same on a Vite and MUI app.","rank_math_focus_keyword":"react security best practices","rank_math_canonical_url":"","rank_math_robots":"","footnotes":""},"categories":[354,151],"tags":[799,800,801,798,802,200],"class_list":["post-715","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-security","tag-content-security-policy","tag-csp-nonce","tag-mui","tag-react-security","tag-unsafe-inline","tag-vite"],"_links":{"self":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/comments?post=715"}],"version-history":[{"count":0,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/715\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media\/714"}],"wp:attachment":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media?parent=715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/categories?post=715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/tags?post=715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}