보안 헤더로 Gatsby 앱을 보호하는 방법

이것은 웹 애플리케이션 및 보안 헤더 구현에서 종종 간과되는 측면 중 하나입니다. 웹 애플리케이션에 잠금을 추가하는 간단하면서도 매우 강력한 방법입니다.

보안 팀은 사랑하고 개발자는 미워하는 보안 헤더는 웹 애플리케이션 사용자에게 무엇을 기대하고 무엇을 할 수 있는지 알려줍니다. 문제는 애플리케이션에 올바른 헤더가 있는지 확인하는 방법입니다.

나는 Gatsby를 사용하여 정적 사이트를 구축하고, 이런 방식으로 구축된 많은 사이트에 보안 헤더가 없다는 것을 발견했습니다. 나에게 있어 시운전 체크리스트의 일부는 애플리케이션이 나와 내 회사는 물론 사용자에게 최대한의 보안을 제공하는지 확인하는 것입니다. 이를 달성하는 좋은 방법은 사이트에 보안 헤더를 정의하는 것입니다.

먼저 보안 헤더가 무엇인지 살펴보고 이를 구체적으로 적용하는 방법과 마지막으로 애플리케이션을 테스트하는 방법을 살펴보겠습니다. 이 둘러보기가 모든 것을 포함하지는 않지만 시작하는 데 필요한 기본 사항을 제공할 수 있기를 바랍니다.

보안 헤더를 사용하는 이유는 무엇입니까?

우리는 보안 헤더를 사용하여 애플리케이션의 기대치를 브라우저에 알립니다. 다음과 같은 내용을 다룹니다.

사용하려는 외부 데이터 소스 및 스크립트 목록 정의(ChatBot, Google Analytics)
요청을 제시하는 방법(Iframe, 스크립트, 이미지)
응용 프로그램이 상호 작용하는 장치의 특성입니다. (지리적 위치, 마이크...)
이러한 헤더는 애플리케이션, 데이터 및 사용자를 공격으로부터 보호하는 데 도움이 됩니다. 이 기사의 대부분의 헤더는 XSS(교차 사이트 스크립팅)를 다룹니다. XSS는 유해한 코드를 애플리케이션에 주입할 때 사용되는 용어입니다.

모든 웹 응용 프로그램 프로젝트의 고전은 응용 프로그램에 대한 침투 테스트 또는 "침투 테스트"를 수행하기 위해 타사 서비스를 사용하는 것입니다. 테스트할 첫 번째 항목 중 하나는 보안 헤더입니다. 이것은 OWASP의 "Top 10"과 관련이 있습니다. 그래서 OWASP 보안 헤더 전용 프로젝트가 있습니다.

그러나 예를 들어 Gatsby 및 Prismic을 사용하여 사이트를 만드는 경우 정적 사이트를 생성하는 것이 왜 중요한가요? 사이트(또는 응용 프로그램)가 수행하는 작업에 따라 다릅니다. 고객 리뷰, 문의 양식, 전자 상거래 통합 등을 위한 외부 서비스를 추가하면 이러한 다른 추가 기능으로 인해 귀하, 귀하의 고객 및 귀하의 조직이 노출될 수 있습니다. 솔직히 외부 서비스를 추가하지 않아도 위험이 있습니다. 이 위험은 몇 가지 기본 보안 헤더를 사용하여 쉽게 줄일 수 있습니다.

Gatsby에 보안 헤더를 어떻게 설치합니까?

Gatsby와 같은 정적 사이트 생성기를 생각할 때 데이터 소스의 분리를 고려하고 소스 데이터에 액세스할 수 없기 때문에 안전하다고 결정합니다. 우리는 실제로 양식을 추가하고 다른 서비스를 연결하여 보다 완전한 애플리케이션을 만듭니다. 예를 들어 FormStack 또는 Snipcart를 애플리케이션에 추가하여 연락처 양식 또는 전자 상거래 기능을 추가합니다.

정적 사이트에서 여러 옵션을 사용할 수 있으며 그 중 일부는 애플리케이션을 호스팅하는 위치에 따라 다릅니다.

메타 http-equiv 및 gatsby-plugin-csp 플러그인을 통해
콘텐츠 보안 정책 관점에서 gatsby-plugin-csp 플러그인을 추가할 수 있습니다. 이 플러그인을 사용하면 CSP 헤더의 공통 부분을 구성할 수 있지만 애플리케이션을 빌드할 때 인라인 구성 요소 해시를 자동으로 추가할 수도 있습니다.

예를 들어, 다음은 내 사이트에서 실험하고 있던 gatsby-plugin-csp 구성(gatsby-config.js에 있음)입니다.

    {
       resolve: `gatsby-plugin-csp`,
       options: {
         mergeScriptHashes: false,
         mergeStyleHashes: false,
         directives: {
           'script-src': `'self' 'unsafe-inline' `,
           'style-src': "'self' 'unsafe-inline'",
           'font-src': `'self' data: db.onlinewebfonts.com`,
         },
       },
    },

내 기사에 대한 추가 정보 how to secure a web app ?