Security-First Design Systems & CSP Integration

Design systems are usually evaluated by visual aesthetics, component consistency, and developer ergonomics. However, in production applications, a design system is also a major security boundary.

Unsanitized HTML injection, unsafe inline styles, and unvetted third-party script tags are primary vectors for Cross-Site Scripting (XSS) attacks.

1. Zero dangerouslySetInnerHTML Sinks

Preventing XSS starts with prohibiting dangerous DOM mutation methods in UI components.

• Avoid raw HTML injection; prefer structured React components and sanitized text nodes.
• Enforce automated linter rules (no-restricted-syntax / AST checks) to flag innerHTML, outerHTML, or insertAdjacentHTML during CI checks.

2. Dynamic CSP Hash Injection

Modern web applications require strict Content Security Policies. Instead of allowing 'unsafe-inline' script execution, our build pipeline uses automated script hashing:

1. Post-build scripts scan pre-rendered HTML files for inline script blocks.
2. Cryptographic SHA-256 hashes are generated for each script block.
3. The hashes are appended to the Content-Security-Policy header in Cloudflare Pages deployment manifests.

Content-Security-Policy: default-src 'self'; script-src 'self' 'sha256-AbCdEf...'; object-src 'none'; frame-ancestors 'none';

3. Anti-Scraping & Legal Address Privacy

Per engineering standards (A5), sensitive company identifiers such as physical addresses are protected against automated web scraping bots:

• Address Privacy: Physical company addresses are constrained exclusively to official /terms and /privacy legal routes.
• Obfuscated Contact Endpoints: Public email links use client-side interaction triggers ("Show email") rather than plain-text mailto: links in DOM markup.

Summary

Combining strict design system rules with automated CI security checks ensures your application remains resilient against emerging web security threats.