rbonestell

Secure Your Vite SPA with a Strict Content Security Policy

If you run a modern Vite SPA without a strict Content Security Policy (CSP), you’re one XSS away from a full account takeover.
This guide walks you through hardening your Vite + React + TypeScript SPA with a strong CSP using Subresource Integrity (SRI) and per-request nonces, while avoiding common pitfalls that silently weaken security.

Why a Strong CSP Matters

A Content Security Policy is a powerful defense-in-depth control that mitigates XSS, data exfiltration, and injection attacks by explicitly allowing only trusted sources for scripts, styles, images, fonts, and network calls.

With the right CSP, you can:

rbonestell

#!/bin/bash

# SSL certificates should have a validity period of less than 398 days
#  * https://chromium.googlesource.com/chromium/src/+/master/net/docs/certificate_lifetimes.md
#  * https://support.apple.com/en-us/102028

# Create Private Key
openssl genrsa -out key.pem 2048

# Create Certificate Signing Request

rbonestell

/* eslint-disable @typescript-eslint/no-explicit-any */

export function redactSpecifiedProperties(target: any, fields: string[], redactedMessage = 'REDACTED'): any {
	// Return if target is not a redactable datatype or no redactable fields were provided
	if (!target || typeof target !== 'object' || fields?.length === 0) {
		return target;
	}
	// Iterate through all items in an array
	if (Array.isArray(target)) {
		return target.map(item => redactSpecifiedProperties(item, fields, redactedMessage));