When building modern web applications, security is not optional. One of the most important protections you can add is a Content Security Policy (CSP) .

But here’s the catch:

👉 CSP often blocks inline scripts and styles — which can break your app.

So how do you keep your app secure without disabling useful features ?

That’s where CSP nonce comes in - it allows you to safely execute inline code without opening security holes .

In this article, we’ll explore:

What CSP nonce is

What problem it solves

How to implement it

How it works automatically in Nuxt with nuxt-security

Best practices and common pitfalls

Let’s dive in.

🤔 What Is CSP Nonce?

A nonce (short for number used once ) is a unique, random value generated for each request .

It is used in CSP to explicitly allow trusted inline scripts or styles.

Example:

<script nonce= "abc123" > console .…