Flask Tutorials: Content Security Policy (CSP)

Welcome back to CodeYourCraft! Today, we're diving into a crucial aspect of web development security: Content Security Policy (CSP).

🎯 What is Content Security Policy (CSP)?

CSP is a security feature that helps protect websites from certain types of attacks, such as Cross-Site Scripting (XSS) and data injection attacks. It does this by specifying a set of rules that dictate which resources (scripts, styles, images, etc.) are allowed to load on your website.

📝 Note:

Why is CSP important?

Prevents XSS attacks: By specifying valid sources for scripts and styles, CSP can prevent an attacker from injecting malicious scripts into your site.
Protects against data injection attacks: CSP can help prevent an attacker from injecting malicious data into your site, such as modifying form submissions or injecting malicious HTML.

💡 Pro Tip:

CSP is not a silver bullet and should be used in combination with other security measures.

🎯 How does CSP work?

CSP is implemented by adding a special Content-Security-Policy header to your website's HTTP responses. This header contains a list of rules that dictate which resources are allowed to load on your site.

Here's a simple example:

python

@app.after_request
def add_csp_headers(response):
    response.headers['Content-Security-Policy'] = "default-src 'self'; script-src 'self' https://trustedscript.com;"
    return response

In this example, the default-src 'self' rule means that all resources (scripts, styles, images, etc.) must come from the same origin as the current page. The script-src 'self' https://trustedscript.com rule allows scripts to load from the current page and the trusted script at https://trustedscript.com.

🎯 Practical CSP Example

Let's say you have a Flask application with a script at static/js/myscript.js. You want to allow this script to load on your site but block all other scripts.

python

@app.after_request
def add_csp_headers(response):
    response.headers['Content-Security-Policy'] = "default-src 'self'; script-src 'self' 'nonce-myscript';"
    return response

In this example, we've added a nonce-myscript directive, which is a unique string associated with the script. This means that only the script with the correct nonce can load on the site.

html

<script src="/static/js/myscript.js" nonce="myscriptnonce"></script>

In your myscript.js, you can include the nonce as a comment:

javascript

// <script> tag generated by Flask, do not modify
// nonce: myscriptnonce

Now, only the script with the correct nonce will load on your site.

💡 Pro Tip:

Use unique nonces for each script to improve security.
Use a Content Delivery Network (CDN) for trusted scripts to improve performance.

🎯 CSP Directives and Types

Here are some common CSP directives and their types:

default-src: Controls all content types (scripts, styles, images, etc.)
script-src: Controls scripts (JS, Web Workers)
style-src: Controls styles (CSS)
img-src: Controls images
font-src: Controls web fonts
object-src: Controls objects (plugins like Flash, Silverlight)
connect-src: Controls connections to other origins
frame-ancestors: Controls iframes and objects

📝 Note:

You can find a complete list of directives and their types on the MDN Web Docs.

:quiz

Question: What does the default-src 'self' rule in a CSP header do? A: Allows all resources to load from any origin B: Allows only resources from the current origin to load C: Blocks all resources from loading Correct: B Explanation: The default-src 'self' rule allows only resources from the current origin to load.

:quiz

Question: What does a nonce do in a CSP header? A: It controls which resources can load on the site B: It's a unique identifier for scripts C: It's a type of CSP directive Correct: B Explanation: A nonce is a unique identifier for scripts that can help improve security by only allowing scripts with the correct nonce to load on the site.