sveltekit-helmet Svelte Themes

Sveltekit Helmet

Important security headers for SvelteKit

sveltekit-helmet

sveltekit-helmet is a wrapper for helmet to work with SvelteKit. It provides important security headers to make your app more secure by default.

Installation

npm i sveltekit-helmet

# or:

yarn add sveltekit-helmet

Usage

Usage is the same as helmet, see the helmet documentation for more information.

[!WARNING]
Hot reload is blocked by default, you need to allow scriptSrc's 'unsafe-inline' directive to use it.

Just add the following to your src/hooks.server.ts:

import helmet from "sveltekit-helmet";

// With default helmet options
export const handle = helmet();

// With custom helmet options
export const handle = helmet({
  contentSecurityPolicy: {
    directives: {
      scriptSrc: [
        "'self'",
        "'unsafe-inline'", // Allow SvelteKit hot reload
      ],
    },
  },
});

// Works with other middlewares
import { sequence } from "@sveltejs/kit/hooks";
export const handle = sequence(helmet(), fooMiddleware, barMiddleware);

Currently, only the full helmet middleware is supported, you can just disable unwanted rules in options instead of using the individual middleware.

Versioning

sveltekit-helmet currently only supports SvleteKit v2.

If you are using SvelteKit v1, you can open an issue and I will consider adding support for it.

Top categories

Loading Svelte Themes