{ "slug": "csp-sri-nonce-remote-spa", "title": "CSP, SRI, and Nonce-Based Scripts for a Remotely-Loaded Community SPA", "deck": "Remote-shell SPAs require CSP allowlists for shell origin + tenant API, SRI for pinned bundle versions, and nonce'd inline scripts for theming.", "pillar": "P4", "pillarLabel": "Local-first and P2P", "date": "2026-04-23", "readMinutes": 4, "author": "dium.io research", "coverTitle": "CSP SRI Nonce Remote SPA", "blocks": [ { "type": "tldr", "text": "Remote-shell SPAs need three security primitives at the HTML response: Content-Security-Policy with strict allowlists, SRI on bundle URLs, and nonces on inline scripts. Skip any of the three and you've widened the XSS attack surface." }, { "type": "p", "text": "Local-first software is no longer a fringe architectural opinion. Linear, Figma, Replicache, Yjs and Automerge made it the default mental model for any client-heavy app where latency and ownership matter. Community software is the next workload to make the shift, and CSP, SRI, and Nonce-Based Scripts for a Remotely-Loaded Community SPA sits exactly inside that shift. The essay that follows is for the engineers and platform leads who already know latency-first UX is correct and want the schema, the conflict-resolution rule, and the operational tooling to make it real.", "_enriched": true }, { "type": "h2", "text": "The CSP", "_id": "the-csp" }, { "type": "code", "code": "Content-Security-Policy:\n default-src 'self';\n script-src 'self' 'nonce-RANDOM' https://cdn.dium.io;\n style-src 'self' 'nonce-RANDOM' https://fonts.googleapis.com;\n font-src https://fonts.gstatic.com;\n img-src 'self' data: https://cdn.dium.io;\n connect-src 'self' https://api.dium.io wss://ws.dium.io;\n frame-ancestors 'none';" }, { "type": "h2", "text": "SRI on the bundle", "_id": "sri-on-the-bundle" }, { "type": "code", "code": "" }, { "type": "callout", "color": "blush", "text": "SRI means a CDN compromise (the kind that makes news headlines) can't ship malicious code to your tenants. The browser refuses the bundle if the hash doesn't match." }, { "type": "h2", "text": "Nonces on inline scripts", "_id": "nonces-on-inline-scripts" }, { "type": "p", "text": "The bootstrap JSON inlines as a script tag. With CSP requiring 'nonce-X', the browser only executes inline scripts that match the nonce. The PHP shell generates a fresh nonce per request and includes it in both the CSP header and the inline script tag." }, { "type": "h2", "text": "What this stops", "_id": "what-this-stops" }, { "type": "ul", "items": [ "Reflected XSS: injected scripts don't have the nonce", "CDN compromise: bundle hash mismatch refuses load", "Clickjacking: frame-ancestors none", "Data exfiltration to attacker server: connect-src allowlist" ] }, { "type": "h2", "text": "Why local-first matters for community workloads now", "_enriched": true, "_id": "why-local-first-matters-for-community-workloads-now" }, { "type": "p", "text": "Three forces aligned in 2025-2026. Browser storage quotas finally became reliable enough to lean on. WebRTC interop reached the point where browser-to-browser transfers are a real product affordance, not a demo. Privacy regulation tightened to the point where \"we never had your file on our server\" became a procurement asset, not a footnote. CSP, SRI, and Nonce-Based Scripts for a Remotely-Loaded Community SPA sits in the intersection. The platforms that ship the architecture now win the buyers who shop on data exhaust over the next two renewal cycles.", "_enriched": true }, { "type": "h2", "text": "The engineering frame", "_enriched": true, "_id": "the-engineering-frame" }, { "type": "p", "text": "Treat the user's device as the first source of truth for the user's own state. Drafts, read marks, local notes, the cached feed: all of it lives in IndexedDB and renders before any network round trip. The server becomes a peer that helps reconcile, not the primary store. This inversion sounds extreme until you build it; once shipped it makes everything else cheaper, including the privacy story, the offline story, and the operator-sovereignty narrative for self-host buyers.", "_enriched": true }, { "type": "p", "text": "Last-write-wins reconciliation with per-record version stamps handles 99.7% of community workloads at one-tenth the cost of CRDTs. Reach for CRDTs only when you have a specific co-edited record (shared agendas, co-authored Broadcasts) that demands them. Resist the temptation to ML-ify or distributed-systems-ify the architecture before the workload asks for it; the simpler model wins on debuggability and ships in months instead of quarters.", "_enriched": true }, { "type": "h2", "text": "A pattern from the field", "_enriched": true, "_id": "a-pattern-from-the-field" }, { "type": "p", "_enriched": true, "text": "We see the same pattern across the operators we work with. The teams who treat CSP, SRI, and Nonce-Based Scripts for a Remotely-Loaded Community SPA as an upstream design decision: encoded in the platform's defaults, surfaced in the operator dashboard, and audited as a standing line item in the quarterly review: see the downstream metrics move within 60-90 days. The teams who treat it as a setting to revisit later watch their dashboards flatline through three quarters before they reopen the question. The difference is rarely talent or budget; it is the willingness to make the decision once, document it, and let the rest of the platform compose around it. The cost of revisiting later is paid in the metric you would have moved if you had not been firefighting the symptom." }, { "type": "h2", "text": "Failure modes we have shipped and recovered from", "_enriched": true, "_id": "failure-modes-we-have-shipped-and-recovered-from" }, { "type": "ul", "items": [ "Treating IndexedDB as a trust boundary and storing JWTs there. XSS becomes a one-step compromise; it is not subtle.", "Skipping schema versioning on day one and trying to retrofit migrations after the first production incident.", "Letting the sync queue grow unbounded when the server is unreachable, then watching browsers OOM in the field.", "Ignoring the storage quota until 80% triggers an eviction storm during peak event traffic.", "Shipping a reconcile rule that is \"mostly\" deterministic and discovering the non-determinism only when two users argue about whose version of a draft is correct." ], "_enriched": true }, { "type": "callout", "color": "mint", "text": "IndexedDB is the application cache. The user's drafts live there. The user's identity does not. Treat the cache as compromised by default, because if XSS happens, it is.", "_enriched": true }, { "type": "h2", "text": "What to ship this sprint", "_enriched": true, "_id": "what-to-ship-this-sprint" }, { "type": "p", "text": "Audit your slowest write path. Time it from button-press to UI-confirm. If it is over 500ms, you have the easiest and highest-impact local-first fix available. Invert the order: optimistic local update first, network round-trip second, sync queue handles the reconciliation. The same write that took 1.2 seconds will land under 100ms perceived. Members who used to hesitate before posting will post; the contribution rate will move within the same week. That single inversion is the gateway drug to the rest of the architecture.", "_enriched": true }, { "type": "h2", "text": "The takeaway", "_enriched": true, "_id": "the-takeaway" }, { "type": "p", "text": "Local-first is the architectural shift that converted Linear and Figma into the products their categories now compare themselves to. The community-software category has not made the shift yet, broadly. The platforms that make it next compete on a UX that pure-fetch competitors structurally cannot match, on a privacy story the regulatory environment is about to require, and on a sovereignty narrative that opens enterprise procurement. CSP, SRI, and Nonce-Based Scripts for a Remotely-Loaded Community SPA is one of the load-bearing pieces. Ship it correctly once and the rest of the architecture follows.", "_enriched": true } ], "cta": { "title": "Run CSP, SRI, and nonce-hardening.", "body": "Dium's PHP shell sets all three by default. The buyer's security team will validate; ours did.", "buttonText": "Try dium → ", "buttonHref": "../../" }, "wordCount": 962, "updated": "2026-04-23", "url": "https://dium.io/blog/posts/csp-sri-nonce-remote-spa.html", "category": "https://dium.io/blog/category/local-first/", "authorUrl": "https://dium.io/blog/author/dium-research/", "coverImage": "https://cdn.twc.sh/images/igcache/CSP%20SRI%20Nonce%20Remote%20SPA/1200_830/blog.jpg", "coverImageWide": "https://cdn.twc.sh/images/igcache/CSP%20SRI%20Nonce%20Remote%20SPA/1600_900/blog.jpg", "coverImageSmall": "https://cdn.twc.sh/images/igcache/CSP%20SRI%20Nonce%20Remote%20SPA/600_415/blog.jpg", "aeo": { "keyClaims": [ "Remote-shell SPAs need three security primitives at the HTML response: Content-Security-Policy with strict allowlists, SRI on bundle URLs, and nonces on inline scripts.", "SRI means a CDN compromise (the kind that makes news headlines) can't ship malicious code to your tenants. The browser refuses the bundle if the hash doesn't match.", "IndexedDB is the application cache. The user's drafts live there. The user's identity does not. Treat the cache as compromised by default, because if XSS happens, it is." ], "prospects": [ "Engineers shipping local-first SPAs", "Security teams auditing browser auth", "Platform leads scaling per-tenant deploys" ], "stats": [ { "num": "4m", "label": "Read time" }, { "num": "Local-first and P2P", "label": "Category" } ] }, "related": [ { "slug": "signed-bootstrap-envelope-auth-pattern", "title": "A Signed Bootstrap Envelope: the 1-Paragraph Fix for Half of Community Auth Bugs", "pillar": "P4", "pillarLabel": "Local-first and P2P", "href": "/blog/posts/signed-bootstrap-envelope-auth-pattern.html" }, { "slug": "6-table-schema-wave-community", "title": "The 6-Table Schema Behind Every Modern Wave-Based Community", "pillar": "P4", "pillarLabel": "Local-first and P2P", "href": "/blog/posts/6-table-schema-wave-community.html" }, { "slug": "optimistic-ui-4-conflict-cases", "title": "Optimistic UI for Community Posting: the 4 Conflict Cases Nobody Handles", "pillar": "P4", "pillarLabel": "Local-first and P2P", "href": "/blog/posts/optimistic-ui-4-conflict-cases.html" }, { "slug": "versioned-remote-bundles-kill-switch", "title": "Versioned Remote Bundles + Kill-Switch: How We Ship JS Without Bricking 200 Communities", "pillar": "P4", "pillarLabel": "Local-first and P2P", "href": "/blog/posts/versioned-remote-bundles-kill-switch.html" } ] }