A+ CSP scan by Mozilla Observatory

Have you heard about the Mozilla Observatory? It's a pretty cool tool for scanning Content Security Policy (CSP).

You know what's even cooler? Next.js makes cybersecurity a breeze. There are a couple of ways you can add CSP to your pages. The easiest way is to use meta tags at the page level. But if you want to step up your game, you can add CSP in your HTTP requests. That way, you won't have to worry about getting hacked by some newbie.

Here's a fun fact: some CSP directives are ignored if you only set them in the META HTML Header. For example, the X-Frame-Options directive won't work unless you include it in the header response. If you want to only allow your site to be framed by itself, you can use the following directives:

Content-Security-Policy: frame-ancestors 'self' X-Frame-Options: SAMEORIGIN

In Next.js, we can override the default Document in our web app by creating a custom document class. Inside that class, we can set the Content-Security-Policy header using the generate CSP function and the provided nonce.

If you're interested in learning more, you can check out the Mozilla Observatory. It has been a great resource for over 240,000 websites, helping developers, system administrators, and security professionals configure their sites safely and securely.

You can explore further at:

Have fun exploring and stay safe!