Nosecon: Next.js、SvelteKit、Node.js、Bun、および Deno でセキュリティ ヘッダーを設定するためのライブラリ

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

ヘッダーはいつでも手動で設定できますが、環境固有の構成、インライン スクリプトやスタイルの動的な nonce が必要な場合、またはカスタム構成が必要なバリエーションが多数ある場合は、複雑さが増します。

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

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

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

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

セキュリティヘッダー

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

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

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

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

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 セキュリティ ヘッダーの設定

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

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

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

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

export default createMiddleware();

SvelteKit セキュリティ ヘッダーの設定

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

npm i @nosecone/sveltekit を使用してインストールし、この 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;

SvelteKit 構成で CSP を設定すると、他のセキュリティ ヘッダーを 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

Bun セキュリティヘッダーの設定

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

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

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

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

export default createMiddleware();

Deno セキュリティヘッダーの設定

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

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セキュリティヘッダーの設定

Nosecon は Node.js アプリケーションでも動作しますが、Express.js を (単独で、または Remix と組み合わせて) 使用している場合は、Helmet を使用することをお勧めします。これは Nosecon の作業の多くに影響を与えました。

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

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

export const handle = sequence(createHook());

貢献する

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

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