Ayman Eldawy

Posted on Jul 2 • Originally published at linkedin.com

What is Content Security Policy (CSP)?

#csp #security #frontend #javascript

One of the most important, yet often underrated, topics in frontend security is Content Security Policy (CSP).

You can think of CSP as a set of instructions you give the browser, telling it what is allowed to run and what should be blocked.

Let's break it down.

What is CSP?

Content Security Policy (CSP) is an HTTP response header that you configure on your server to tell the browser which sources are trusted for loading resources such as:

JavaScript
CSS
Images
Videos
Fonts
And other assets

Imagine the browser has a whitelist of trusted sources. Whenever it tries to load a resource, it checks whether that source is on the list.

If the source isn't trusted, the browser simply blocks it.

This makes it much harder for attackers to inject and execute malicious code on your website.

What problem does CSP solve?

The primary problem CSP helps mitigate is Cross-Site Scripting (XSS).

An XSS attack allows an attacker to inject malicious JavaScript into your application. Once executed, that script could:

Steal cookies
Read data from Local Storage
Modify the page
Perform actions on behalf of the user

How does CSP stop this?

Even if an attacker successfully injects JavaScript into your page, the browser will first check your CSP policy.

If that script doesn't come from an approved source, the browser refuses to execute it.

In many cases, the attack simply fails before any malicious code runs.

CSP helps with more than XSS

Although CSP is mainly known for mitigating XSS attacks, it can also help reduce other security risks, including:

Clickjacking
Loading untrusted third-party resources
Restricting iframes
Controlling redirects
Restricting form submissions
Controlling where images, fonts, stylesheets, and scripts can be loaded from

Despite being "just an HTTP header," CSP offers a surprisingly powerful security layer.

The downside?

Implementing a strict CSP can be challenging because you'll often need to carefully define every trusted resource your application depends on.

A simple example

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://example.com;

What does this mean?

default-src 'self'

By default, resources should only be loaded from your own domain.

script-src 'self' https://example.com

JavaScript is only allowed to execute if it comes from your own website or from https://example.com.
Any script loaded from another source will be blocked by the browser.

The stricter your policy becomes, the stronger your security.

Of course, finding the right balance between security and usability can take some effort.

If you're using Next.js, you can follow this guide to show you how to configure CSP in your application.
https://nextjs.org/docs/app/guides/content-security-policy

If you're using Angular, you'll also find official documentation covering CSP support.

This is the first post in a series about Frontend Security.

Over the next few posts, we'll explore more real-world security topics that every frontend developer should understand.

DEV Community