How to Design a Frontend Security Architecture

A Content Security Policy is an HTTP header that tells browsers which sources of content are permitted to load on the page. A strict CSP blocks inline scripts, eval usage, and loading scripts from unauthorized domains, which eliminates the vast majority of XSS attack vectors even when injection vulnerabilities exist. Start with a restrictive default-src self policy and selectively add permitted sources. Use nonces for necessary inline scripts rather than unsafe-inline. Implement the CSP as a header rather than a meta tag so it applies to the page itself.

Never render user-supplied HTML directly using dangerouslySetInnerHTML in React or innerHTML in vanilla JavaScript. If rich text rendering is required, sanitize the HTML through a library like DOMPurify before rendering it. DOMPurify strips all dangerous tags and attributes while preserving safe formatting. For plain text content, use React's default text rendering which escapes all HTML characters automatically. Review every single usage of dangerouslySetInnerHTML in the codebase as each one is a potential XSS injection point.

Cross-Site Request Forgery attacks trick authenticated users into unknowingly submitting requests to your application from an attacker's domain. Protect against CSRF by reading a random token from a cookie and including it as a custom request header in every state-changing API call. Since cross-origin requests cannot read cookies, the attacker cannot include the valid token. Configure your API client interceptor to automatically attach this header to all non-GET requests, and validate it on the server for every state-changing endpoint.

When loading JavaScript or CSS from a third-party CDN, an attacker who compromises the CDN can serve malicious code to all pages loading from it. Subresource Integrity prevents this by adding an integrity attribute containing a cryptographic hash of the expected file content to script and link tags. The browser verifies the downloaded file matches the hash before executing it. Any file that does not match the expected hash is rejected. Generate hashes at build time for all external resources and include them in the HTML.

Clickjacking attacks embed your application in a transparent iframe on an attacker's page and trick users into clicking invisible elements. Prevent embedding your application in iframes using the X-Frame-Options HTTP header set to SAMEORIGIN, which allows framing only from the same domain. Use the Content Security Policy frame-ancestors directive for more granular control. Verify that both headers are set on every page response at the infrastructure level, not just on certain routes, as any unprotected page is a potential attack vector.

Every npm package in your dependency tree is a potential supply chain attack vector. Run npm audit in the CI pipeline and fail the build on high severity vulnerabilities. Use Dependabot or Renovate to automate dependency update pull requests. Periodically audit your direct dependencies and remove any that are no longer needed. Lock dependency versions in package-lock.json or yarn.lock and commit the lock file to version control. Consider using a private npm registry that scans packages before allowing installation.

Cookies storing sensitive values like refresh tokens must be configured with the correct security attributes. Set HttpOnly to prevent JavaScript access, completely eliminating the risk of cookie theft through XSS. Set Secure to ensure transmission only over HTTPS. Set SameSite to Strict or Lax to prevent cookies from being sent with cross-origin requests, providing CSRF protection. Set an explicit domain and path to restrict the cookie's scope to only the parts of the application that require it.

Configure a baseline set of security headers on every HTTP response through the CDN or web server configuration rather than application code so headers cannot be missed on individual routes. The required headers are Content-Security-Policy, X-Frame-Options, X-Content-Type-Options set to nosniff to prevent MIME type sniffing, Referrer-Policy set to strict-origin-when-cross-origin, and Permissions-Policy to disable browser features the application does not use like camera and microphone. Test the configuration using securityheaders.com after each deployment.