docs(adding content security policy to the advanced topics)

[the-zimmermann]

docs advanced » content security policy

I added information about CSP and how to integrate it with qwik. Added code examples and routing structure for middleware (plugins)

Overview

What is it?

• Feature / enhancement
• Bug
• Docs / tests / types / typos

Description

Adding information how to add content-security-policy to a qwik application using middleware (plugin)

Use cases and why

Every large website with security in mind will need to add CSP.

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[tzdesign]

If you like to add me as contributor, please use tzdesign. During the pr I used the wrong account 🤦‍♂️😅

[tzdesign]

@jordanw66 you are totally right. unsafe-inline is ignored if a nonce or a hash is present as well. It's just for backward compatibility.

Consider adding 'unsafe-inline' (ignored by browsers supporting nonces/hashes) to be backward compatible with older browsers.

But Google suggests adding it anyway when using strict-dynamic. My code in the PR is validated by this [evaluator](https://csp-evaluator.withgoogle.com/](https://csp-evaluator.withgoogle.com/).

I removed it from the list, as it's not necessary if you have a basic app.

[tzdesign]

@jordanw66 this is it, thanks!

I updated the PR. The https: part is definitely good, but will fail for everyone in preview.
However, your reasoning is totally understandable and we should definitely show good and complete examples in the docs.

It will be an advanced topic anyway.

[tzdesign]

@jordanw66 I'm new to vite and have no clue about the connection of vite and qwik.

It looks like the vite-server.ts adds plain scripts and maybe @manucorporat can answer the question of adding nonce to all the vite-scripts.

https://github.com/builderIO/qwik/blob/36391fd064cd9d9ced3ef82a2be7e360993c59d9/packages/qwik/src/optimizer/src/plugins/vite-server.ts#L312

Let me know what you thing about my suggestion:

Example

Please note that in dev mode the Vite scripts have no nonce and will report. For this reason, the example will not add csp in dev mode.
These are very good defaults with backwards compatibility, but please adapt them to your needs.
As this is an advanced topic, you should take a closer look at MDN or web.dev to get a better understanding of CSP.

import type { RequestHandler } from "@builder.io/qwik-city";
import { isDev } from "@builder.io/qwik/build";
export const onRequest: RequestHandler = event => {
  if (isDev) return; // Will not return CSP headers in dev mode
  const nonce = Date.now().toString(36); // Your custom nonce logic here
  event.sharedMap.set("@nonce", nonce);
  const csp = [
    `default-src 'self' 'unsafe-inline'`,
    `font-src 'self'`,
    `img-src 'self' 'unsafe-inline' data:`,
    `script-src script-src 'self' 'unsafe-inline' https: 'nonce-${nonce}' 'strict-dynamic'`,
    `style-src 'self' 'unsafe-inline'`,
    `frame-src 'self' 'nonce-${nonce}'`,
    `object-src 'none'`,
    `base-uri 'self'`,
  ];
  event.headers.set("Content-Security-Policy", csp.join("; "));
};

[tzdesign]

@tzdesign Looks like script-src is accidentally repeated on the line but otherwise it looks perfect to me, great job!

@jordanw66 Copy/Paste is the source of all evil.

I also added nonce to RouterOutlet, I'm not sure if this is the right way to do it either, but since it's a component now, it should work. See: 2be5a97

[tzdesign]

@zanettin First I was sure this PR is just docs, how should I rename this one here or should I split it in two PRs?
@manucorporat maybe you have time to take a look at the RouterOutlet to see if this is the way to go?

[zanettin]

imo we could keep it as it is within a single PR but i leave the decission to Manu 👍

[Scott-MacD]

Hey all, just providing some feedback as I'm currently trying to implement the same thing on an app we're in the early stages of and looking to port to qwik, however CSP is a necessity for us to do so.

I would lean towards having nonce as a prop for RouterOutlet rather than using useServerData, simply due to the fact you are relying on the user setting the same key for the sharedMap in their plugin as what is used in RouterOutlet. If you don't do so, I would make sure you document the fact that it needs to be name exactly that. I originally was using the name cspNonce for my key, as nonces are also often used for form submissions, etc.

The other issue/question I have is that is there a way to have hashes used for the styles as well? I see unsafe-inline is merely a fallback for script, but the current specified policy allows any injected css, which from my understanding removes one of the biggest benefits of having a CSP in the first place?

[tzdesign]

@Scott-MacD This is just a sample policy. You must implement the policy yourself.

The nonce in the server data has a specific fixed name that is already necessary to follow because of all the script tags qwik creates. I was wondering why we have to add it to the service worker, it makes it much easier to forget.

I don't mind either way, my pr was mostly for having docs about CSP so new people don't have to go to issues to find out about adding it to every request.

There is also a feature request to add it to styles, but that's not trivial. Even though most docs say it's not really necessary, I still want it in qwik.

[tzdesign]

Hi there,

thanks @DustinJSilk for fixing the popstate part.

What do you guys think about the docs? Is this a good first suggestion?
It's a complicated topic, so @jordanw66 and I agreed to add a disclaimer and links for more information.

Let me know if I need to do anything on my end.

[tzdesign]

@jordanw66 this sounds awesome. I will also add you to the contributions section of the docs.

I would change the whole block to this if you agree (the advice part sounds a bit like we are parenting on the devs 😅).
I also moved the dev mode info to the bottom to prioritize the info.

This template provides very permissive backward-compatible defaults.
It is highly recommended that you customize it to better suit your specific use case.
As this is an advanced topic, you should take a closer look at MDN or web.dev to get a better understanding of CSP.
Please note that in dev mode the Vite scripts have no nonce and will report. For this reason, the example will not add csp in dev mode.

[tzdesign]

@jordanw66 perfect! made the change. You know what to do next or who is gonna make the call?

[tzdesign]

@manucorporat who is reviewing docs? @jordanw66 I can't edit pr meta data, so it's up to the owners.

[shairez]

Great job @tzdesign and @jordanw66 !
And thanks for the feedback @Scott-MacD

The docs look great
One thing I'm confused about is this - 2be5a97

is it related to a different PR?

[tzdesign]

@shairez This is already merged into main, so I merged main and removed it from the changes.

@DustinJSilk took it out in a separate pr, which Manu already merged.

[shairez]

Thanks @tzdesign !
Merging!
Great job