CSP Source Values & Keywords

Technical Deep Dive & Specifications

1. The Taxonomy of CSP Source Expressions

A CSP directive is composed of a directive name followed by a whitespace-delimited list of Source Expressions:

directive-name  source-expression-1  source-expression-2  ... ;

2. Deep Dive into CSP Keywords

'self'

Matches the exact origin of the current document: $$\text{Origin} = (\text{Scheme}, \text{Host}, \text{Port})$$ If your document is hosted at https://app.example.com:443:

• https://app.example.com/api/data matches 'self' (Same scheme, host, port).
• http://app.example.com/api/data does NOT match (Scheme mismatch: HTTP vs HTTPS).
• https://api.example.com/data does NOT match (Host mismatch: subdomain difference).
• https://app.example.com:8080/data does NOT match (Port mismatch).

'none'

Matches nothing. When placed in a directive (e.g., object-src 'none', default-src 'none'), it completely disallows that entire category of resources. It must be the only source expression in the directive.

'unsafe-inline'

Allows the execution of inline <script> tags, inline <style> tags, and inline event handlers (onclick="...", onload="...", style="...").

⚠️ CRITICAL VULNERABILITY: Adding 'unsafe-inline' to script-src neutralizes CSP's primary defense against XSS. If an attacker injects <script>stealData()</script>, the browser will execute it.

'unsafe-eval'

Allows the evaluation of string-to-code dynamic JavaScript APIs:

• eval("console.log(1)")
• window.Function("a", "b", "return a + b")
• setTimeout("alert(1)", 1000) (passing string instead of function)
• setInterval("doWork()", 1000)

'wasm-unsafe-eval' (CSP Level 3)

Allows compiling and instantiating WebAssembly modules (WebAssembly.compile(), WebAssembly.instantiate()) without opening the door to traditional JavaScript eval(). This is essential for high-performance apps (gaming, CAD, media editing) running WebAssembly.

'report-sample' (CSP Level 3)

Instructs the browser to include a truncated 40-character snippet of the violating code sample directly inside the JSON violation telemetry payload sent to the reporting server. This provides immediate debugging context during security incidents.

+-----------------------------------------------------------------------------------------------+
|                                  DANGEROUS SOURCE COMBINATIONS                                |
+-------------------------------+---------------------------------------------------------------+
| Source Expression             | Security Consequence                                          |
+-------------------------------+---------------------------------------------------------------+
| `script-src *`                | Complete bypass: Attacker loads scripts from anywhere.        |
| `script-src 'unsafe-inline'`  | Complete bypass: Injected inline `<script>` blocks execute.   |
| `script-src https:`           | Bypass: Attacker hosts script on any valid HTTPS endpoint.    |
| `script-src data:`            | Bypass: Attacker injects `<script src="data:text/javascript,...">` |
| `script-src *.googleapis.com` | Bypass: Google APIs host JSONP endpoints that can execute code.|
+-------------------------------+---------------------------------------------------------------+

💻 Interactive Code Playground

Starter Code

The following interactive playground demonstrates the difference between valid 'self' execution and the effects of 'unsafe-eval'. It demonstrates how the browser blocks string-to-code evaluation when 'unsafe-eval' is omitted.

Line-by-Line Code Breakdown

• Lines 8–13: The CSP meta tag specifies script-src 'self' 'unsafe-inline' 'report-sample'. Notice that 'unsafe-eval' is deliberately absent.
• Lines 73–76: The "Execute Safe Function" button runs standard compiled JavaScript (Math.sqrt(144)), which evaluates without hindrance.
• Lines 79–88: The "Execute eval" button invokes eval("2 + 2"). The V8/SpiderMonkey runtime queries the active CSP context, detects the absence of 'unsafe-eval', halts execution, and raises an EvalError:
  • EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive...
• Lines 91–100: The "Execute new Function" button attempts to compile code via new Function(...). This is also intercepted and blocked by the engine with an EvalError.

Expected Browser Render Output

• Clicking Execute Safe Function updates the log: ✅ Safe Execution Succeeded: Math.sqrt(144) = 12.
• Clicking Execute eval("2 + 2") immediately catches an exception and prints: 🛑 BLOCKED BY CSP! Error: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source....
• Clicking Execute new Function("return 42") yields the same EvalError.