Content Security Policy in Django - Step-by-Step Execution

Concept Flow - Content Security Policy

Browser sends request

↓

Django server processes request

↓

Django adds CSP header to response

↓

Browser receives response

↓

Browser checks CSP header

↓

Browser allows or blocks resources based on CSP

↓

Page renders with enforced security

The browser requests a page, Django adds a Content Security Policy header, and the browser enforces rules to allow or block resources.

Execution Sample

Django

from django.middleware.security import SecurityMiddleware

# Add CSP header in middleware
response['Content-Security-Policy'] = "default-src 'self'; script-src 'self' https://trusted.com"

This code adds a Content Security Policy header to responses to restrict resource loading.

Execution Table

Step	Action	CSP Header Value	Browser Behavior	Result
1	Browser sends request to Django server	N/A	N/A	Request received by server
2	Django processes request and prepares response	N/A	N/A	Response ready to send
3	Django adds CSP header to response	default-src 'self'; script-src 'self' https://trusted.com	N/A	Response includes CSP header
4	Browser receives response with CSP header	default-src 'self'; script-src 'self' https://trusted.com	Reads CSP rules	Prepares to enforce rules
5	Browser loads page resources	default-src 'self'; script-src 'self' https://trusted.com	Blocks scripts from untrusted sources	Only trusted scripts run
6	Page renders with enforced CSP	default-src 'self'; script-src 'self' https://trusted.com	Page secure from unauthorized scripts	Safe page display
7	If script from untrusted source requested	default-src 'self'; script-src 'self' https://trusted.com	Blocks script load	Script blocked, console error shown
8	End of request-response cycle	N/A	N/A	Cycle complete

💡 Request-response cycle ends after browser enforces CSP rules on loaded resources

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
response['Content-Security-Policy']	null	"default-src 'self'; script-src 'self' https://trusted.com"	"default-src 'self'; script-src 'self' https://trusted.com"	"default-src 'self'; script-src 'self' https://trusted.com"
browser_allowed_scripts	All sources	N/A	Only 'self' and https://trusted.com	Only 'self' and https://trusted.com

Key Moments - 3 Insights

Why does the browser block some scripts even though the server sent the page?

Because the CSP header tells the browser to only allow scripts from trusted sources, as shown in execution_table step 5 where scripts from untrusted sources are blocked.

Can the CSP header be changed after the response is sent?

No, the CSP header is part of the HTTP response headers sent by Django before the browser receives the page, as shown in execution_table step 3 and 4.

What happens if the CSP header is missing?

The browser does not enforce any content restrictions, so all scripts and resources load freely, unlike the controlled behavior shown in steps 5 and 6.

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What value is assigned to the CSP header?

A "script-src 'none'"

B "img-src *"

C "default-src 'self'; script-src 'self' https://trusted.com"

D No CSP header assigned

💡 Hint

Check the 'CSP Header Value' column at step 3 in the execution_table.

At which step does the browser start enforcing the CSP rules?

A Step 5

B Step 4

C Step 2

D Step 7

💡 Hint

Look at the 'Browser Behavior' column to see when scripts are blocked.

If the CSP header allowed scripts from any source, how would 'browser_allowed_scripts' change in variable_tracker?

A It would remain 'Only self and https://trusted.com'

B It would change to 'All sources'

C It would be empty

D It would cause an error

💡 Hint

Refer to the 'browser_allowed_scripts' row in variable_tracker and imagine no restrictions.

Concept Snapshot

Content Security Policy (CSP) is a security feature that tells browsers which sources are allowed to load content like scripts.
In Django, you add CSP headers to HTTP responses.
The browser reads these headers and blocks anything not allowed.
This helps prevent attacks like loading malicious scripts.
Always specify trusted sources clearly in your CSP header.
CSP headers are set before the response is sent to the browser.

Full Transcript

Content Security Policy (CSP) is a way to protect web pages by telling browsers which sources of content are safe. When a browser requests a page from a Django server, the server adds a CSP header to the response. This header lists trusted sources for scripts and other resources. When the browser receives the response, it reads the CSP header and blocks any scripts or resources not on the trusted list. This prevents harmful code from running on the page. The CSP header must be set before the response is sent. If the header is missing, the browser allows all content, which can be unsafe. Using CSP helps keep your web pages secure by controlling what content can load.