Guides
Creating your Policy

Creating your policy

This will hopefully help you build your CSP policy.

Default Policies

We do this so you don't have to worry about the basics. These are merged with your custom policies.

"default-src": ["'self'"],
"img-src": ["'self'", "data:"],
"script-src-elem": ["'self'"],
"style-src-elem": ["'self'"],

Typical use cases

Third party javascript

Third party code like, Google Analytics, Hotjar, etc. are common in most websites. You can use the script-src directive to allow these scripts to run.

⚠️

When doing this you are essentially trusting third party code to run on your website. Make sure you trust the third party and that they are not compromised.

 
import { defineConfig, PluginOption } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    csp({
        policy: {
            "script-src": ["https://www.google-analytics.com"],
        }
    }),
  ],
});

Targetting a specific domain is a good way to ensure that only scripts from that domain are allowed to run. Sometimes its even better to be more specific and target a specific path on that domain, aslong as the path is unique and constant.

Third party css

Third party styles, that are injected at runtime are also common in most websites. You can use the style-src directive to allow these styles to be applied.

 
import { defineConfig, PluginOption } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    csp({
        policy: {
            "style-src": ["https://example.com/styles/main.css"],
        }
    }),
  ],
});

Full list of directives

The full list can be found here (opens in a new tab)

MPAAPI