Nuxt 3의 보안 향상

웹 애플리케이션은 매일 점점 더 복잡해지고 있습니다. 기밀 데이터를 저장하거나 사용자 정보를 즉시 처리할 수 있습니다. 이를 잘 처리하려면 개발자가 특정 보안 계층을 구현해야 합니다. 이는 애플리케이션의 보안을 강화하는 데 도움이 되는 속도 제한기 또는 패키지와 같은 여러 애플리케이션을 사용하여 달성할 수 있습니다.

이 기사에서는 간단한 블로그를 구축하든 복잡한 전자 상거래 상점을 구축하든 관계없이 보다 안전한 Nuxt 애플리케이션을 구축하는 데 도움이 되는 최근에 만든 새로운 Nuxt 모듈을 소개하고자 합니다. 이 모듈이 모든 보안 문제를 해결하지는 않는다는 점을 명심하십시오. 그것의 주요 아이디어는 안전한 응용 프로그램을 구축하는 데 도움이 되는 것이며 프로젝트에서 보안 계층을 구현하는 확실한 시작이 되어야 합니다.

또한 현재로서는 모듈이 매우 초기 단계에 있으므로 시간이 지남에 따라 더 많은 보안 권장 사항이 구현될 것임을 명심하십시오. 더 좋고 빠른 피드백을 받을 수 있도록 빨리 출시하고 싶었을 뿐입니다 :)

모듈을 확인할 수 있습니다here.

권장 사항이나 요청 사항이 있는 경우 주저하지 말고 여기 또는 다른 소셜 미디어에서 저에게 연락하십시오.

모듈 베이스

nuxt-security 모듈은 현재 두 가지 주요 측면을 기반으로 합니다. OWASP Top 10 for Node.js 및 Helmet.js .

여기에는 헬멧에 사용된 것과 동일한 보안 헤더를 설정하는 미들웨어가 있지만 속도와 요청 크기를 모두 제한하기 위한 OWASP의 권장 사항을 기반으로 하는 두 개의 사용자 정의 미들웨어도 있습니다. 이 두 미들웨어는 다음과 같은 경우 적절한 HTTP 코드로 오류를 트리거합니다.

[429] 하나의 IP 주소에서 너무 많은 요청이 있을 것입니다(DOS에 대한 보호 - 서비스 거부 공격)

[413] 요청 본문(일반 및 파일 모두)이 너무 커서 처리할 수 없음(서버 메모리를 소진하려는 공격으로부터 보호)

Helmet.js 보안 헤더의 기본값은 다음과 같습니다.

Content-Security-Policy: default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';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=15552000; 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

확장성과 사용자 정의 가능성을 염두에 두고 이 모듈을 개발했기 때문에 다음을 자유롭게 수행할 수 있습니다.

원치 않는 헤더 또는 미들웨어 비활성화

특정 경로에서만 작동하도록 미들웨어 구성

미들웨어 값 변경

용법

Nuxt 3 앱에 nuxt-security를 추가하는 것은 비교적 간단합니다. 이 모듈은 미들웨어에 대한 기본값/권장 값과 함께 사용될 때 구성이 필요하지 않지만 프로젝트 요구 사항에 가장 잘 맞는 값으로 자유롭게 실험할 수 있습니다.

앱에서 nuxt-security를 사용하려면 먼저 즐겨 사용하는 패키지 관리자를 사용하여 설치해 보겠습니다.

yarn add nuxt-security # yarn
npm i nuxt-security # npm

다음으로 modules의 nuxt.config.ts 배열에 추가해 보겠습니다.

// nuxt.config.js

{
  modules: [
    "nuxt-security",
  ],
}

그리고 그게 다야! 이제 헬멧 헤더와 리미터 미들웨어가 모두 활성화되어 앱을 더 안전하게 만드는 데 도움이 됩니다.

사용자 정의 옵션에 관심이 있는 경우 README을 참조하십시오.

요약

잘 했어! 좀 더 안전하게 만드는 데 도움이 되는 몇 가지 보안 미들웨어를 애플리케이션에 추가했습니다. 이것은 프로젝트를 안전하게 만드는 여정의 시작일 뿐이라는 점을 명심하세요 :)

권장 사항이나 요청 사항이 있는 경우 주저하지 말고 여기 또는 다른 소셜 미디어에서 저에게 연락하십시오.