How Does Content Security Policy (CSP) Prevent XSS Attacks?

How Content Security Policy (CSP) Works

Confused by errors like "Refused to evaluate a string" and "Refused to execute inline script"? Let's delve into the workings of Content Security Policy (CSP), a crucial security measure that protects against XSS attacks.

Basic Concept

CSP restricts where resources can be loaded from, preventing browsers from fetching data from unauthorized sources. By defining the allowed sources, CSP reduces the risk of malicious code injection.

Adding CSP Directives

CSP is implemented using the Content-Security-Policy HTTP header, which contains directives that define allowed origins and policies. A simple example would be:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://example.com;">

Directives

The most common directives include:

• default-src: Default policy for all resources except scripts, images, and AJAX requests.
• script-src: Defines valid sources for scripts.
• style-src: Defines valid sources for stylesheets.
• img-src: Defines valid sources for images.
• connect-src: Defines valid targets for AJAX requests, WebSockets, and EventSource.

Multiple Sources and Directives

• Allow multiple sources by listing them as a space-separated list within the directive, e.g.: default-src 'self' https://example.com/js/.
• Use multiple directives by separating them with semicolons within the same tag, e.g.: content="default-src 'self'; script-src 'self'".

Handling Protocols and Ports

• Specify ports explicitly by appending them to the allowed domain, e.g.: default-src 'self' https://example.com:8080.
• Allow all ports by using an asterisk, e.g.: default-src 'self' https://example.com:*.
• To allow file protocol, use the filesystem parameter, e.g.: default-src 'self' filesystem:.

Inline Scripts and Styles

• By default, inline content is blocked. To allow it, use the 'unsafe-inline' parameter, e.g.: script-src 'unsafe-inline'.

Allowing 'eval()'

• Use the 'unsafe-eval' parameter to allow 'eval()' execution, e.g.: script-src 'unsafe-eval'.

'Self' Meaning

• 'Self' refers to resources with the same protocol, host, and port as the page where the policy is defined.

Addressing the 'default-src *' Vulnerability

While allowing all sources (default-src *) may seem convenient, it's insecure and doesn't actually allow inline content or evaluation. Avoid using it.

The above is the detailed content of How Does Content Security Policy (CSP) Prevent XSS Attacks?. For more information, please follow other related articles on the PHP Chinese website!