我們很高興地宣布Nosecone，這是一個(gè)開(kāi)源庫(kù)，旨在為使用以下內(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í)，複雜性就會(huì)增加。

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

• 具有實(shí)用預(yù)設(shè)值的型別安全 API。
• Next.js 的中間件適配器。
• SvelteKit 的配置掛鉤。
• 與 Bun、Deno 和 Node.js 中的 Web 伺服器輕鬆整合。

您可以將 Nosecone 作為獨(dú)立庫(kù)使用，或與 Arcjet 安全即程式碼 SDK 一起使用，以進(jìn)一步增強(qiáng)應(yīng)用程式對(duì)攻擊、機(jī)器人和垃圾郵件的防禦能力。

閱讀我們的快速入門(mén)指南並查看GitHub 上的源代碼。

安全標(biāo)頭

Nosecone 提供了通用的 JS API、Next.js 的中間件適配器以及 SvelteKit 的配置掛鉤來(lái)設(shè)定合理的預(yù)設(shè)值。您可以在本地測(cè)試它們並輕鬆調(diào)整配置作為程式碼。

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

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

預(yù)設(shè)值如下圖所示：

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 中間件適配器來(lái)設(shè)定預(yù)設(shè)標(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è)鉤子來(lái)設(shè)定 SvelteKit 中的預(yù)設(shè)安全標(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è)定上設(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 伺服器以直接設(shè)定安全回應(yīng)標(biāo)頭。

使用bun add nosecone進(jìn)行安裝，然後將其新增至您的伺服器。有關(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 並將其新增至您的伺服器。有關(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，它為我們?cè)贜osecone 上的工作提供了很多資訊。

使用 npm i nosecone 安裝，然後在 Node.js 伺服器上進(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 是開(kāi)源的，因此請(qǐng)隨時(shí)提交問(wèn)題以進(jìn)行任何改進(jìn)或更改。如果您需要協(xié)助，我們也可以使用 Discord！

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