Web Security Headers & CSP Guide
Web security protects your users and website from common attacks. Browser security headers tell web browsers what scripts, styles, and connections are allowed to run.
1. Content Security Policy (CSP)
CSP headers control where resources can be loaded from: - `default-src 'self'`: Only allows loading assets from your own domain. - `script-src 'self' https://trusted.com`: Prevents untrusted scripts from running. - `frame-ancestors 'none'`: Protects your site from clickjacking attacks.
2. Subresource Integrity (SRI)
SRI lets browsers check that scripts loaded from CDNs have not been modified. You include a cryptographic hash in your script tag: ```html <script src="https://cdn.example.com/lib.js" integrity="sha384-..." crossorigin="anonymous"></script> ``` If the file changes, the browser will block it immediately.
3. Essential Security Headers
Key headers for every website: - **Strict-Transport-Security (HSTS):** Enforces HTTPS connections. - **X-Content-Type-Options: nosniff:** Blocks MIME-type sniffing bugs. - **Referrer-Policy:** Controls what URL details are shared with external links.
Engineering Best Practices & Guidelines
Test CSP rules in Report-Only mode before enforcing them.
Always generate SRI hashes for third-party CDN scripts.
Check your security headers using our free HTTP Header Analyzer.
Frequently Asked Questions
Q1. What happens if an SRI hash does not match?
The browser will refuse to run the script or load the style sheet, keeping your site safe from tampered files.