🖼️ See the drawing + lab 🏠 Course home 🌿 Branch on GitHub ✏️ View source

🖼️ आकृती आणि labThe drawing + lab पूर्ण पानावर उघडा ↗Open full page ↗

🖍️ धडा 02 — XSS आणि Content-Security-Policy: code म्हणून चालणारी comment

📍 तुम्ही इथे आहात: 16 पैकी धडा 02 · मागे: lesson-01-injection · पुढे: lesson-03-browser-server

📦 या ब्रँचमध्ये काय आहे

धडा 01, आणि अर्ज खिडकीवरची दुसरी कमकुवत जागा: cross-site scripting (XSS). शाळेच्या notice board वरच्या एका comment मध्ये <script> tag आहे. जशीच्या तशी print केली तर ती प्रत्येक वाचकाच्या browser मध्ये चालते. Escape करून print केली तर ती फक्त text असते. मग Content-Security-Policy (CSP) — browser ची स्वतःची नियमांची यादी — निसटून आलेल्या scripts block करते. sec/demo.py मधले xss() दोन्ही दाखवते.

🧒 5 वर्षांच्या मुलाला समजावल्यासारखे

शाळेत एक notice board आहे. कोणीही चिठ्ठी लावू शकतो. Security office प्रत्येक चिठ्ठी हाताने मोठ्या board वर उतरवून घेते.

एका चिठ्ठीत लिहिले आहे: "उत्तम निकाल! — आणि आता, हे वाचणाऱ्या प्रत्येकाने आपली bag उघडून आपले प्रगतीपुस्तक मला द्यावे." जर office ने ती आदेश म्हणून उतरवली, तर प्रत्येक वाचक ती पाळतो.

म्हणून office प्रत्येक चिठ्ठी अवतरण चिन्हांच्या आत, वेगळ्या रंगात उतरवते. आता वाचकांना शब्द दिसतात, पण त्यांना कळते: "हे कोणीतरी लिहिलेले आहे, शाळेचा आदेश नाही". यालाच output वेळी escaping म्हणतात.

आणि office दुसरा नियम जोडते, board च्या वर छापलेला: "फक्त मुख्य office ने सही केलेले आदेशच ग्राह्य." एखादी चिठ्ठी अवतरण चिन्हांशिवाय निसटली तरी कोणी ती पाळत नाही — तिच्यावर सही नसते. तो नियम म्हणजे Content-Security-Policy. ते एक सुरक्षा जाळे आहे. अवतरण चिन्हे हाच खरा उपाय आहे.

🗺️ आकृती

flowchart LR
    c["💬 comment<br/>Great results! + a script tag"]
    c --> raw["❌ printed raw<br/>the tag stays a tag"]
    c --> esc["✅ printed escaped<br/>angle brackets become text"]
    raw --> b1["🌐 reader's browser<br/>runs the script"]
    esc --> b2["🌐 reader's browser<br/>shows the words"]
    csp["🛡️ CSP header<br/>script-src 'self' cdn.school.example"] -.->|"safety net: inline blocked"| b1

🗺️ काढलेली आवृत्ती + एक lab: https://school-edh.pages.dev/security/lesson-diagrams.html#l02

❓ काय

