EN/CH Mode

BRUCE_FE Interview Notes - Content Security Policy

In-depth analysis of Content Security Policy (CSP) principles, configuration and best practices. Learn how to prevent XSS attacks and protect website security through CSP.

EN/CH Mode

Lazy to read articles? Then watch videos!

What is Content Security Policy (CSP)?

Content Security Policy (CSP) is like a website's security system that tells the browser which resources can be loaded and which cannot. It's mainly used to prevent XSS attacks (someone injecting malicious code into your website).

CSP operation principle:

  Website                        Browser
    |                           |
    |-- Set CSP rules ---------> |
    |                           |-- Check if resources comply with rules
    |<-- Only load compliant resources -- |
    |                           |
    |<-- Block non-compliant resources -- |

Simply put, you can tell the browser: 'Only execute code from my own website, reject other sources'.

<!-- Only allow resources from own website -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

💡 Main goals of CSP:

1. Prevent XSS attacks
2. Monitor and report security violations
3. Control resource loading sources
4. Improve overall website security

How does CSP work?

CSP is implemented through HTTP headers or HTML meta tags, telling the browser which resources can be loaded and executed. The browser then enforces these policies, preventing the loading of non-compliant resources.

Implementation via HTTP headers

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

Implementation via HTML meta tags

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

CSP Directives and Source Values

Common CSP Directives

Directive	Description
`default-src`	Default policy for all resources
`script-src`	JavaScript source whitelist
`style-src`	CSS style source whitelist
`img-src`	Image source whitelist
`connect-src`	Restrict sources that can be connected via XHR, WebSockets, etc.
`font-src`	Font source whitelist
`frame-src`	iframe source whitelist
`media-src`	Audio and video source whitelist
`object-src`	Flash and other plugin source whitelist
`report-uri`	URL for sending violation reports

Common Source Values

Source Value	Description
`'self'`	Only allow resources from the same origin
`'none'`	Don't allow any sources
`'unsafe-inline'`	Allow inline resources (such as inline <script> tags)
`'unsafe-eval'`	Allow use of eval() and similar functions
`https:`	Only allow HTTPS protocol resources
`example.com`	Allow resources from specific domains
`*.example.com`	Allow resources from specific domains and their subdomains
`*`	Allow any source (not recommended)

CSP Configuration Examples

Basic Security Configuration

// 只允許從當前域名加載所有資源
Content-Security-Policy: default-src 'self'

Mixed Content Configuration

// 配置多種資源類型
Content-Security-Policy: default-src 'self';
                         script-src 'self' https://cdn.jsdelivr.net;
                         style-src 'self' https://fonts.googleapis.com;
                         img-src 'self' https://images.unsplash.com;
                         font-src 'self' https://fonts.gstatic.com;
                         connect-src 'self' https://api.example.com;
                         frame-src https://www.youtube.com

Report Mode

// 僅報告違規，不阻止內容加載
Content-Security-Policy-Report-Only: default-src 'self';
                                    report-uri https://example.com/csp-reports

Strict Configuration (Suitable for High-Security Applications)

// 嚴格限制所有資源來源
Content-Security-Policy: default-src 'none';
                         script-src 'self';
                         style-src 'self';
                         img-src 'self';
                         font-src 'self';
                         connect-src 'self';
                         form-action 'self';
                         frame-ancestors 'none';
                         base-uri 'self';
                         block-all-mixed-content;
                         upgrade-insecure-requests

Handling Inline Scripts

CSP blocks inline scripts by default, but many applications rely on inline scripts.

Solution:

Use nonce attribute: Add randomly generated nonce values to each inline script

<!-- 使用nonce值 -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-2726c7f26c'">
<script nonce="2726c7f26c">
  alert('Hello, world!');
</script>

🔥 Common Interview Questions

(1) What is Content Security Policy (CSP)? What security problems does it solve?

Answer: Content Security Policy (CSP) is like a website's security guard that tells the browser which resources can be loaded and which must be rejected. Simply put, it restricts the sources of resources like JavaScript, CSS, and images.

CSP working principle:

Website sets rules → Browser enforces rules → Block non-compliant resources

// Two ways to set CSP
// 1. HTTP headers
Content-Security-Policy: default-src 'self'

// 2. HTML meta tags
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'">

CSP mainly solves four major security problems:

Security Problem	CSP Solution	Simple Example
XSS Attack	Prevent malicious script execution	script-src 'self'
Clickjacking	Control whether pages can be embedded in frames	frame-ancestors 'none'
Data Theft	Restrict connectable API sources	connect-src 'self' api.example.com

Even if a website has security vulnerabilities, CSP can serve as a last line of defense, limiting what attackers can do and significantly reducing security risks.