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

From learning to earning

Jobs that call for the skills explored in this talk.