XSS (cross-site scripting) — एका व्यक्तीचा input दुसऱ्या व्यक्तीच्या page वर पोहोचतो आणि तिथे script म्हणून चालतो. Script वाचक म्हणून चालते: ती page वाचू शकते, वाचकाच्या session ने API ला call करू शकते आणि वाचकाला काय दिसते ते बदलू शकते. OWASP Top 10 (2021) ते A03:2021 – Injection खाली मोजते.
- Stored — साठवलेले (एखादी comment) आणि page उघडणाऱ्या प्रत्येकाला दाखवलेले.
- Reflected — link मधून पाठवलेले आणि एकदा परत दाखवलेले.
- DOM-based — page चेच JavaScript input page मध्ये घालते (innerHTML).
Output encoding (escaping) — print करताना खास चिन्हे निरुपद्रवी text मध्ये बदला: < → <, " → ". render_safe() html.escape() वापरते.
Context-aware — योग्य encoding value कुठे जाते त्यावर अवलंबून असते: HTML text, HTML attribute, JavaScript string, URL, CSS. HTML escaping मुळे value <script> च्या आत किंवा href="javascript:…" च्या आत सुरक्षित होत नाही. Auto-escaping असलेली template engines (Jinja2, Django templates, React JSX, Angular, Razor) HTML text आणि attributes तुमच्यासाठी सांभाळतात.
Sanitising — जेव्हा users ना HTML (rich text) पाठवावेच लागते, तेव्हा DOMPurify सारखा sanitiser फक्त सुरक्षित tags आणि attributes ची allow-list ठेवतो.
Content-Security-Policy (CSP) — HTTP response header जो browser ला सांगतो कोणत्या scripts चालू शकतात. मुख्य भाग:
- script-src — scripts कुठून येऊ शकतात ('self', नाव दिलेले hosts). नसेल तर default-src वापरला जातो.
- 'unsafe-inline' नाही — ते नसेल तर inline <script> blocks आणि onerror= handlers चालत नाहीत.
- nonces किंवा hashes — तुमची स्वतःची inline script चालू देण्यासाठी तिला प्रत्येक response साठी random nonce-… द्या किंवा तिचा sha256-… hash यादीत लिहा. घुसवलेल्या script कडे यातले काहीच नसते.
- object-src 'none', base-uri 'none', frame-ancestors 'none' इतर दारे बंद करतात.
CSP हे सुरक्षा जाळे आहे, उपाय नाही — कडक CSP चुकलेल्या escape चे नुकसान मर्यादित करते. उपाय अजूनही योग्य encoding हाच आहे.

🤔 का

कारण notice board सगळ्यांचा आहे. एक साठवलेली comment प्रत्येक पालकाच्या browser मध्ये, त्यांच्या login ने चालू शकते. Script त्यांच्या नावाने /api/grades ला call करू शकते, किंवा "fees भरा" link बदलू शकते. Server ला काहीच विचित्र दिसत नाही — प्रत्येक request सोबत खरे session असते. Output वेळी escaping comment ला code बनण्यापासून थांबवते. CSP खात्री करते की एखादी चुकलेली जागा पूर्ण breach बनत नाही.

🔧 कसे (या repo मध्ये)

sec/web.py मध्ये render_unsafe(comment) f"<p>{comment}</p>" परत देते. render_safe(comment) f"<p>{html.escape(comment)}</p>" परत देते. csp_allows(policy, kind, source) हा एक छोटा CSP वाचक आहे: तो script-src (किंवा default-src) शोधतो आणि inline script, किंवा source मधून आलेली script, चालू शकते का ते सांगतो. हे शिकवण्यासाठीचे model आहे — ते nonces किंवा hashes वाचत नाही.

🧪 करून पाहा

python3 sec/demo.py xss
python3 - <<'EOF'
import sys; sys.path.insert(0, "sec"); from web import render_unsafe, render_safe, csp_allows
c = '<img src=x onerror="alert(1)">'
print("raw     →", render_unsafe(c))
print("escaped →", render_safe(c))
for policy in ("script-src 'self'", "script-src 'self' 'unsafe-inline'", "default-src 'self'", "script-src *"):
    inline = "runs" if csp_allows(policy, "inline", None) else "blocked"
    evil = "runs" if csp_allows(policy, "src", "https://evil.example") else "blocked"
    print(f"{policy:<36} inline → {inline:<7} · evil.example → {evil}")
EOF

✅ तपासा — तुम्हाला काय दिसायला हवे

xss हे print करते:

── a comment on the notice board: 'Great results! <script>fetch("/api/grades")</script>'
   rendered raw     → <p>Great results! <script>fetch("/api/grades")</script></p>
   rendered escaped → <p>Great results! &lt;script&gt;fetch(&quot;/api/grades&quot;)&lt;/script&gt;</p>
── Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.school.example
   inline <script>…</script>             → blocked
   src    self                           → runs
   src    https://cdn.school.example     → runs
   src    https://evil.example           → blocked
   escape on output for the right context (HTML, attribute, JS, URL) — CSP is the safety net, not the fix

