> Markdown version of [/videos/1028-cross-site-scripting-is-yesterday-s-news-isn-t-it?t=1532](https://www.wearedevelopers.com/videos/1028-cross-site-scripting-is-yesterday-s-news-isn-t-it?t=1532). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Cross Site Scripting is yesterday's news, isn't it? Think modern frameworks cured XSS? They haven't. Learn how to lock down your application against native DOM bypasses using strict CSPs and Trusted Types. - **Speakers:** [martinakraus](https://www.wearedevelopers.com/@martinakraus) - **Event:** World Congress 2024 - **Published:** August 20, 2024 - **Duration:** 30:54 - **URL:** https://www.wearedevelopers.com/videos/1028-cross-site-scripting-is-yesterday-s-news-isn-t-it ## Summary Despite the built-in sanitization features of modern frontend frameworks like Angular, React, and Vue, Cross-Site Scripting (XSS) remains a critical web vulnerability. Developers frequently bypass framework protections by directly invoking native DOM APIs such as innerHTML or document.write. Furthermore, the massive reliance on third-party NPM dependencies introduces severe supply chain risks, making applications vulnerable to compromised packages that inject malicious JavaScript straight into the client without triggering application-level validation. To actively defend against these execution streams, implementing a robust Content Security Policy (CSP) is essential. A strict CSP utilizing a default-src 'none' block-all stance prevents unauthorized external resources from loading. When executing legitimate inline scripts, cryptographic nonces or securely curated hashes offer safe alternatives to the highly dangerous unsafe-inline directive. Implementing dynamically generated server-side nonces guarantees that intercepted values cannot be reused by attackers on subsequent requests, while adding the strict-dynamic directive drastically simplifies deployment by automatically propagating trust to transitively loaded dependencies. For ultimate DOM-based XSS mitigation, the modern Trusted Types specification forces native injection sinks to explicitly demand sanitized data types instead of raw strings. Enforcing a 'require-trusted-types-for' CSP directive utterly locks down unsafe string assignments directly at the browser architecture level. Rather than undertaking the costly and error-prone process of writing custom sanitization logic, integrating an established library like DOMPurify seamlessly converts potentially dangerous inputs into inherently safe Trusted HTML objects, transforming client-side security into a resilient, programmatic guarantee. **Keywords:** cross-site scripting mitigation, content security policy rules, trusted types API, CSP cryptographic nonces, inline javascript hashes, framework sanitization vulnerabilities, DOM-based XSS attacks, third-party NPM supply chain risks, strict-dynamic trust propagation, DOMPurify HTML execution sinks, native DOM scripting bypass, server-side rendered security nonces ## Chapters 1. **Demonstrating cross-site scripting in an Angular application** (00:21) — How stored cross-site scripting manifests through unsanitized application input fields. 1. **How native DOM APIs bypass framework sanitization** (02:17) — Why built-in sanitizers in modern frameworks are bypassed when using native DOM properties directly. 1. **Configuring content security policy directives and modes** (05:40) — A foundational overview of Content Security Policy enforcement, report-only operations, and default behavior directives. 1. **Implementing basic CSP and restricting unsafe inline elements** (09:40) — Applying a basic Content Security Policy to block malicious scripts while configuring specific style allowances. 1. **Securing specific inline JavaScript blocks using CSP hashes** (13:49) — Generating and applying SHA checksum hashes to safely execute known inline JavaScript logic. 1. **Using CSP nonces and strict-dynamic for complex applications** (15:57) — Implementing server-side rendered cryptographic nonces alongside strict-dynamic configurations to securely propagate script execution trust. 1. **Supply chain security risks in NPM dependency code** (23:41) — Why traditional Content Security Policies fail to protect against vulnerabilities originating from third-party NPM packages. 1. **Enforcing safe HTML assignments using Trusted Types policies** (25:32) — Adopting the emerging Trusted Types specification as a structurally robust mitigation for DOM-based cross-site scripting. 1. **Generating Trusted Types safely using the DOMPurify library** (27:16) — Implementing the DOMPurify sanitizer software to automatically return compliant Trusted Types without writing flawed custom logic. ## Related Moments - [Handling modern injection flaws and cross-site scripting](https://www.wearedevelopers.com/videos/100072-bulletproof-web-applications-the-2025-owasp-top-ten) (from "Bulletproof Web Applications: The 2025 OWASP Top Ten") - [Enhancing core browser security with the native HTML Sanitizer API](https://www.wearedevelopers.com/videos/1753-wearedevelopers-live-spicy-vanilla-web-css-magic-more) (from "WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More") - [Evaluating framework architectures against cross-site scripting attack vectors](https://www.wearedevelopers.com/videos/361-securing-frontend-applications-with-trusted-types) (from "Securing Frontend Applications with Trusted Types") - [Dealing with cross-site scripting in single page applications](https://www.wearedevelopers.com/videos/80-a-primer-in-single-page-application-security-angular-react-vue-js) (from "A Primer in Single Page Application Security (Angular, React, Vue.js)") - [Stopping cross-site scripting attacks via secure HTML types](https://www.wearedevelopers.com/videos/892-typed-security-preventing-vulnerabilities-by-design) (from "Typed Security: Preventing Vulnerabilities By Design") - [Understanding classic XSS risks in reactive frontend frameworks](https://www.wearedevelopers.com/videos/100115-dangerous-reactivity-why-ai-output-is-the-new-xss) (from "Dangerous Reactivity: Why AI Output Is the New XSS") ## Related Articles - [Walking Into The Era of Supply Chain Risks](https://www.wearedevelopers.com/magazine/106-walking-into-the-era-of-supply-chain-risks) - [Understanding and Mitigating Common Web Vulnerabilities](https://www.wearedevelopers.com/magazine/565-understanding-and-mitigating-common-web-vulnerabilities) - [The Overflow: Security and Privacy](https://www.wearedevelopers.com/magazine/715-the-overflow-security-and-privacy) - [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this) ## Related Jobs - [Engineer, Offensive Security Organization](https://www.wearedevelopers.com/jobs/ext/1992296-engineer-offensive-security-organization) at **Twilio** - [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group** - [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH** - [Software Engineer Frontend (all genders welcome) in the field of Water Line Integrity Solutions](https://www.wearedevelopers.com/jobs/ext/127888-software-engineer-frontend-all-genders-welcome-in-the-field-of-water-line-integrity-solutions) at **Rosenxt Group** - [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group** - [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**