Arcjet Nosecone: security headers for SvelteKit

Arcjet Nosecone is an open source library that helps set security headers such as Content-Security-Policy (CSP), Strict-Transport-Security (HSTS), and X-Content-Type-Options in JS applications built with Bun, Deno, Next.js, Node.js, or SvelteKit.

What are Arcjet utilities?

Arcjet utilities are independent libraries that do not require the use of the main Arcjet SDK - they can be used with or without other Arcjet rules.

We take the pain out of implementing security tasks through these utilities to provide a security as code approach to developer-first security.

Supported headers

Nosecone helps you add and configure these headers:

• Content-Security-Policy (CSP)
• Cross-Origin-Embedder-Policy (COEP)
• Cross-Origin-Opener-Policy
• Cross-Origin-Resource-Policy
• Origin-Agent-Cluster
• Referrer-Policy
• Strict-Transport-Security (HSTS)
• X-Content-Type-Options
• X-DNS-Prefetch-Control
• X-Download-Options
• X-Frame-Options
• X-Permitted-Cross-Domain-Policies
• X-XSS-Protection

For full details on each option, see the reference guide.

Note

If you are using Express, NestJS, or Remix we recommend using the excellent Helmet library, which informed much of our work on Nosecone.

Quick start

This guide shows you how to add our recommended default security headers.

1. Install Nosecone

In your project root, install the Arcjet Nosecone library for your framework:

2. Configure your application

Nosecone applies headers to all your routes with hooks in your SvelteKit application.

SvelteKit provides the Content-Security-Policy header itself, so Nosecone helps you to configure it.

Update your svelte.config.js to configure csp:

svelte.config.js

import adapter from "@sveltejs/adapter-auto";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import { csp } from "@nosecone/sveltekit"

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),

  kit: {
    // Apply CSP with Nosecone defaults
    csp: csp(),
    adapter: adapter(),
  },
};

export default config;

3. Run your application

4. Inspect the headers

The default headers apply a pragmatic set of security headers to your application, but may break things (particularly the CSP header).

We recommend you test your application thoroughly and tweak the settings to ensure it continues to work as expected.

Inspect the headers with the curl command:

curl -I -X GET localhost:5173

The printed headers look something like this:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
content-length: 1475
content-security-policy: child-src 'none'; default-src 'self'; frame-src 'none'; worker-src 'self'; connect-src 'self'; font-src 'self'; img-src 'self' blob: data:; manifest-src 'self'; media-src 'self'; object-src 'none'; script-src 'self' 'nonce-RsMu23BBsCD1PV101d7Prg=='; style-src 'self' 'unsafe-inline'; base-uri 'none'; form-action 'self'; frame-ancestors 'none'
content-type: text/html
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: same-origin
etag: "bz71zn"
origin-agent-cluster: ?1
referrer-policy: no-referrer
strict-transport-security: max-age=31536000; includeSubDomains
x-content-type-options: nosniff
x-dns-prefetch-control: off
x-download-options: noopen
x-frame-options: SAMEORIGIN
x-permitted-cross-domain-policies: none
x-sveltekit-page: true
x-xss-protection: 0
Date: Wed, 27 Nov 2024 15:23:13 GMT
Connection: keep-alive
Keep-Alive: timeout=5

What next?

Nosecone reference Details about each security header and how to configure them.

Explore

Arcjet can protect your entire app or individual routes with a few lines of code. Using the main Arcjet SDK you can set up bot protection, rate limiting for your API, minimize fraudulent registrations with the signup form protection and more.

Example apps See the example apps.

Learn how Arcjet works Arcjet's architecture.

SDK reference SvelteKit SDK reference guide.

Get help

Need help with anything? Email support@arcjet.com to get support from our engineering team, join our Discord, or open an issue on GitHub.

Discussion