Martina Kraus

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

Think your framework protects you from XSS? A single call to `innerHTML` can bypass its defenses. Learn how a layered security approach can truly protect your application.

Cross Site Scripting is yesterday's news, isn't it?
#1about 2 minutes

Demonstrating a persistent cross-site scripting attack

A live demo shows how malicious JavaScript can be injected into an input field and stored in a database, executing on every page load.

#2about 3 minutes

Why built-in framework sanitizers are not enough

Framework sanitizers can be bypassed by using native DOM APIs directly, and the vast majority of application code comes from third-party NPM packages.

#3about 4 minutes

Introducing the Content Security Policy http header

The Content Security Policy (CSP) is an HTTP header that controls which resources can be loaded and executed by the browser using directives for scripts, styles, and API connections.

#4about 4 minutes

Implementing and refining a basic content security policy

A live demo shows how to add a CSP via a meta tag and then iteratively fix broken styles and API calls by adjusting the `style-src` and `connect-src` directives.

#5about 3 minutes

Safely executing inline scripts with hashes and nonces

CSP Level 2 provides hashes and nonces as secure alternatives to `unsafe-inline` for whitelisting specific inline scripts for execution.

#6about 7 minutes

Using CSP nonces with server-side rendering

Nonces must be unique and randomly generated on the server for each request to be secure, and the `strict-dynamic` directive allows trusted scripts to load other scripts.

#7about 3 minutes

Introducing trusted types to secure dangerous dom sinks

Trusted Types is a new CSP directive that locks down dangerous DOM APIs, requiring that any data passed to them must first be sanitized and wrapped in a special trusted object.

#8about 3 minutes

Implementing trusted types with the dompurify library

Instead of writing custom sanitization logic, you can use a library like DOMPurify with its `RETURN_TRUSTED_TYPE` option to easily create secure, trusted HTML objects.

#9about 1 minute

Browser support and final recommendations for trusted types

Trusted Types are currently supported by all Chromium-based browsers, making it a viable defense-in-depth strategy for a significant portion of web users.

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 Articles

View all articles
CH
Chris Heilmann
Dev Digest 138 - Are you secure about this?
Hello there! This is the 2nd "out of the can" edition of 3 as I am on vacation in Greece eating lovely things on the beach. So, fewer news, but lots of great resources. Many around the topic of security. Enjoy! News and ArticlesGoogle Pixel phones t...
Dev Digest 138 - Are you secure about this?
DC
Daniel Cranney
Dev Digest 152: Chrome Extensions Hack, CSS Spy Sheets, Deepseek OSS AI
Inside last week’s Dev Digest 152 . 🐋 DeepSeek - a new rising star open source model 🖐 Using CSS to fingerprint browsers and email clients 🧠 Things you should know about accessibility 🤷‍♂️ What do you when you messed up in Git 📍 Cloudflare security ...
Dev Digest 152: Chrome Extensions Hack, CSS Spy Sheets, Deepseek OSS AI
DC
Daniel Cranney
Dev Digest 165: "Slopsquatting", Chrome extension tracking and CSS hell
Inside last week’s Dev Digest 165 . 🤖 Microsoft creates light-weight LLM to run on CPUs 💻 The state of Webdev AI 🙅‍♂️ Why you should lie to LLMs and not thank them 🥷 Chrome extensions have hidden tracking code 🔨 How to build and AI Agent 🔒 Slopsquat...
Dev Digest 165: "Slopsquatting", Chrome extension tracking and CSS hell

From learning to earning

Jobs that call for the skills explored in this talk.