Chapter 69: Subresource Integrity (SRI) & Referrer Policy

Production SRI & Referrer Policy Auditing

**Part 14: Security & Best Practices** — Chapter 69: Subresource Integrity (SRI) & Referrer Policy

LEARNING OBJECTIVES ⌵
  • Conduct automated security audits verifying SRI integrity on all external CDN assets.
  • Audit outbound network requests to ensure Referer headers never leak confidential query parameters.
  • Integrate SRI hash generation into Webpack, Rollup, and Vite production builds.
  • Validate security headers using SecurityHeaders.com, Mozilla Observatory, and automated CI tests.
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

Automated SRI & Referrer Verification Checklist

Security Control Required Implementation Failure Mode If Missing
CDN Scripts Integrity <script src="..." integrity="sha384-..." crossorigin="anonymous"> Supply-chain compromise of CDN can inject malware.
CDN Stylesheets Integrity <link rel="stylesheet" href="..." integrity="sha384-..." crossorigin="anonymous"> CSS injection keylogger attack.
Referrer Policy Referrer-Policy: strict-origin-when-cross-origin PII and auth tokens leaked in query strings.
Sensitive Links <a href="..." rel="noopener noreferrer" referrerpolicy="no-referrer"> Reverse tabnabbing & referrer leakage.

📌 Key Takeaways

  • Always enforce Subresource Integrity (integrity="sha384-...") on all third-party CDN scripts and stylesheets.
  • Pair SRI with crossorigin="anonymous" or the browser will reject the integrity check.
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?