> Markdown version of [/videos/361-securing-frontend-applications-with-trusted-types?t=1255](https://www.wearedevelopers.com/videos/361-securing-frontend-applications-with-trusted-types?t=1255). 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).

---

# Securing Frontend Applications with Trusted Types

Stop trusting static analysis to catch elusive DOM-based XSS. Move protection directly to the browser with Trusted Types to neutralize risky bypasses and unpatched third-party vulnerabilities forever.

- **Speakers:** Philippe De Ryck
- **Event:** WeAreDevelopers LIVE
- **Published:** February 24, 2022
- **Duration:** 45:19
- **URL:** https://www.wearedevelopers.com/videos/361-securing-frontend-applications-with-trusted-types

## Summary

DOM-based cross-site scripting (XSS) remains a pervasive threat in modern frontend applications, despite the native data-binding protections offered by frameworks like Angular, React, and Vue. Developers frequently encounter legitimate use cases where raw HTML must be rendered on the page, such as displaying rich text from an external editor. When relying on bypasses like React's `dangerouslySetInnerHTML` or direct DOM manipulations via Angular's `ElementRef`, applications open execution vectors if the payload is not properly sanitized. Because these vulnerable patterns are often buried deep within complex component trees or third-party dependencies, standard static analysis struggles to secure applications completely.

Trusted Types fundamentally shifts this security paradigm by moving protection directly to the browser via the Content Security Policy (CSP) header `require-trusted-types-for 'script'`. Rather than passively accepting raw string inputs into dangerous sinks like `innerHTML`, a browser enforcing Trusted Types will reject the assignment unless it receives a rigorously validated `TrustedHTML` object. This browser-level enforcement essentially mandates safe coding practices, coercing developers to process untrusted data through a robust sanitizer like DOMPurify. While Angular natively returns Trusted Types during its sanitization process, frameworks like React require developers to explicitly instruct DOMPurify to output a Trusted Type. Beyond securing internal codebases, defining a global `default` Trusted Types policy allows teams to automatically intercept and sanitize rogue string assignments originating from unpatched third-party libraries, effectively securing external dependencies without altering their minified source code.

Although Trusted Types is currently championed primarily by Chromium-based browsers, its utility as an application-hardening mechanism extends universally. Treating it as a strict development constraint surfaces insecure API usages locally, ensuring they are patched before reaching production. Once the underlying code is remediated to use secure assignments, the application becomes intrinsically safer for users on non-supporting browsers like Firefox and Safari. Furthermore, with native browser HTML sanitization APIs currently in development, the future landscape points toward eliminating the need to bundle third-party sanitizers entirely, vastly simplifying how secure template rendering is standardized across the web.

**Keywords:** trusted types, dom-based xss, cross-site scripting, content security policy, dangerouslysetinnerhtml, html sanitization, dompurify, angular security features, react vulnerability mitigation, default trusted types policy, trustedhtml objects, elementref exploitation, third-party dependency security, client-side rendering security, browser security headers

## Chapters

1. **The impact of cross-site scripting in modern web applications** (00:02) — How injected malicious code extracts sensitive data and executes dangerous operations.
1. **Rendering untrusted HTML and bypassing framework escaping protections** (03:47) — Bypassing default framework escaping with properties like innerHTML enables cross-site scripting attacks.
1. **Sanitizing untrusted inputs with external libraries and default behaviors** (08:02) — Removing dangerous elements from HTML output prevents malicious code execution in browser sinks.
1. **Accidental vulnerabilities generated by missing sanitization or element references** (10:19) — Directly accessing native DOM properties circumvents framework protections and introduces security flaws.
1. **Enforcing secure assignments using trusted types and response headers** (14:08) — Modifying default browser behavior blocks unsafe string assignments to dangerous HTML sinks.
1. **Improving code security with trusted types in development environments** (20:55) — Catching and fixing improper DOM assignments during local development secures applications globally.
1. **Securing third-party dependencies with default trusted types policies** (24:54) — Defining a fallback sanitization policy automatically protects applications from vulnerable external packages.
1. **Analyzing the out-of-the-box security posture of Vue.js** (31:53) — The Vue.js framework provides generic output escaping but lacks automatic sanitization for raw HTML insertion.
1. **Contrasting server-side validation against frontend injection responsibilities** (34:03) — Preventing DOM-based cross-site scripting relies entirely on secure client-side code rather than API endpoints.
1. **Preventing attackers from creating or injecting malicious trusted types** (36:02) — Locking down trusted type generation blocks third-party scripts from bypassing sanitization policies.
1. **Handling trusted type fallbacks in unsupported web browsers** (37:54) — Applications maintain basic sanitization protection levels even when running in environments lacking trusted types.
1. **Standardizing safe markup with an upcoming native sanitization API** (39:13) — Future browser capabilities will expose built-in HTML sanitizers to reduce dependency on external libraries.
1. **Evaluating framework architectures against cross-site scripting attack vectors** (41:41) — Moving away from runtime template parsing blocks common attack strategies across modern web platforms.
1. **Evaluating the feasibility of replacing the legacy DOM API** (43:26) — Maintaining backwards compatibility restricts complete structural overhauls of dangerous browser operations.

## Related Moments

- [Enforcing safe HTML assignments using Trusted Types policies](https://www.wearedevelopers.com/videos/1028-cross-site-scripting-is-yesterday-s-news-isn-t-it) (from "Cross Site Scripting is yesterday's news, isn't it?")
- [Enforcing strict DOM APIs using trusted types](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)")
- [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")
- [Generating Trusted Types safely using the DOMPurify library](https://www.wearedevelopers.com/videos/1028-cross-site-scripting-is-yesterday-s-news-isn-t-it) (from "Cross Site Scripting is yesterday's news, isn't it?")
- [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")
- [Implementing zero trust security practices in frontend applications](https://www.wearedevelopers.com/videos/100089-trust-issues-because-zero-trust-isn-t-optional-anymore) (from "Trust Issues: Because Zero-Trust Isn’t Optional Anymore")

## Related Articles

- [Understanding and Mitigating Common Web Vulnerabilities](https://www.wearedevelopers.com/magazine/565-understanding-and-mitigating-common-web-vulnerabilities)
- [Walking Into The Era of Supply Chain Risks](https://www.wearedevelopers.com/magazine/106-walking-into-the-era-of-supply-chain-risks)
- [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this)
- [The Overflow: Security and Privacy](https://www.wearedevelopers.com/magazine/715-the-overflow-security-and-privacy)

## Related Jobs

- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [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**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/643147-remote-senior-full-stack-engineer) at **Edge Impulse**