Content Security Policy meta http-equiv
Set a Content Security Policy via meta http-equiv.
Content Security Policy meta http-equiv is a free HTML Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
What is CSP?
Content Security Policy is a browser-enforced policy that restricts which resources a page can load and execute. It is the strongest defense against Cross-Site Scripting: even if an attacker injects a <script> tag, the browser refuses to run it unless the policy allows.
Two Ways to Deliver
CSP can be sent as an HTTP response header (Content-Security-Policy: ...) or as a meta tag in HTML: <meta http-equiv="Content-Security-Policy" content="...">. The header is preferred; the meta tag is useful when you cannot control the server.
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' https://cdn.example.com">Common Directives
default-src is the fallback for unspecified resource types. script-src, style-src, img-src, connect-src (XHR/fetch), font-src, frame-src each restrict their kind. Whitelist specific origins or use 'self' for same-origin only.
The self Keyword
'self' (quoted) refers to the page's own origin. script-src 'self' means "only run scripts hosted on the same origin as the page". This is the baseline for most policies; add specific external CDNs as needed.
Blocking Inline Scripts
By default, CSP blocks all inline <script> tags and event-handler attributes (onclick). This is the strongest XSS protection: an injected <script> cannot run because it is inline. Move all scripts to external files referenced by src.
Nonces and Hashes
For necessary inline scripts, use a nonce: server generates a random token per request, sets it as script-src 'nonce-RANDOM' in CSP, and adds nonce="RANDOM" to legitimate <script> tags. Injected scripts lack the nonce and are blocked.
<meta http-equiv="Content-Security-Policy"
content="script-src 'nonce-abc123'">
<script nonce="abc123">// allowed</script>
<script>// blocked — no nonce</script>unsafe-inline and unsafe-eval
'unsafe-inline' re-allows inline scripts and styles. 'unsafe-eval' re-allows eval() and new Function(). Both severely weaken CSP — use only as last resort during a migration, plan to remove them.
Meta Tag Limitations
CSP delivered via meta tag cannot use the report-uri directive (or other reporting features). It also takes effect later than a header — anything before the meta tag is unprotected. Headers are strictly better; use meta only as a fallback.
Report-Only Mode
Test a new policy without breaking the site: Content-Security-Policy-Report-Only: .... The browser reports violations without blocking them, so you can refine the policy until it allows all legitimate resources before flipping to enforcement.
Common Pitfalls
Forgetting style-src 'unsafe-inline' blocks inline styles (often produced by frameworks). Forgetting connect-src blocks AJAX to APIs. Always test the policy in report-only mode first and review the console for blocked resources.
Modern CSP Strategy
Strict CSP combines script-src 'nonce-RANDOM' 'strict-dynamic' for scripts plus a tight allow-list for everything else. 'strict-dynamic' lets nonced scripts load further scripts without listing each one — much easier to maintain than per-origin allow-lists.
Knowledge Check
How does CSP defend against XSS attacks even when an attacker successfully injects a script tag?
Summary
CSP is browser-enforced policy restricting which scripts, styles, images and other resources can load. Deliver via response header (preferred) or meta tag. Use nonces for needed inline scripts, avoid unsafe-inline/unsafe-eval, test in report-only mode first. Strict CSP with 'nonce-X' 'strict-dynamic' is the modern baseline.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “Content Security Policy meta http-equiv” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “Content Security Policy meta http-equiv”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
What will I learn in “Content Security Policy meta http-equiv”?
Set a Content Security Policy via meta http-equiv. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
How long does the “Content Security Policy meta http-equiv” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Content Security Policy meta http-equiv
- XSS via innerHTML and How to Prevent It
- iframe Sandboxing and Permissions Policy
- HTTPS and Subresource Integrity