Skip to content
Computing Medium #xss#web-security#owasp

XSS: Cross-Site Scripting

Attacker-injected script runs in your origin. Steals tokens, defaces, pivots.

A free, animated xss: cross-site scripting you can read here or embed on any website, from Scrollchart.

XSS: Cross-Site Scripting

XSS: Cross-Site ScriptingThree vectors, one outcome: attacker script runs with victim origin privilegesStored XSSPersisted on serverReflected XSSURL parameter echoed backDOM-Based XSSClient-side sink, no server touchAttacker POSTs malicious script to serverScript stored in DB / comment / postVictim loads page; script served from originBrowser executes: tokens stolen / DOM hijackedAttacker crafts URL with script in query paramVictim clicks phishing link; server echoes paramResponse contains unescaped attacker payloadBrowser executes on victim's session contextAttacker crafts URL with fragment or hash payloadJavaScript reads location.hash / search unsafelySink: innerHTML / eval / document.write firesScript runs; server never saw the payloadAll three paths terminate in the same outcome: attacker code runs inside the victim sessionDEFENSESOutput encodingHTML-encode all untrusted dataCSP headerscript-src 'self'; block inlineTrusted TypesLock DOM sinks at browser API level123412341234

Three flavors: stored (persisted on server), reflected (echoed via URL), DOM-based (client-side sink). Each delivers an attacker script that runs with the victim's permissions. CSP, output encoding, and Trusted Types shown as defenses.

Good for

  • OWASP Top 10 explainers and security-training slide decks
  • Web security blog posts contrasting stored vs reflected vs DOM-based vectors
  • Developer onboarding content on why output encoding and CSP are non-negotiable

Source & accuracy

This xss: cross-site scripting is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

Scripts in Your Origin

Cross-Site Scripting (XSS) occurs when an attacker injects JavaScript into a web page that runs in a user's browser under the target site's origin. This JavaScript inherits all the permissions of the logged-in user: it can read cookies, steal authentication tokens, access sensitive data in the DOM, and perform actions on the user's behalf.

If a comment form allows HTML and an attacker posts '<script>fetch(/admin)</script>', that script runs in the browser of every user who views the comment. Unlike a breach of the server, XSS doesn't require the attacker to compromise backend systems; it leverages the user's own browser and permissions.

Stored, Reflected, and DOM-based Variants

Stored XSS persists in the database (comments, profiles). Reflected XSS lives in a URL parameter and executes when the page echoes it back without escaping. DOM-based XSS manipulates the page's JavaScript directly without involving the server, often by reading window.location.hash or form inputs.

Defenses include output encoding (escaping HTML/JavaScript characters so they render as text, not code), Content Security Policy (restricting which origins scripts can load from), httpOnly cookies (preventing JavaScript from reading authentication tokens), and input validation (rejecting suspicious patterns). Modern frameworks like React and Vue escape output by default, eliminating the most common variants.

Embed this diagram

Add this animated xss: cross-site scripting to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated xss: cross-site scripting for any website.
Who uses it
Security blogs, Developer blogs.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="xss-attack" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "XSS: Cross-Site Scripting" for my website?
Scrollchart provides "XSS: Cross-Site Scripting" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a xss: cross-site scripting in a developer or tech blog?
Copy the one-line snippet from the Scrollchart diagram page and paste it into your post HTML. It works in any static site generator, CMS, or hand-coded HTML page. The embed is a thin loader, not an iframe, so the content is fully in your DOM.