Content Security Policy in JavaScript: What It Is and How It Works

A Content Security Policy (CSP) is a security feature that helps prevent attacks like cross-site scripting (XSS) by controlling which resources a web page can load and execute. It works by letting developers specify trusted sources for scripts, styles, and other content using HTTP headers or HTML tags.

How It Works

Think of Content Security Policy as a security guard for your website. It watches what scripts, styles, images, or other resources your page tries to load and blocks anything that isn't on the trusted list you set. This helps stop harmful code from running, like when attackers try to inject malicious scripts.

Developers set CSP rules using special headers sent by the server or meta tags in HTML. These rules list allowed sources, like your own domain or trusted third-party services. When the browser loads the page, it checks these rules before running any code or loading resources, keeping your site safer.

Example

This example shows a simple CSP header that only allows scripts from the same origin and styles from trusted sources.

http

Content-Security-Policy: script-src 'self'; style-src 'self' https://fonts.googleapis.com;

Output

No output visible to users; browser enforces policy silently by blocking disallowed resources.

When to Use

Use Content Security Policy whenever you want to protect your website from attacks that inject harmful code, especially cross-site scripting (XSS). It is very useful for sites that accept user input or load third-party scripts.

For example, if your site uses ads, analytics, or fonts from other domains, CSP helps you control exactly which external sources are allowed. This reduces the risk that a compromised third-party script can harm your users.

Key Points

• CSP is a browser security feature that restricts resource loading.
• It helps prevent cross-site scripting (XSS) and data injection attacks.
• Policies are set via HTTP headers or HTML meta tags.
• Developers specify allowed sources for scripts, styles, images, and more.
• Proper CSP improves website security without changing your JavaScript code.

Key Takeaways

Content Security Policy controls which resources a webpage can load to prevent attacks.

Set CSP rules using HTTP headers or meta tags to specify trusted sources.

CSP is essential for protecting against cross-site scripting (XSS) vulnerabilities.

Use CSP when your site loads third-party scripts or accepts user input.

A well-configured CSP improves security without changing your JavaScript code.