How does Content Security Policy (CSP) protect against cross-site scripting attacks (XSS)?

How Content Security Policy (CSP) Functions

In response to the abundance of CSP-related errors you've encountered, this article aims to elucidate the workings of Content Security Policy and provide practical guidance on utilizing it effectively.

What is CSP?

Content Security Policy (CSP) serves as a browser-side security feature designed to mitigate the risk of cross-site scripting attacks (XSS). This policy enables you to define authorized sources for loading resources such as scripts, stylesheets, and images, thereby preventing browsers from retrieving data from unauthorized locations.

Utilizing the Content-Security-Policy HTTP Header

To implement CSP on your website, you can leverage the Content-Security-Policy HTTP header, which contains a meta-tag that configures the policy's parameters. This meta-tag includes the content property, which defines the policy's directives and source authorization rules.

Addressing Your Queries

Let's delve into the questions you raised:

1. Multiple Sources:

To allow resources from multiple sources, simply list them as space-separated values after the directive:

content="default-src 'self' https://example.com/js/"

2. Diverse Directives:

Common directives include:

• default-src: Default policy for loading various resources
• script-src: Valid sources for JavaScript files
• style-src: Valid sources for CSS files
• img-src: Valid sources for images

3. Multiple Directives:

Combine directives within a single meta-tag by using semicolons as separators:

content="default-src 'self' https://example.com/js/; style-src 'self'"

4. Port Handling:

Explicitly authorize ports other than the default by adding the port number or an asterisk:

content="default-src 'self' https://ajax.googleapis.com http://example.com:123/free/stuff/"

5. Protocol Handling:

Allow non-default protocols explicitly:

content="default-src 'self'; connect-src ws:; style-src 'self'"

6. file:// Protocol:

Allow the file:// protocol using the filesystem parameter:

content="default-src filesystem"

7. Inline Styles and Scripts:

To enable inline styles, scripts, and tags, use the 'unsafe-inline' parameter:

content="script-src 'unsafe-inline'; style-src 'unsafe-inline'"

8. eval() Invocation:

Allow eval() by utilizing the 'unsafe-eval' parameter:

content="script-src 'unsafe-eval'"

9. 'self' Interpretation:

'self' denotes resources sharing the same protocol, host, and port as the file where the content policy is defined:

content="default-src https://example.com"

Please note that 'self' does not allow insecure protocols like http or local files.

Additional Tips:

• Avoid using content="default-src *" as it permits inlining and evals, creating security vulnerabilities.
• It's advisable to specify both secure (https) and insecure (http) sources for backward compatibility.
• Use Content-Security-Policy-Report-Only to test CSP implementation without enforcing it initially.
• Monitor browser error logs to detect policy violations.

The above is the detailed content of How does Content Security Policy (CSP) protect against cross-site scripting attacks (XSS)?. For more information, please follow other related articles on the PHP Chinese website!