तुमचा snippet हे print करतो:

raw     → <p><img src=x onerror="alert(1)"></p>
escaped → <p>&lt;img src=x onerror=&quot;alert(1)&quot;&gt;</p>
script-src 'self'                    inline → blocked · evil.example → blocked
script-src 'self' 'unsafe-inline'    inline → runs    · evil.example → blocked
default-src 'self'                   inline → blocked · evil.example → blocked
script-src *                         inline → blocked · evil.example → runs

🏁 तुम्ही आत्ताच काय सिद्ध केले

XSS ला <script> tag लागत नाही — onerror handler असलेला <img> पुरेसा आहे, आणि escaping दोन्हींना निष्प्रभ करते. 'unsafe-inline' जोडल्याने inline code साठी सुरक्षा जाळे बंद होते, आणि script-src * मुळे scripts कोणत्याही host वरून load होऊ शकतात. चांगल्या policy मध्ये यातले काहीच नसते.

⚠️ नेहमीच्या चुका

योग्य context साठी output वेळी करण्याऐवजी input वेळी escaping करणे (आणि बिघडलेला text साठवणे)
user data वर innerHTML = userText, dangerouslySetInnerHTML, v-html, किंवा Jinja चे |safe
<script> block किंवा javascript: URL मध्ये जाणारी value HTML-escape करणे
"फक्त चालावे म्हणून" 'unsafe-inline' असलेला CSP — त्याने बहुतेक संरक्षण निघून जाते
test न करता कडक CSP ship करणे — Content-Security-Policy-Report-Only ने सुरुवात करा

🏭 प्रत्यक्ष वापरात

खऱ्या account वर — escaping framework ला करू द्या. Jinja2 (Flask हे .html templates साठी चालू करते):

from jinja2 import Environment, FileSystemLoader, select_autoescape
env = Environment(loader=FileSystemLoader("templates"), autoescape=select_autoescape(["html"]))
# {{ comment }} in a template is now escaped; never add |safe to user data

React JSX मधला text escape करते. Users कडून आलेला rich text आधी sanitiser मधून जातो:

<p>{comment}</p>                                   // ✅ escaped by React
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(richText) }} />   // only when you must

प्रत्येक response साठी nonce असलेला कडक CSP (Express; helmet header set करतो):

import crypto from 'node:crypto';
import helmet from 'helmet';
app.use((req, res, next) => { res.locals.nonce = crypto.randomBytes(16).toString('base64'); next(); });
app.use(helmet.contentSecurityPolicy({ directives: {
  defaultSrc: ["'self'"],
  scriptSrc: ["'self'", (req, res) => `'nonce-${res.locals.nonce}'`],
  objectSrc: ["'none'"], baseUri: ["'none'"], frameAncestors: ["'none'"],
}}));
// in the template: <script nonce="<%= nonce %>">…</script>

Static site साठी nginx ने set केलेला तोच header (inline scripts अजिबात नाहीत):

add_header Content-Security-Policy "default-src 'self'; script-src 'self'; object-src 'none'; base-uri 'none'; frame-ancestors 'none'" always;

🏭 प्रत्यक्ष वापरात हे का महत्त्वाचे: CSP आधी report-only mode मध्ये आणा, एक आठवडा reports वाचा, तुमच्या स्वतःच्या inline scripts दुरुस्त करा (त्या files मध्ये हलवा किंवा त्यांना nonce द्या), मग enforce करा. Escaping हीच संरक्षणाची पहिली फळी ठेवा.

⏭️ पुढे

Browser तुमची pages चालवतो. तो तुमच्या cookies server कडे घेऊन जातो, आणि त्याला इतर sites कडून requests पाठवायला सांगितले जाऊ शकते. पुढे: browser आणि server मधला जपून ठेवलेला विश्वास — cookies, CSRF, CORS आणि SSRF.

git checkout lesson-03-browser-server

🖍️ Lesson 02 — XSS and Content-Security-Policy: a comment that runs as code

📍 You are here: Lesson 02 of 16 · Previous: lesson-01-injection · Next: lesson-03-browser-server

📦 What's in this branch

