私たちは、Content Security Policy (CSP) や HTTP Strict Transport Security (HSTS) などのセキュリティ ヘッダーを簡単に設(shè)定できるように設(shè)計(jì)されたオープンソース ライブラリである Nosecon を発表できることを嬉しく思います。 Next.js、SvelteKit、および Bun、Deno、または Node.js を使用するその他の JavaScript フレームワーク

ヘッダーはいつでも手動(dòng)で設(shè)定できますが、環(huán)境固有の構(gòu)成、インライン スクリプトやスタイルの動(dòng)的な nonce が必要な場合、またはカスタム構(gòu)成が必要なバリエーションが多數(shù)ある場合は、複雑さが増します。

2025 年に施行される PCI DSS 4.0 のより厳格なセキュリティ ヘッダー要件に適応している場合でも、単にアプリのセキュリティを強(qiáng)化したい場合でも、Nosecon は以下を提供します。

• 実用的なデフォルトを備えたタイプセーフな API。
• Next.js 用のミドルウェア アダプター
• SvelteKit の設(shè)定フック。
• Bun、Deno、Node.js の Web サーバーと簡単に統(tǒng)合できます。

Nosecon をスタンドアロン ライブラリとして、または Arcjet Security as Code SDK と一緒に使用して、攻撃、ボット、スパムに対するアプリの防御をさらに強(qiáng)化できます。

クイック スタート ガイドを読み、GitHub のソース コードを確認(rèn)してください。

セキュリティヘッダー

Nosecone は、一般的な JS API、Next.js 用のミドルウェア アダプター、および適切なデフォルトを設(shè)定するための SvelteKit 用の構(gòu)成フックを提供します。これらをローカルでテストし、コードとして構(gòu)成を簡単に調(diào)整できます。

Nosecon はオープンソースであり、次のセキュリティ ヘッダーをサポートしています:

• コンテンツ セキュリティ ポリシー (CSP)
• クロスオリジンエンベッダーポリシー (COEP)
• クロスオリジンオープナーポリシー
• クロスオリジンリソースポリシー
• オリジン-エージェント-クラスター
• リファラーポリシー
• 厳格なトランスポート セキュリティ (HSTS)
• X-Content-Type-Options
• X-DNS-プリフェッチ制御
• X-ダウンロード オプション
• X フレーム オプション
• X-許可されたクロスドメインポリシー
• X-XSS 保護(hù)

デフォルトは次のようになります:

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

Next.js セキュリティ ヘッダーの設(shè)定

Nosecon は、デフォルトのヘッダーを設(shè)定するための Next.js ミドルウェア アダプターを提供します。

npm i @nosecone/next を使用してインストールし、この middleware.ts ファイルをセットアップします。詳細(xì)については、ドキュメントを參照してください。

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

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

export default createMiddleware();

SvelteKit セキュリティ ヘッダーの設(shè)定

Nosecone は、SvelteKit のデフォルトのセキュリティ ヘッダーを設(shè)定するための CSP 構(gòu)成とフックを提供します。

npm i @nosecone/sveltekit を使用してインストールし、この svelte.config.js ファイルをセットアップします。詳細(xì)については、ドキュメントを參照してください。

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 構(gòu)成で CSP を設(shè)定すると、他のセキュリティ ヘッダーを src/hooks.server.ts のフックとして設(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

Bun セキュリティヘッダーの設(shè)定

Nosecone を Bun Web サーバーに接続して、セキュリティ応答ヘッダーを直接設(shè)定できます。

パンとノーズコーンを追加してインストールし、これをサーバーに追加します。詳細(xì)については、ドキュメントを參照してください。

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

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

export default createMiddleware();

Deno セキュリティヘッダーの設(shè)定

Nosecone は Deno サーブと連攜してセキュリティ ヘッダーを設(shè)定します。 deno add npm:nosecon をインストールし、これをサーバーに追加します。詳細(xì)については、ドキュメントを參照してください。

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;

Node.jsセキュリティヘッダーの設(shè)定

Nosecon は Node.js アプリケーションでも動(dòng)作しますが、Express.js を (単獨(dú)で、または Remix と組み合わせて) 使用している場合は、Helmet を使用することをお?jiǎng)幛幛筏蓼?。これ?Nosecon の作業(yè)の多くに影響を與えました。

npm i namescone を使用してインストールし、これを Node.js サーバーに設(shè)定します。詳細(xì)については、ドキュメントを參照してください。

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

export const handle = sequence(createHook());

貢獻(xiàn)する

Nosecon はオープンソースなので、改善や変更が必要な場合は、お?dú)葺Xに問題を送信してください。サポートが必要な場合は、Discord もご利用ください!

以上がNosecon: Next.js、SvelteKit、Node.js、Bun、および Deno でセキュリティ ヘッダーを設(shè)定するためのライブラリの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。