We’re excited to announce Nosecone, an open-source library designed to make setting security headers—like Content Security Policy (CSP) and HTTP Strict Transport Security (HSTS)—straightforward for applications built with Next.js, SvelteKit, and other JavaScript frameworks using Bun, Deno, or Node.js.

While you can always set headers manually, the complexity grows when you need environment-specific configurations, dynamic nonces for inline scripts or styles, or have many variations that need custom configuration.

Whether you’re adapting to the stricter security header requirements of PCI DSS 4.0 which comes into force in 2025 or are simply looking to enhance your app’s security, Nosecone offers:

• A type-safe API with pragmatic defaults.
• Middleware adapters for Next.js.
• Config hooks for SvelteKit.
• Easy integration with web servers in Bun, Deno, and Node.js.

You can use Nosecone as a standalone library or alongside the Arcjet security as code SDK to further strengthen your app’s defenses against attacks, bots, and spam.

Read our quick start guide and check the source code on GitHub.

Security headers

Nosecone provides a general JS API, a middleware adapter for Next.js, and config hooks for SvelteKit to set sensible defaults. You can test them locally and easily adjust the configuration as code.

Nosecone is open source and supports the following security 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

The defaults look like this:

HTTP/1.1 200 OK
content-security-policy: base-uri 'none'; child-src 'none'; connect-src 'self'; default-src 'self'; font-src 'self'; form-action 'self'; frame-ancestors 'none'; frame-src 'none'; img-src 'self' blob: data:; manifest-src 'self'; media-src 'self'; object-src 'none'; script-src 'self'; style-src 'self'; worker-src 'self'; upgrade-insecure-requests;
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: same-origin
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-xss-protection: 0
Content-Type: text/plain
Date: Wed, 27 Nov 2024 21:05:50 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

Setting Next.js security headers

Nosecone provides a Next.js middleware adapter to set the default headers.

Install with npm i @nosecone/next and then set up this middleware.ts file. See the docs for details.

import { createMiddleware } from "@nosecone/next";

// Remove your middleware matcher so Nosecone runs on every route.

export default createMiddleware();

Setting SvelteKit security headers

Nosecone provides a CSP config and a hook to set the default security headers in SvelteKit.

Install with npm i @nosecone/sveltekit and then set up this svelte.config.js file. See the docs for details.

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;

With the CSP set on the SvelteKit config, you can then set up the other security headers as a hook in src/hooks.server.ts

HTTP/1.1 200 OK
content-security-policy: base-uri 'none'; child-src 'none'; connect-src 'self'; default-src 'self'; font-src 'self'; form-action 'self'; frame-ancestors 'none'; frame-src 'none'; img-src 'self' blob: data:; manifest-src 'self'; media-src 'self'; object-src 'none'; script-src 'self'; style-src 'self'; worker-src 'self'; upgrade-insecure-requests;
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: same-origin
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-xss-protection: 0
Content-Type: text/plain
Date: Wed, 27 Nov 2024 21:05:50 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

Setting Bun security headers

Nosecone can be connected to your Bun web server to directly set the security response headers.

Install with bun add nosecone and then add this to your server. See the docs for details.

import { createMiddleware } from "@nosecone/next";

// Remove your middleware matcher so Nosecone runs on every route.

export default createMiddleware();

Setting Deno security headers

Nosecone works with Deno serve to set the security headers. Install deno add npm:nosecone and then add this to your server. See the docs for details.

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;

Setting Node.js security headers

Nosecone can also work with Node.js applications, but if you are using Express.js (by itself or with Remix) then we recommend using Helmet, which informed much of our work on Nosecone.

Install with npm i nosecone and then set this on your Node.js server. See the docs for details.

import { createHook } from "@nosecone/sveltekit";
import { sequence } from "@sveltejs/kit/hooks";

export const handle = sequence(createHook());

Contributing

Nosecone is open source so feel free to submit issues for any improvements or changes. We’re also on Discord if you need help!

The above is the detailed content of Nosecone: a library for setting security headers in Next.js, SvelteKit, Node.js, Bun, and Deno. For more information, please follow other related articles on the PHP Chinese website!