我們很高興地宣布 Nosecone，這是一個(gè)開源庫，旨在為使用以下內(nèi)容構(gòu)建的應(yīng)用程序直接設(shè)置安全標(biāo)頭（例如內(nèi)容安全策略 (CSP) 和 HTTP 嚴(yán)格傳輸安全 (HSTS)） Next.js、SvelteKit 和其他使用 Bun、Deno 或 Node.js 的 JavaScript 框架。

雖然您始終可以手動(dòng)設(shè)置標(biāo)頭，但當(dāng)您需要特定于環(huán)境的配置、內(nèi)聯(lián)腳本或樣式的動(dòng)態(tài)隨機(jī)數(shù)，或者有許多需要自定義配置的變體時(shí)，復(fù)雜性就會(huì)增加。

無論您是要適應(yīng) 2025 年生效的 PCI DSS 4.0 更嚴(yán)格的安全標(biāo)頭要求，還是只是希望增強(qiáng)應(yīng)用程序的安全性，Nosecone 都可以提供：

• 具有實(shí)用默認(rèn)值的類型安全 API。
• Next.js 的中間件適配器。
• SvelteKit 的配置掛鉤。
• 與 Bun、Deno 和 Node.js 中的 Web 服務(wù)器輕松集成。

您可以將 Nosecone 作為獨(dú)立庫使用，或與 Arcjet 安全即代碼 SDK 一起使用，以進(jìn)一步增強(qiáng)應(yīng)用程序?qū)?、機(jī)器人和垃圾郵件的防御能力。

閱讀我們的快速入門指南并查看GitHub 上的源代碼。

安全標(biāo)頭

Nosecone 提供了通用的 JS API、Next.js 的中間件適配器以及 SvelteKit 的配置掛鉤來設(shè)置合理的默認(rèn)值。您可以在本地測試它們并輕松調(diào)整配置作為代碼。

Nosecone 是開源的，支持以下安全標(biāo)頭：

• 內(nèi)容安全策略 (CSP)
• 跨源嵌入器策略 (COEP)
• 跨源開啟者政策
• 跨源資源策略
• 起源-代理-集群
• 推薦人政策
• 嚴(yán)格傳輸安全 (HSTS)
• X-內(nèi)容類型-選項(xiàng)
• X-DNS-預(yù)取-控制
• X-下載選項(xiàng)
• X 框架選項(xiàng)
• X 允許的跨域策略
• X-XSS-保護(hù)

默認(rèn)值如下所示：

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

設(shè)置 Next.js 安全標(biāo)頭

Nosecone 提供了一個(gè) Next.js 中間件適配器來設(shè)置默認(rèn)標(biāo)頭。

使用 npm i @nosecone/next 安裝，然后設(shè)置此 middleware.ts 文件。有關(guān)詳細(xì)信息，請(qǐng)參閱文檔。

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

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

export default createMiddleware();

設(shè)置 SvelteKit 安全標(biāo)頭

Nosecone 提供了一個(gè) CSP 配置和一個(gè)鉤子來設(shè)置 SvelteKit 中的默認(rèn)安全標(biāo)頭。

使用 npm i @nosecone/sveltekit 安裝，然后設(shè)置此 svelte.config.js 文件。有關(guān)詳細(xì)信息，請(qǐng)參閱文檔。

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;

在 SvelteKit 配置上設(shè)置 CSP 后，您可以將其他安全標(biāo)頭設(shè)置為 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

設(shè)置 Bun 安全標(biāo)頭

Nosecone 可以連接到您的 Bun Web 服務(wù)器以直接設(shè)置安全響應(yīng)標(biāo)頭。

使用bun add nosecone進(jìn)行安裝，然后將其添加到您的服務(wù)器。有關(guān)詳細(xì)信息，請(qǐng)參閱文檔。

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

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

export default createMiddleware();

設(shè)置 Deno 安全標(biāo)頭

Nosecone 與 Denoserve 一起設(shè)置安全標(biāo)頭。安裝 eno add npm:nosecone 并將其添加到您的服務(wù)器。有關(guān)詳細(xì)信息，請(qǐng)參閱文檔。

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;

設(shè)置 Node.js 安全標(biāo)頭

Nosecone 也可以與 Node.js 應(yīng)用程序一起使用，但如果您使用 Express.js（單獨(dú)或與 Remix 一起使用），那么我們建議使用 Helmet，它為我們在 Nosecone 上的工作提供了很多信息。

使用 npm i nosecone 安裝，然后在 Node.js 服務(wù)器上進(jìn)行設(shè)置。有關(guān)詳細(xì)信息，請(qǐng)參閱文檔。

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

export const handle = sequence(createHook());

貢獻(xiàn)

Nosecone 是開源的，因此請(qǐng)隨時(shí)提交問題以進(jìn)行任何改進(jìn)或更改。如果您需要幫助，我們也可以使用 Discord！

以上是Nosecone：用于在 Next.js、SvelteKit、Node.js、Bun 和 Deno 中設(shè)置安全標(biāo)頭的庫的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！