GitHub

Security & Performance

HTTPS Everywhere: The Performance Baseline

HTTPS (TLS) is not just a security requirement — it’s a performance prerequisite. HTTP/2 and HTTP/3 require HTTPS in all browsers. Brotli compression only works over HTTPS. Service workers, the Push API, and many modern web APIs require a secure context. And HTTPS is a Google ranking signal. If you’re still serving any pages over HTTP, the upgrade to HTTPS is the single most important infrastructure change you can make.

HSTS (HTTP Strict Transport Security) eliminates the HTTP→HTTPS redirect penalty. Without HSTS, a user typing example.com hits HTTP first, gets a 301 redirect to HTTPS, then starts the TLS handshake — adding 100–300ms. With HSTS, after the first visit the browser connects directly to HTTPS for the configured max-age duration:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

Submit your domain to the HSTS preload list (hstspreload.org) so browsers connect via HTTPS on the very first visit, eliminating even the initial redirect.

Resources:

Content Security Policy: Defense Against Script Injection

Content Security Policy (CSP) is both a security feature and a performance guardrail. A strict CSP prevents unauthorized scripts from executing — which means XSS attacks can’t inject performance-killing cryptocurrency miners, ad injectors, or tracking scripts into your pages. It also forces you to maintain a whitelist of approved script sources, providing natural oversight of third-party bloat.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://www.googletagmanager.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https://cdn.example.com;
  font-src 'self';
  connect-src 'self' https://api.example.com;

Start with Content-Security-Policy-Report-Only to log violations without blocking, then switch to enforcement once you’ve resolved all legitimate violations. Use the CSP Evaluator (csp-evaluator.withgoogle.com) to check your policy for weaknesses.

Subresource Integrity (SRI) adds a cryptographic hash to <script> and <link> tags, ensuring the browser only executes the exact file you expect. This prevents CDN compromises or supply-chain attacks from serving malicious code:

<script src="https://cdn.example.com/lib.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

Resources:

Permissions Policy: Controlling Feature Bloat

Permissions Policy (formerly Feature Policy) lets you control which browser features are available to your page and its iframes. This prevents third-party iframes from accessing the camera, microphone, geolocation, or other features without your explicit opt-in — and can disable performance-expensive features you don’t need:

Permissions-Policy: camera=(), microphone=(), geolocation=(), interest-cohort=()

Disabling unused features reduces the browser’s work and prevents embedded third-party content from performing unexpected computations or accessing sensitive APIs.

Resources:

Supply Chain Security: Protecting Your Dependencies

The npm ecosystem’s greatest strength (millions of packages) is also its greatest vulnerability. A single compromised dependency can inject malicious code into your production bundle. Notable incidents include the Polyfill.io supply-chain attack (2024), where the cdn.polyfill.io domain was acquired by a malicious actor and began injecting malware into sites that loaded polyfills from it — affecting over 100,000 websites.

Mitigation strategies: use a lockfile (package-lock.json / pnpm-lock.yaml) and verify it in CI. Run npm audit or pnpm audit in your pipeline. Use Socket.dev for deeper supply-chain analysis that detects suspicious package behavior (network access, filesystem writes, obfuscated code) beyond known CVEs. Pin exact dependency versions in production. Prefer packages with npm provenance (signed builds linked to source repository). Consider vendoring critical dependencies. And never load polyfills from third-party CDNs — self-host them or use Cloudflare’s alternative (cdnjs.cloudflare.com/polyfill).

Resources: