Content Security Policy (CSP) in Cybersecurity - Step-by-Step Execution

Concept Flow - Content Security Policy (CSP)

Browser requests webpage

↓

Server sends HTML + CSP header

↓

Browser reads CSP header

↓

Browser loads resources

↓

Check each resource against CSP rules

↓

Load resource

↓

Render page securely

The browser receives a webpage with CSP rules, then checks each resource it loads against these rules, allowing or blocking them to keep the page safe.

Execution Sample

Cybersecurity

Content-Security-Policy: default-src 'self'; img-src https://images.example.com; script-src 'none';

This CSP header allows resources only from the same origin by default, images only from a specific domain, and blocks all scripts.

Analysis Table

Step	Resource Type	Resource URL	CSP Rule Checked	Allowed?	Action Taken
1	HTML Document	https://example.com/index.html	default-src 'self'	Yes	Load
2	Image	https://images.example.com/photo.jpg	img-src https://images.example.com	Yes	Load
3	Image	https://othersite.com/pic.png	img-src https://images.example.com	No	Blocked
4	Script	https://example.com/app.js	script-src 'none'	No	Blocked
5	CSS	https://example.com/styles.css	default-src 'self'	Yes	Load
6	Script	https://cdn.example.com/lib.js	script-src 'none'	No	Blocked
7	Image	https://example.com/logo.png	img-src https://images.example.com	No	Blocked
8	HTML Document	https://example.com/other.html	default-src 'self'	Yes	Load

💡 All resources checked; blocked those violating CSP rules to protect the page.

State Tracker

Resource URL	Allowed or Blocked
https://example.com/index.html	Allowed
https://images.example.com/photo.jpg	Allowed
https://othersite.com/pic.png	Blocked
https://example.com/app.js	Blocked
https://example.com/styles.css	Allowed
https://cdn.example.com/lib.js	Blocked
https://example.com/logo.png	Blocked
https://example.com/other.html	Allowed

Key Insights - 3 Insights

Why is the script from https://example.com/app.js blocked even though it is from the same origin?

Because the CSP rule 'script-src' is set to 'none', which blocks all scripts regardless of origin, as shown in execution_table rows 4 and 6.

Why are some images from example.com blocked while others from images.example.com are allowed?

The CSP rule for images only allows URLs from https://images.example.com, so images from example.com are blocked, as seen in rows 2 and 7.

What happens if a resource violates the CSP rules?

The resource is blocked from loading and may be reported, as shown in the 'Action Taken' column for blocked resources in the execution_table.

Visual Quiz - 3 Questions

Look at the execution table, is the CSS file from https://example.com/styles.css allowed or blocked?

A Allowed

B Blocked

C Partially allowed

D Not checked

💡 Hint

Check row 5 in the execution_table under 'Action Taken' for the CSS resource.

At which step does the browser block a script resource due to CSP?

A Step 2

B Step 4

C Step 5

D Step 8

💡 Hint

Look at the 'Resource Type' and 'Action Taken' columns in the execution_table for script blocking.

If the CSP changed to allow scripts from 'self', which resource would then be allowed?

A https://cdn.example.com/lib.js

B https://example.com/app.js

C https://othersite.com/pic.png

D https://images.example.com/photo.jpg

💡 Hint

Refer to the 'Resource URL' and 'Allowed or Blocked' in variable_tracker and consider the origin.

Concept Snapshot

Content Security Policy (CSP) is a security feature that tells browsers which resources can load on a webpage.
It uses rules like 'default-src', 'img-src', and 'script-src' to allow or block content.
If a resource violates these rules, the browser blocks it to prevent attacks.
CSP headers are sent by the server and enforced by the browser automatically.
Proper CSP helps protect users from malicious scripts and data injection.

Full Transcript

Content Security Policy (CSP) is a security measure used by websites to control which resources a browser can load. When a browser requests a webpage, the server sends the page along with CSP rules in the headers. The browser reads these rules and checks every resource it tries to load, such as images, scripts, and stylesheets. If a resource matches the allowed sources in the CSP, it loads normally. If not, the browser blocks it to keep the page safe from harmful content. For example, if the CSP says scripts are not allowed from any source, then even scripts from the same website will be blocked. This helps prevent attacks like cross-site scripting. CSP is a powerful tool to improve web security by limiting what content can run on a page.

Practice

1. What is the main purpose of Content Security Policy (CSP) on a website?

easy

A. To store user passwords securely

B. To speed up the website loading time

C. To change the website's layout and design

D. To control which content the website is allowed to load

Solution

1. Step 1: Understand CSP's role in security

   CSP is designed to restrict what content (like scripts, images) a website can load to prevent harmful content.

