Securekit

Secure your sveltekit app using http response headers

Installation

bun install -d @islamzaoui/securekit

you can also use other package managers like pnpm or yarn

Usage

default headers

this will add the default headers to the response, this will be enough to get your website A grade in security headers

// src/hooks.server.ts
import { securityHeaders } from '@islamzaoui/securekit';

export const handle = securityHeaders().handle;

with custom headers

you can customize the headers you want to set, and override any of the headers available in response headers.

// src/hooks.server.ts
import { securityHeaders } from '@islamzaoui/securekit';

export const handle = securityHeaders({
    headers: {
        'Access-Control-Allow-Origin': 'https://yoursite.com',
        'X-Frame-Options': 'DENY',
        'X-Content-Type-Options': 'nosniff',
        'Referrer-Policy': 'strict-origin-when-cross-origin',
        'Permissions-Policy': 'geolocation=(), camera=(), microphone=()',
        ....
    }
}).handle;

with multiple handles

you can use sequence to sequencing other handles with securityHeaders.

// src/hooks.server.ts
import { securityHeaders } from '@islamzaoui/securekit';
import { sequence } from '@sveltejs/kit/hooks';

export const handle = sequence(
    securityHeaders({
        headers: {
            ...
        }
    }).handle,
    yourOtherHandle
);

delete headers

set the value to null to delete the header.

// src/hooks.server.ts
import { securityHeaders } from '@islamzaoui/securekit';

export const handle = securityHeaders({
    headers: {
        'Access-Control-Allow-Origin': 'https://yoursite.com',
        'x-sveltekit-page': null, // this will be deleted from response haeders
    },
}).handle;

Content Security Policy header

your can use csp option in securityHeaders to set the Content-Security-Policy header directives.

Note:

config.csp directives will override any existing directives in the Content-Security-Policy header.
config.csp directives will extend the existing directives in svelte.config.js

// src/hooks.server.ts
import { securityHeaders } from '@islamzaoui/securekit';

export const handle = securityHeaders({
    headers:{
        ...
    },
    csp: {
        directives: {
            'script-src': ["'self'",'https://example.com'],
            'style-src': ["'self'", 'https://example.com'],
            ...
        }
    }
}).handle;

Debugging

you can set debug option to true in securityHeaders to enable debug logging on every request.

or you can use security headers to scan your website in production.

Roadmap

See the open issues for a list of proposed features (and known issues).

Acknowledgements

sveltekit-security-headers

License

MIT License