WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Dec 1, 2020

A Primer in Single Page Application Security (Angular, React, Vue.js)

Thomas Konrad

Are your React, Vue, or Angular apps safe from DOM-based XSS? Master defense-in-depth strategies like CSP and Trusted Types to secure your single-page applications.

Pause
Mute Enter Fullscreen
#1 about 4 min

Overview of single page application architecture

Single page applications improve speed and separation of concerns compared to traditional server-rendered websites.

#2 about 5 min

Dealing with cross-site scripting in single page applications

Cross-site scripting remains the primary security vulnerability when mixing untrusted data with HTML markup.

#3 about 3 min

Comparing framework defenses for inner HTML manipulation

Angular automatically sanitizes inner HTML inputs whereas React and Vue require manual verification of trusted sources.

#4 about 4 min

Securing link attributes and other hazardous DOM sinks

Attributes like horizontal references or dynamic script tags can execute arbitrary JavaScript if supplied with malicious URLs.

#5 about 4 min

Implementing manual sanitization using the DOMPurify library

Frameworks without built-in strict sanitizers enforce the usage of external libraries like DOMPurify to clean HTML inputs.

#6 about 3 min

Avoiding direct DOM manipulation and insecure functions

Bypassing framework templates to directly invoke raw document functions or evaluators reintroduces critical injection vulnerabilities.

#7 about 4 min

Implementing content security policies for single page applications

Content security policies add an effective secondary defense layer by blocking unauthorized origins and inline scripts.

#8 about 3 min

Enforcing strict DOM APIs using trusted types

The trusted types directive restricts insecure string assignments to DOM sinks by mandating strongly typed secure objects.

#9 about 4 min

Security checklist and best practices for interface development

Following framework standards alongside linters and robust policies mitigates the vast majority of injection risks.

#10 about 3 min

Automating security checks for third-party module dependencies

Continuous automated scanning of package repositories manages the broad attack surface introduced by external libraries.

#11 about 4 min

Applying transport restrictions and cookie security flags

Strict transport security protocols and verified cross-origin configurations solidify the foundational protection of the application backend.

Matching moments

1:44 min

Evaluating framework architectures against cross-site scripting attack vectors

Philippe De Ryck · LIVE

1:35 min

Enhancing core browser security with the native HTML Sanitizer API

Chris Heilmann +2 · LIVE

1:05 min

Handling modern injection flaws and cross-site scripting

Christian Wenz Christian Wenz · World Congress 2026 Europe

2:07 min

Understanding classic XSS risks in reactive frontend frameworks

Ramona Schwering Ramona Schwering · World Congress 2026 Europe

1:55 min

Demonstrating cross-site scripting in an Angular application

martinakraus martinakraus · World Congress 2024

2:10 min

Analyzing the out-of-the-box security posture of Vue.js

Philippe De Ryck · LIVE

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
8 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
15 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
17 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
22 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
24 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
29 days ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 25, 2026 · 16:15–16:25

Outdoor Stage

Silent Execution: Defending Against Install-Time Supply Chain Attacks

Chris DeMars

Senior Developer Advocate at TuxCare

Chris DeMars
Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 24, 2026 · 14:50–15:20

Stage 1

The Era of Machine-Driven Defense is Here: Headless Security

Loris Degioanni

Founder & CTO of Sysdig

Loris Degioanni
Open session

World Congress 2026 North America

September 23, 2026 · 15:45–17:45

Stage 10

Securing the Agentic Stack: Docker Hardened Images and Supply Chain Security

Ajeet Raina

Developer Advocate at Docker

Ajeet Raina
Open session

World Congress 2026 North America

September 25, 2026 · 09:40–10:10

Stage 5

Secure-by-Inclusion: Preventing Accessibility Barriers from Becoming Security Vulnerabilities

Radostina (Ina) Tsvetkova

Norwegian Directorate of Labour and Welfare (NAV), Senior Advisor in Digital Accessibility and Inclusive Design

Radostina (Ina) Tsvetkova
Open session

World Congress 2026 North America

September 25, 2026 · 15:00–17:00

Stage 12

Secure development from pull request to production with GitHub

Sam Jarvinen

Senior Solutions Engineer, GitHub

Sam Jarvinen

Related videos

Cross Site Scripting is yesterday's news, isn't it? thumbnail
30:54
World Congress 2024 • about 2 years ago

Cross Site Scripting is yesterday's news, isn't it?

martinakraus

Securing Frontend Applications with Trusted Types thumbnail
45:19
LIVE • over 4 years ago

Securing Frontend Applications with Trusted Types

Philippe De Ryck

Security in modern Web Applications - OWASP to the rescue! thumbnail
26:59
World Congress 2023 • almost 3 years ago

Security in modern Web Applications - OWASP to the rescue!

Jakub Andrzejewski

Dangerous Reactivity: Why AI Output Is the New XSS thumbnail
23:44
World Congress 2026 Europe • 3 months ago

Dangerous Reactivity: Why AI Output Is the New XSS

Ramona Schwering

WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More thumbnail
59:40
LIVE • 11 months ago

WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More

Chris Heilmann, Daniel Cranney, Peter Kröner

101 Typical Security Pitfalls thumbnail
28:41
World Congress 2022 • over 4 years ago

101 Typical Security Pitfalls

Alexander Pirker

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.