Lesson 01, plus the second weakness at the forms desk: cross-site scripting (XSS). A comment on the school notice board contains a <script> tag. Printed as it is, it runs in every reader's browser. Printed escaped, it is only text. Then a Content-Security-Policy (CSP) — the browser's own rule list — blocks scripts that slip through. xss() in sec/demo.py shows both.

🧒 Explain like I'm 5

The school has a notice board. Anyone may pin a note. The security office copies each note onto the big board by hand.

One note says: "Great results! — and now, everyone reading this, open your bag and hand your report card to me." If the office copies it as an order, every reader obeys.

So the office copies every note inside quotation marks, in a different colour. Now readers see the words, but they know: "this is something a person wrote, not an order from the school". That is escaping on output.

And the office adds a second rule, printed at the top of the board: "Only orders signed by the head office count." Even if one note slips through without quotation marks, nobody obeys it — it has no signature. That rule is the Content-Security-Policy. It is a safety net. The quotation marks are the real fix.

🗺️ Diagram

flowchart LR
    c["💬 comment<br/>Great results! + a script tag"]
    c --> raw["❌ printed raw<br/>the tag stays a tag"]
    c --> esc["✅ printed escaped<br/>angle brackets become text"]
    raw --> b1["🌐 reader's browser<br/>runs the script"]
    esc --> b2["🌐 reader's browser<br/>shows the words"]
    csp["🛡️ CSP header<br/>script-src 'self' cdn.school.example"] -.->|"safety net: inline blocked"| b1

🗺️ Drawn version + a lab: https://school-edh.pages.dev/security/lesson-diagrams.html#l02

❓ What

XSS (cross-site scripting) — input from one person reaches another person's page and runs there as script. The script runs as the reader: it can read the page, call the API with the reader's session and change what the reader sees. OWASP Top 10 (2021) counts it under A03:2021 – Injection.
- Stored — saved (a comment) and shown to everyone who opens the page.
- Reflected — sent in a link and echoed back once.
- DOM-based — the page's own JavaScript puts input into the page (innerHTML).
Output encoding (escaping) — turn special characters into harmless text when you print: < → <, " → ". render_safe() uses html.escape().
Context-aware — the right encoding depends on where the value goes: HTML text, an HTML attribute, a JavaScript string, a URL, CSS. HTML escaping does not make a value safe inside <script> or inside href="javascript:…". Template engines with auto-escaping (Jinja2, Django templates, React JSX, Angular, Razor) handle HTML text and attributes for you.
Sanitising — when users must send HTML (rich text), a sanitiser such as DOMPurify keeps only an allow-list of safe tags and attributes.
Content-Security-Policy (CSP) — an HTTP response header that tells the browser which scripts may run. Key parts:
- script-src — where scripts may come from ('self', named hosts). Falls back to default-src.
- no 'unsafe-inline' — without it, inline <script> blocks and onerror= handlers do not run.
- nonces or hashes — to allow your own inline script, give it a random, per-response nonce-… or list its sha256-… hash. Injected script has neither.
- object-src 'none', base-uri 'none', frame-ancestors 'none' close other doors.
CSP is a safety net, not the fix — a strict CSP limits the damage of a missed escape. The fix is still correct encoding.

🤔 Why

Because the notice board is shared. One stored comment can run in every parent's browser, with their login. The script can call /api/grades as them, or change a "pay fees" link. The server never sees anything strange — each request carries a real session. Escaping on output stops the comment from becoming code. CSP makes sure that one missed spot does not become a full breach.

🔧 How (in this repo)

In sec/web.py, render_unsafe(comment) returns f"<p>{comment}</p>". render_safe(comment) returns f"<p>{html.escape(comment)}</p>". csp_allows(policy, kind, source) is a small CSP reader: it finds script-src (or default-src) and says whether an inline script, or a script from source, may run. It is a teaching model — it does not read nonces or hashes.

🧪 Try it

