Home Blogs Layer0의 EdgeJS를 사용하여 사용자 지정 보안 헤더 구성
Applications

Layer0의 EdgeJS를 사용하여 사용자 지정 보안 헤더 구성

About The Author

Outline

보안 헤더 구현은 보안 침해 및 데이터 도난의 수가 매일 급격히 증가함에 따라 매우 중요해졌습니다. 보안 헤더는 솔루션의 구현하기 쉬운 부분을 제공합니다. 특정 HTTP 헤더를 전달하기만 하면 XSS, 코드 인젝션, 클릭재킹 등과 같은 일반적인 공격으로부터 웹사이트를 보호할 수 있습니다.

보안 헤더란 무엇입니까?

웹 응용 프로그램은 보안 헤더라고 하는 침해 또는 클라이언트측 취약점으로부터 웹 사이트를 보호하기 위해 브라우저에 특수 명령을 보낼 수 있습니다.

사용자가 브라우저에서 웹 사이트를 방문하면 서버는 HTTP 응답 헤더로 응답합니다. 메타데이터로 구성된 이러한 헤더는 클라이언트 및 서버와 정보를 공유합니다. 이 공유 정보는 브라우저가 웹 사이트와 상호 작용하는 방법을 정의합니다. 보안 헤더는 다양한 웹 앱 취약점과 위협으로부터 강력한 보호 기능을 제공합니다.

이 블로그는 다음과 같은 중요한 보안 헤더를 분류합니다.

  • 콘텐츠 보안 정책(CSP)
  • X-콘텐츠-유형-옵션
  • X-프레임 옵션
  • 출처 간 리소스 정책(CORP)
  • COEP(Cross-Origin Embedder Policy)
  • 출처 간 개시 정책(COOP)
  • 참조자 정책
  • 사용 권한-정책
  • HTTP HSTS(엄격한 전송 보안)

보안 헤더의 중요성

HTTP 보안 헤더는 웹사이트 보안의 기본적인 부분이지만 상위 100만 개 웹사이트 중 CSP(Content Security Policy)를 구현한 사이트는 1.6%에 불과하며 CSP-Report-Only를 구현한 사이트는 0.2%에 불과합니다.

충격적이지 않습니까?! CSP HTTP 헤더가 없기 때문에 XSS(크로스 사이트 스크립팅) 및 기타 클라이언트측 인젝션 공격에 대한 방어 메커니즘이 중단됩니다. British Airways의 데이터 침해는 고객 측 보안, 이름, 주소, 이메일 주소, 신용 카드 번호, 유효 기간 및 380,000명의 고객에 대한 카드 보안 코드가 노출되었으며, 15일 동안 발견되지 않았습니다.

Layer0의 EdgeJS로 보안 추가

Layer0의 배포 플랫폼을 사용하면 TLS와 같은 항목이 각 배포 링크에 대해 자동으로 구성되므로 개발자는 기본적으로 안전하게 배송할 수 있습니다. 이 블로그에서는 중요한 보안 헤더와 예제를 면밀히 살펴보고 Layer0에서 경로 구성을 사용하여 웹 사이트를 얼마나 빨리 보호할 수 있는지 보여줍니다.

Edgio로 보안 헤더 시작하기

콘텐츠 보안 정책(CSP)

CSP가 허용되지 않는 오리진에서 리소스 로드를 방지하는 방법

Content-Security-Policy는 허용된 특정 오리진에서 스크립트, 스타일, 이미지, 글꼴 및 미디어가 로드(실행)되는 것을 제한하여 XSS(사이트 간 스크립팅) 공격을 방지하는 추가 계층을 제공합니다. 백엔드의 보안 수준에 관계없이 공격자가 서버가 아닌 브라우저에서 실행되는 코드를 공격할 수 있으면 사용자 세션 데이터가 손상되고 기밀 정보가 노출됩니다. British Airways의 데이터 침해와 같은 많은 사례 중 하나는 Ticketmaster의 결제 모듈에 대한 MageCart 공격입니다. 티켓 마스터 위반으로 신용 카드 도난의 40,000 피해자가 발생했으며 적발 전에 5 개월 동안 활동했습니다! 브라우저 내에 양식 스키밍 스크립트를 삽입하면 됩니다.