2. Step 2: Compare options with CSP purpose

   Only controlling content loading matches CSP's main goal; speeding up or design changes are unrelated.

3. Final Answer:

   To control which content the website is allowed to load -> Option D

4. Quick Check:

   CSP controls content loading = A [OK]

Hint: CSP controls content loading to block harmful scripts [OK]

Common Mistakes:

• Confusing CSP with website speed optimization
• Thinking CSP manages website design
• Assuming CSP stores user data

2. Which HTTP header is used to set a Content Security Policy?

easy

A. X-Content-Type-Options

B. Content-Security-Policy

C. Strict-Transport-Security

D. Cache-Control

Solution

1. Step 1: Identify CSP header name

   The official header to set CSP rules is named Content-Security-Policy.

2. Step 2: Eliminate unrelated headers

   X-Content-Type-Options controls MIME sniffing, Strict-Transport-Security enforces HTTPS, and Cache-Control manages caching, none set CSP.

3. Final Answer:

   Content-Security-Policy -> Option B

4. Quick Check:

   CSP header = Content-Security-Policy [OK]

Hint: CSP header is exactly 'Content-Security-Policy' [OK]

Common Mistakes:

• Confusing CSP header with security headers like HSTS
• Using Cache-Control as CSP header
• Mixing up header names with similar security headers

3. Given this CSP directive:
Content-Security-Policy: script-src 'self' https://trusted.com;
Which script source is allowed to run on the website?

medium

A. Scripts only from https://trusted.com

B. Scripts from any website

C. Only scripts from the website itself and https://trusted.com

D. No scripts are allowed

Solution

1. Step 1: Understand the directive meaning

   The directive script-src 'self' https://trusted.com; means scripts can load from the same origin ('self') and from https://trusted.com.

2. Step 2: Analyze options against directive

   Only scripts from the website itself and https://trusted.com correctly states scripts allowed from the website itself and trusted.com; others are incorrect or too broad.

3. Final Answer:

   Only scripts from the website itself and https://trusted.com -> Option C

4. Quick Check:

   script-src 'self' + trusted.com = A [OK]

Hint: 'self' means own site; listed URLs are allowed too [OK]

Common Mistakes:

• Assuming all external scripts are allowed
• Ignoring the 'self' keyword meaning
• Thinking no scripts are allowed due to strictness

4. A website sets this CSP header:
Content-Security-Policy: default-src 'none'; img-src https://images.com;
Why might images from the website itself not load?

medium

A. Because default-src 'none' blocks all sources except those explicitly allowed

B. Because img-src allows images from all sources

C. Because the header syntax is incorrect

D. Because images are blocked by browser settings

Solution

1. Step 1: Understand default-src 'none'

   The directive default-src 'none' blocks all content sources unless specifically allowed.

2. Step 2: Analyze img-src directive

   Only images from https://images.com are allowed; images from the website itself are not allowed because 'self' is not included.

3. Final Answer:

   Because default-src 'none' blocks all sources except those explicitly allowed -> Option A

4. Quick Check:

   default-src 'none' blocks all except allowed = D [OK]

Hint: default-src 'none' blocks all except listed sources [OK]

Common Mistakes:

• Assuming img-src allows all images by default
• Thinking header syntax is wrong without checking directives
• Blaming browser settings instead of CSP rules

5. You want to allow scripts only from your own site and block inline scripts to prevent XSS attacks. Which CSP directive correctly achieves this?

hard

A. Content-Security-Policy: script-src 'self';

B. Content-Security-Policy: script-src 'self' 'unsafe-inline';

C. Content-Security-Policy: script-src *;

D. Content-Security-Policy: default-src 'none'; script-src 'unsafe-inline';

Solution

1. Step 1: Understand blocking inline scripts

   To block inline scripts, do not include 'unsafe-inline' in the script-src directive.

2. Step 2: Analyze options for script sources

   Content-Security-Policy: script-src 'self'; allows scripts only from the website itself ('self') and blocks inline scripts by omission of 'unsafe-inline'. Content-Security-Policy: script-src 'self' 'unsafe-inline'; allows inline scripts, C allows all scripts, and D allows inline scripts but blocks others.

3. Final Answer:

   Content-Security-Policy: script-src 'self'; -> Option A

4. Quick Check:

   Allow 'self' only, no 'unsafe-inline' = B [OK]

Hint: Exclude 'unsafe-inline' to block inline scripts [OK]

Common Mistakes:

• Including 'unsafe-inline' which allows inline scripts
• Using wildcard * which allows all scripts
• Misunderstanding default-src vs script-src directives