python3 sec/demo.py xss
python3 - <<'EOF'
import sys; sys.path.insert(0, "sec"); from web import render_unsafe, render_safe, csp_allows
c = '<img src=x onerror="alert(1)">'
print("raw     →", render_unsafe(c))
print("escaped →", render_safe(c))
for policy in ("script-src 'self'", "script-src 'self' 'unsafe-inline'", "default-src 'self'", "script-src *"):
    inline = "runs" if csp_allows(policy, "inline", None) else "blocked"
    evil = "runs" if csp_allows(policy, "src", "https://evil.example") else "blocked"
    print(f"{policy:<36} inline → {inline:<7} · evil.example → {evil}")
EOF

✅ Verify — what you should see

xss prints:

── a comment on the notice board: 'Great results! <script>fetch("/api/grades")</script>'
   rendered raw     → <p>Great results! <script>fetch("/api/grades")</script></p>
   rendered escaped → <p>Great results! &lt;script&gt;fetch(&quot;/api/grades&quot;)&lt;/script&gt;</p>
── Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.school.example
   inline <script>…</script>             → blocked
   src    self                           → runs
   src    https://cdn.school.example     → runs
   src    https://evil.example           → blocked
   escape on output for the right context (HTML, attribute, JS, URL) — CSP is the safety net, not the fix

Your snippet prints:

raw     → <p><img src=x onerror="alert(1)"></p>
escaped → <p>&lt;img src=x onerror=&quot;alert(1)&quot;&gt;</p>
script-src 'self'                    inline → blocked · evil.example → blocked
script-src 'self' 'unsafe-inline'    inline → runs    · evil.example → blocked
default-src 'self'                   inline → blocked · evil.example → blocked
script-src *                         inline → blocked · evil.example → runs

🏁 What you just proved

XSS does not need a <script> tag — an <img> with an onerror handler is enough, and escaping neutralises both. Adding 'unsafe-inline' switches the safety net off for inline code, and script-src * lets scripts load from any host. A good policy has neither.

⚠️ Common mistakes

escaping on input (and storing mangled text) instead of on output, for the right context
innerHTML = userText, dangerouslySetInnerHTML, v-html, or Jinja's |safe on user data
HTML-escaping a value that goes into a <script> block or a javascript: URL
a CSP with 'unsafe-inline' "just to make it work" — it removes most of the protection
shipping a strict CSP without testing — start with Content-Security-Policy-Report-Only

🏭 In production

On a real account — let the framework escape for you. Jinja2 (Flask turns this on for .html templates):

from jinja2 import Environment, FileSystemLoader, select_autoescape
env = Environment(loader=FileSystemLoader("templates"), autoescape=select_autoescape(["html"]))
# {{ comment }} in a template is now escaped; never add |safe to user data

React escapes text in JSX. Rich text from users goes through a sanitiser first:

<p>{comment}</p>                                   // ✅ escaped by React
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(richText) }} />   // only when you must

A strict CSP with a per-response nonce (Express; helmet sets the header):

import crypto from 'node:crypto';
import helmet from 'helmet';
app.use((req, res, next) => { res.locals.nonce = crypto.randomBytes(16).toString('base64'); next(); });
app.use(helmet.contentSecurityPolicy({ directives: {
  defaultSrc: ["'self'"],
  scriptSrc: ["'self'", (req, res) => `'nonce-${res.locals.nonce}'`],
  objectSrc: ["'none'"], baseUri: ["'none'"], frameAncestors: ["'none'"],
}}));
// in the template: <script nonce="<%= nonce %>">…</script>

The same header set by nginx for a static site (no inline scripts at all):

add_header Content-Security-Policy "default-src 'self'; script-src 'self'; object-src 'none'; base-uri 'none'; frame-ancestors 'none'" always;

🏭 Why this matters in production: roll out CSP in report-only mode first, read the reports for a week, fix your own inline scripts (move them to files or give them a nonce), then enforce. Keep escaping as the first line of defence.

⏭️ Next

The browser runs your pages. It also carries your cookies to the server, and it can be asked to send requests from other sites. Next: the careful trust between browser and server — cookies, CSRF, CORS and SSRF.

git checkout lesson-03-browser-server

← Previousinjection Next →browser server

This page is the lesson's README from the lesson-02-xss-csp branch, shown here so the whole School stays on one site. Code files open on GitHub at the same branch.