Cybersecurityknowledge~30 mins

Content Security Policy (CSP) in Cybersecurity - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Practice Challenge Project Recall Time

Content Security Policy (CSP) Setup for a Website

📖 Scenario: You are a web developer tasked with improving the security of a website by adding a Content Security Policy (CSP). CSP helps prevent attacks like cross-site scripting by controlling which resources the browser is allowed to load.In this project, you will create a simple HTML page and add a CSP header to it step-by-step.

🎯 Goal: Build a basic HTML page with a Content Security Policy that only allows scripts and styles from the same origin and blocks inline scripts.

📋 What You'll Learn

Create a basic HTML5 page structure

Add a meta tag for Content Security Policy

Configure the CSP to allow scripts and styles only from the same origin

Block inline scripts and styles

💡 Why This Matters

🌍 Real World

Content Security Policy is used by web developers and security teams to protect websites from malicious code injection and cross-site scripting attacks.

💼 Career

Understanding and implementing CSP is important for roles in web development, cybersecurity, and IT security to ensure safer web applications.

Progress0 / 4 steps

Create a basic HTML5 page

Create a basic HTML5 page with <!DOCTYPE html>, <html>, <head>, and <body> tags. Inside the <head>, add a <title> with the text Secure Page.

Cybersecurity

Need a hint?

Start with the standard HTML5 skeleton and add a title inside the head section.

Add a Content Security Policy meta tag

Inside the <head> tag, add a <meta> tag with http-equiv="Content-Security-Policy" and an empty content attribute for now.

Cybersecurity




    Secure Page

Need a hint?

Use a meta tag with http-equiv set to Content-Security-Policy and leave the content empty for now.

Configure CSP to allow scripts and styles only from the same origin

Set the content attribute of the CSP meta tag to allow scripts and styles only from the same origin using script-src 'self'; style-src 'self';.

Cybersecurity




    Secure Page

Need a hint?

Use script-src 'self'; style-src 'self'; inside the content attribute to restrict scripts and styles to the same origin.

Block inline scripts and styles in CSP

Update the content attribute of the CSP meta tag to also block inline scripts and styles by not including 'unsafe-inline'. The final content should be script-src 'self'; style-src 'self'; which already blocks inline code.

Cybersecurity




    Secure Page

Need a hint?

By not adding 'unsafe-inline', inline scripts and styles are blocked by default.