Thomas Konrad

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

Think your SPA is safe from XSS? Learn how modern frameworks can still leave you vulnerable and how to properly secure your application.

A Primer in Single Page Application Security (Angular, React, Vue.js)
#1about 3 minutes

Understanding single page application architecture

Single page applications improve speed and separation of concerns by rendering HTML on the client-side and fetching data via APIs.

#2about 5 minutes

The primary security threat of cross-site scripting

Cross-site scripting (XSS) is the main vulnerability in SPAs, where untrusted data is mixed with markup, leading to malicious code execution in the user's browser.

#3about 3 minutes

How Angular, React, and Vue handle innerHTML security

Angular automatically sanitizes `innerHTML` to prevent XSS, while React's `dangerouslySetInnerHTML` and Vue's `v-html` require manual care.

#4about 4 minutes

Securing dynamic attributes like href and src

Dynamic `href` attributes can execute JavaScript via `javascript:` URLs, and dynamic `src` or `style` attributes also pose XSS risks.

#5about 3 minutes

Using DOMPurify for robust HTML sanitization

Use the DOMPurify library to safely render untrusted HTML in frameworks like React and Vue, or to customize Angular's strict default sanitizer.

#6about 3 minutes

Why you should avoid direct DOM manipulation

Bypassing framework template engines by using direct DOM functions like `document.write` or `eval` reintroduces significant XSS vulnerabilities.

#7about 3 minutes

Using Content Security Policy for defense in depth

Implement a Content Security Policy (CSP) via HTTP headers to restrict script sources and disable inline scripts, providing a strong second layer of defense against XSS.

#8about 2 minutes

The future of XSS prevention with Trusted Types

The upcoming Trusted Types CSP directive will prevent strings from being passed to dangerous DOM functions, effectively creating a strongly-typed and safer DOM API.

#9about 3 minutes

A practical checklist for preventing XSS in SPAs

Follow a security checklist that includes using framework templates, sanitizing HTML with DOMPurify, and implementing a Content Security Policy.

#10about 3 minutes

Managing security risks in third-party dependencies

Regularly scan your project's dependencies for known vulnerabilities using tools like `npm audit` and automate the update process to mitigate risks from external code.

#11about 4 minutes

Essential web security best practices beyond SPAs

Ensure overall application security by enforcing TLS, using SameSite cookies, correctly configuring CORS, and securing WebSocket connections.

Related jobs
Jobs that call for the skills explored in this talk.

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior

Featured Partners

Related Videos

See all videos
Securing Frontend Applications with Trusted Types45:19

Securing Frontend Applications with Trusted Types

Philippe De Ryck

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

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

Martina Kraus

Snappy UI needs no Single-Page Application40:24

Snappy UI needs no Single-Page Application

Clemens Helm

Why I Recommend Svelte to Every New Web Developer31:21

Why I Recommend Svelte to Every New Web Developer

Markus Hatvan

Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

Security in modern Web Applications - OWASP to the rescue!26:59

Security in modern Web Applications - OWASP to the rescue!

Jakub Andrzejewski

SEO in Angular? No big deal with SSR and Angular Universal 44:00

SEO in Angular? No big deal with SSR and Angular Universal

Martina Kraus

Typed Security: Preventing Vulnerabilities By Design58:19

Typed Security: Preventing Vulnerabilities By Design

Michael Koppmann

From learning to earning

Jobs that call for the skills explored in this talk.