Nosecone: Next.js, SvelteKit, Node.js, Bun 및 Deno에서 보안 헤더를 설정하기 위한 라이브러리

CSP(콘텐츠 보안 정책) 및 HSTS(HTTP Strict Transport Security)와 같은 보안 헤더 설정을 간편하게 수행하도록 설계된 오픈 소스 라이브러리인 Nosecone을 발표하게 되어 기쁘게 생각합니다. Bun, Deno 또는 Node.js를 사용하는 Next.js, SvelteKit 및 기타 JavaScript 프레임워크.

언제든지 헤더를 수동으로 설정할 수 있지만 환경별 구성, 인라인 스크립트 또는 스타일에 대한 동적 nonce가 필요하거나 사용자 정의 구성이 필요한 다양한 변형이 필요한 경우 복잡성이 커집니다.

2025년에 시행되는 PCI DSS 4.0의 더욱 엄격한 보안 헤더 요구 사항에 적응하고 있거나 단순히 앱의 보안을 강화하려는 경우 Nosecone은 다음을 제공합니다.

• 실용적인 기본값을 갖춘 유형이 안전한 API.
• Next.js용 미들웨어 어댑터
• SvelteKit용 구성 후크
• Bun, Deno 및 Node.js의 웹 서버와 쉽게 통합됩니다.

Nosecone을 독립형 라이브러리로 사용하거나 Arcjet 보안과 함께 코드 SDK로 사용하여 공격, 봇, 스팸에 대한 앱 방어를 더욱 강화할 수 있습니다.

빠른 시작 가이드를 읽고 GitHub에서 소스 코드를 확인하세요.

보안 헤더

Nosecone은 일반 JS API, Next.js용 미들웨어 어댑터, SvelteKit용 구성 후크를 제공하여 합리적인 기본값을 설정합니다. 로컬에서 테스트하고 코드로 구성을 쉽게 조정할 수 있습니다.

Nosecone은 오픈 소스이며 다음 보안 헤더를 지원합니다.

• 콘텐츠 보안 정책(CSP)
• COEP(교차 출처 삽입 정책)
• 교차 출처-개방자 정책
• 교차 출처-리소스 정책
• 원본-에이전트-클러스터
• 리퍼러 정책
• 엄격한 전송 보안(HSTS)
• X-콘텐츠 유형 옵션
• X-DNS-프리페치 제어
• X-다운로드 옵션
• X-프레임 옵션
• X-Permitted-교차 도메인 정책
• 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 보안 헤더 설정

Nosecone은 기본 헤더를 설정할 수 있는 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 웹 서버에 연결하여 보안 응답 헤더를 직접 설정할 수 있습니다.

bun add nosecone을 사용하여 설치한 다음 이를 서버에 추가하세요. 자세한 내용은 문서를 참조하세요.

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

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

export default createMiddleware();

Deno 보안 헤더 설정

Nosecone은 Deno 서브와 함께 작동하여 보안 헤더를 설정합니다. deno add npm:nosecone을 설치한 다음 이를 서버에 추가하세요. 자세한 내용은 문서를 참조하세요.

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 보안 헤더 설정

Nosecone은 Node.js 애플리케이션과도 작동할 수 있지만 Express.js를 단독으로 사용하거나 Remix와 함께 사용하는 경우 Nosecone 작업에 많은 정보를 제공하는 Helmet을 사용하는 것이 좋습니다.

npm i nosecone으로 설치한 다음 Node.js 서버에 설정하세요. 자세한 내용은 문서를 참조하세요.

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

export const handle = sequence(createHook());

기여

Nosecone은 오픈 소스이므로 개선이나 변경 사항이 있으면 언제든지 문제를 제출해 주세요. 도움이 필요하시면 Discord에서도 확인하실 수 있습니다!

위 내용은 Nosecone: Next.js, SvelteKit, Node.js, Bun 및 Deno에서 보안 헤더를 설정하기 위한 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!