WebSecureViz

Interactive Security Learning

Catalog
Web Security Visualizer
Step 520–25 minutes

Content Security Policy (CSP)

CSP is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks.

VISUALIZATION: CSP POLICY BUILDER
Current Policy

Policy Directives

Allow scripts from my own domain

Allow scripts from trusted partner

Allow inline <script> tags (Dangerous!)

Content-Security-Policy: default-src 'self'; script-src 'self';

Browser Resource Loader

/js/app.js (Self)script • self
Allowed
https://analytics.google.com/...script • google
Blocked
<script>alert('xss')</script>script • inline
Blocked
/img/logo.png (Self)image • self
Allowed
https://evil.com/miner.jsscript • evil
Blocked

Mastery Goals

Write CSP policies that mitigate XSS and injection risks

  • script-src and style-src
  • inline script blocking
  • nonce and hash-based policies

Ready to move on?

Mark this section as complete to track your progress through the curriculum.

Next Topic