How does Content Security Policy (CSP) work with HTML5?

CSP enhances HTML5 security by defining trusted content sources to prevent XSS, clickjacking, and code injection. 1. It restricts inline scripts and styles by blocking them unless 'unsafe-inline', nonces, or hashes are used. 2. It controls external resources via directives like script-src, img-src, and style-src to allow only trusted origins. 3. It integrates with HTML5 features by governing Web Workers (worker-src), WebSocket connections (connect-src), iframe embedding (frame-ancestors), and media (media-src). 4. It enables violation reporting through report-uri or report-to to monitor and fix policy breaches. CSP is implemented via HTTP headers or meta tags and acts as a critical security layer that modern HTML5 applications must adopt to ensure only trusted code and assets are executed.

Content Security Policy (CSP) works with HTML5 by providing a security layer that helps prevent cross-site scripting (XSS), clickjacking, and other code injection attacks. It does this by allowing developers to define which sources of content are allowed to be loaded and executed within an HTML5 document.

CSP is implemented through HTTP headers (like Content-Security-Policy) or via a <meta> tag in the HTML5 document. When a browser loads a page, it reads the CSP and enforces the rules before loading any resources such as scripts, styles, images, or iframes.

Here’s how CSP integrates with key aspects of HTML5:

1. Inline Script and Style Restrictions

HTML5 allows inline scripts and styles (e.g., <script></script>, onclick="", <style></style>), but these are common vectors for XSS. CSP blocks them by default unless explicitly allowed.

For example, this inline script would be blocked if CSP doesn’t permit 'unsafe-inline':

<button onclick="alert('hacked')">Click me</button>

To allow inline scripts (not recommended), you'd use:

Content-Security-Policy: script-src 'unsafe-inline';

But a better approach is to use nonces or hashes:

<script nonce="2726c7f26c">
  alert('Allowed script');
</script>

With CSP:

Content-Security-Policy: script-src 'nonce-2726c7f26c';

2. External Resource Control

CSP lets you specify trusted sources for loading resources:

• Scripts (script-src)
• Styles (style-src)
• Images (img-src)
• Fonts (font-src)
• Frames (frame-src)
• And more

Example:

Content-Security-Policy: default-src 'self'; img-src *; script-src trusted.cdn.com

This means:

• Load all resources from the same origin by default
• Allow images from any domain
• Only allow scripts from trusted.cdn.com

3. Use with HTML5 APIs and Features

CSP also affects modern HTML5 features:

• Web Workers: Controlled via worker-src
• WebSocket connections: Governed by connect-src
• <iframe> embedding: Restricted by frame-ancestors to prevent clickjacking
• <video> and <audio>: Their sources are checked under media-src

For example, to prevent your site from being embedded in an iframe:

Content-Security-Policy: frame-ancestors 'none';

4. Reporting Violations

CSP supports a reporting mechanism using report-uri or report-to to collect policy violations:

Content-Security-Policy: default-src 'self'; report-uri /csp-report-endpoint

When a browser blocks a resource due to CSP, it sends a JSON report to the specified endpoint, helping developers detect and fix issues.

In summary, CSP enhances HTML5 security by giving fine-grained control over which resources the browser can load and execute. It works hand-in-hand with HTML5’s rich feature set to reduce the risk of malicious content execution, especially by discouraging unsafe practices like inline JavaScript.

It’s not part of the HTML5 spec per se, but it’s a critical companion standard that modern HTML5 applications should implement to stay secure.

Basically, CSP tells the browser: “Only run code and load assets from places I trust”—and the browser enforces that, even if attackers manage to inject HTML or script tags.

The above is the detailed content of How does Content Security Policy (CSP) work with HTML5?. For more information, please follow other related articles on the PHP Chinese website!