CSP — Complete Guide
CSP — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of HTML Tutorial on Toolliyo Academy.
On this page
HTML Tutorial · Lesson 76 of 100
CSP
Basics ✓ → Forms & semantics ✓ → APIs & performance → Projects
APIs & performance · 3 — HTML5, CSS/JS, security · ~10 min · HTML — Performance & Security
What is this?
Content Security Policy headers restrict which scripts, styles, and sources a page may load.
Why should you care?
MarkupVerse banking pages block inline script injection even if HTML is tampered.
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
<head><!-- all JS must live in /js/*.js files --></head>
<script src="/js/mv-accounts.js" defer></script>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Start strict: script-src self only.
- Avoid inline handlers.
- Report-only mode tests policy before enforce.
Practice next
- Move inline JS to external file.
- Add CSP meta or header.
- Fix console violations.
- Add nonce for one inline boot script.
- Tighten img-src to CDN host.
Remember
External scripts only. Report-only first. No inline onclick.
MarkupVerse CSP lockdown
XSS attempt injects script tag.
Outcome: Browser blocks script not on allowlist.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