const { Router } = Require(‘@layer0/core/router’) const ContentSecurityPolicy = ` default -src ‘self’; script-src ‘self”unsafe-eval”unsafe-inline’ *.layer0.co; style-src ‘self”unsafe-inline’ *.googleapis.com .gstatic.com; img-src * blob: 데이터:; media-src New Router() .get(“/:route”, ({ setResponseHeader }) => { setResponseHeader(“Content-Security-Policy”, ContentSecurityPolicy.replace(/\n/g, “”) })

Content-Security-Policy는 다음과 같은 기능을 제공합니다.

  1. XSS(사이트 간 스크립팅) 공격 극복
  2. 클릭재킹 방지
  3. CSP 규칙에 위반 (s) 보고

X-콘텐츠-유형-옵션

X-Content-Type-Options를 구성하여 MIME-Type 검색을 방지하는 방법

X-Content-Type-Options 헤더는 Content-Type 헤더에 지정된 MIME(Multipurpose Internet Mail Extensions, 파일 형식의 식별자) 유형을 엄격하게 준수해야 함을 나타냅니다. MIME 형식 스니핑 을 사용하면 이미지 업로드 등의 작업에서 X-Content-Type-Options 헤더가 실행되는 악의적인 실행 파일을 실행할 수 있습니다.

const { Router } = Require(‘@layer0/core/router’) new Router() .get(“/:route”, ({ setResponseHeader }) => { setResponseHeader(“X-Content-Type-Options”, “nosniff”) })

X-프레임 옵션

X-프레임 옵션 헤더

X-Frame-Options 헤더는 브라우저가 frame, iframe, embed 또는 object (s)에서 페이지를 렌더링할 수 있도록 허용해야 하는지 여부를 나타냅니다. 클릭 재킹 공격. DENY 또는 SAMEORIGIN으로 설정되었는지 여부는 해당 콘텐츠가 다른 사이트에 포함되지 않도록 하거나 동일한 오리진을 가진 사이트에만 포함되도록 합니다.

const { Router } = Require(‘@layer0/core/router’) new Router() .get(“/:route”, ({ setResponseHeader }) => { setResponseHeader(“X-Frame-Options”, “SAMEORIGIN”) })

X-Frame-Options는 다음과 같은 기능을 제공합니다.

  1. 클릭재킹 공격 방지
  2. 브라우저에서 페이지를 렌더링할 수 있는지 여부를 나타냅니다. <프레임>, <iFrame>, <임베드> 또는 <개체>

출처 간 리소스 정책(CORP)

Corp는 요청된 리소스(예: API 응답)의 특정 출처 간 또는 사이트 간 임베딩으로부터 서버를 보호할 수 있습니다. 또한 Spectre 와 같은 추측성 부채널 공격을 방지합니다.

const { Router } = Require(‘@layer0/core/router’) new Router() .get(“/:route”, ({ setResponseHeader }) => { setResponseHeader(“Cross-Origin-Resource-Policy”, “Same

Cross-Origin Resource Policy는 모든 리소스를 보호할 수 있는 옵트인 응답 헤더입니다. 브라우저가 MIME 유형을 스니핑할 필요가 없습니다. MDN 문서

COEP(Cross-Origin Embedder Policy)

COEP 헤더는 CORS 또는 CORP 를 통해 권한이 부여되지 않은 출처 간 자원의 로딩을 방지합니다. ‘require-corp’를 사용하여 헤더를 적용하고 ‘unsafe-none’을 사용하여 출처 간 문서를 가져올 수 있습니다.

const { Router } = Require(‘@layer0/core/router’) new Router() .get(“/:route”, ({ setResponseHeader }) = { setResponseHeader(“Cross-Origin-Embedder-Policy”, “Require >

출처 간 개시 정책(COOP)

COOP 헤더를 적용하면 최상위 문서의 탐색 컨텍스트 그룹이 출처 간 문서 간에 공유되지 않습니다. ‘same-origin’은 OAuth 및 Payment와 같은 상호 작용이 필요한 통합을 중단하지만 ‘same-origin-allow-popups’는 SAMEORIGIN의 팝업과만 컨텍스트를 공유하는 것을 목표로 합니다.

const { Router } = Require(‘@layer0/core/router’) new Router() .get(“/:route”, ({ setResponseHeader }) => { setResponseHeader(“Cross-Origin-opener-Policy”, “Same-origin

참조자 정책

사용자가 한 사이트(오리진)에서 다른 사이트(대상)로(링크를 클릭) 탐색할 때, 후자는 사용자가 보낸 오리진에 대한 정보를 수신합니다. Referrer-Policy 헤더는 대상에 이 정보의 어느 정도를 사용할 수 있는지를 제어합니다. Referrer-Policy의 모든 지시어는 Referrer-Policy – HTTP | MDN (Mozilla.org) 을 참조한다.

const { Router } = Require(“@layer0/core/router”) module.exports= new Router() .get(“/”, ({ setResponseHeader }) => { setResponseHeader(“Referrer-Policy”, “origin

사용 권한 정책

자체 프레임과 문서의 모든 iframe에서 브라우저 기능을 허용/거부할 수 있는 기능을 제공하는 실험적인 HTTP 헤더. 참조자 정책의 모든 지시어는 Feature-Policy – HTTP | MDN (Mozilla.org 참조하십시오 .

const { Router } = Require(“@layer0/core/router”) module.exports= new Router() .get(“/”, ({ setResponseHeader }) => { setResponseHeader( “권한 정책”, “camera=(), microphone=(), geolocation=()” )

HTTP HSTS(엄격한 전송 보안)

HSTS 엄격한 전송 보안 헤더

HTTP HSTS(Strict-Transport-Security)는 HTTP 프로토콜을 사용하는 대신 HTTPS만 사용하여 웹 사이트를 로드하도록 브라우저에 알립니다.

const { Router } = Require(‘@layer0/core/router’) new Router() .get(“/:route”, ({ setResponseHeader }) => { setResponseHeader(“Strict-Transport-Security”, “max-age=31536000; includeSubDomains

HSTS는 다음과 같은 기능을 제공합니다.

  1. HTTP 다운그레이드 공격(SSL 스트리핑 공격)으로부터 보호
  2. 기본적으로 혼합 콘텐츠 방어가 HTTPS로 전환됩니다.

예제

Layer0을 사용하면 보안 헤더를 구현하기가 그 어느 때보다 쉬워졌습니다. Layer0의 EdgeJS를 사용하면 사용 중인 프레임워크에 관계없이 모든 웹 사이트에 보안 헤더를 추가할 수 있습니다. 다음은 Layer0을 통해 sapper로 빌드된 웹사이트에서 관련 보안 헤더를 구현하고자 한다.

예: https://rishi-raj-jain-security-headers-example-default.layer0-limelight.link
GitHub: Rishi-Raj-Jain/보안-헤더-예
보고서: 보안 헤더 보고서 링크

토론

웹 애플리케이션을 보호하기 위해 관련 보안 헤더를 추가하십시오! Layer0을 사용하면 Edgio Documentation – Security 에서 비밀, 캐시 중독 및 기본 인증 활성화 이상의 작업을 수행할 수 있습니다.