Cloudflare Workers를 사용하여 Cloudflare에서 제공하는 웹사이트에서 보안 HTTP 헤더를 구현하는 단계별 가이드입니다.

XSS, Clickjacking, MIMI 스니핑, 교차 사이트 주입 등과 같은 일반적인 취약성으로부터 사이트를 보호하기 위해 HTTP 응답 헤더를 구현하는 방법에는 여러 가지가 있습니다. 널리 채택되고 권장되는 관행 오와스프.

이전에는 Apache, Nginx 및 IIS와 같은 웹 서버에서 헤더를 구현하는 방법에 대해 썼습니다. 그러나 Cloudflare를 사용하여 사이트를 보호하고 강화하는 경우 다음을 활용할 수 있습니다. Cloudflare 작업자 HTTP 응답 헤더를 조작합니다.

Cloudflare Workers는 JavaScript, C, C++, Rust 코드를 실행할 수 있는 서버리스 플랫폼입니다. 전 세계적으로 200개가 넘는 모든 Cloudflare 데이터 센터에 배포됩니다.

구현은 매우 간단하고 유연합니다. 하위 도메인 또는 특정 URI를 포함하여 전체 사이트에 헤더를 적용할 수 있는 유연성을 제공합니다. 일치하는 후두둑n 정규식 사용.

이 데모에서는 암호 스콧 헬름.

시작합시다…👨‍💻

  • 다음에서 worker.js 코드를 복사합니다. GitHub 스크립트 편집기에 붙여넣기
const securityHeaders = {
        "Content-Security-Policy": "upgrade-insecure-requests",
        "Strict-Transport-Security": "max-age=1000",
        "X-Xss-Protection": "1; mode=block",
        "X-Frame-Options": "DENY",
        "X-Content-Type-Options": "nosniff",
        "Referrer-Policy": "strict-origin-when-cross-origin"
    },
    sanitiseHeaders = {
        Server: ""
    },
    removeHeaders = [
        "Public-Key-Pins",
        "X-Powered-By",
        "X-AspNet-Version"
    ];

async function addHeaders(req) {
    const response = await fetch(req),
        newHeaders = new Headers(response.headers),
        setHeaders = Object.assign({}, securityHeaders, sanitiseHeaders);

    if (newHeaders.has("Content-Type") && !newHeaders.get("Content-Type").includes("text/html")) {
        return new Response(response.body, {
            status: response.status,
            statusText: response.statusText,
            headers: newHeaders
        });
    }

    Object.keys(setHeaders).forEach(name => newHeaders.set(name, setHeaders[name]));

    removeHeaders.forEach(name => newHeaders.delete(name));

    return new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers: newHeaders
    });
}

addEventListener("fetch", event => event.respondWith(addHeaders(event.request)));

아직 저장하지 마십시오. 요구 사항을 충족하도록 다음 헤더를 조정할 수 있습니다.

Content-Security-Policy – ​​애플리케이션 정책을 적용해야 하는 경우 여기에서 수행할 수 있습니다.

예 – 여러 URL에서 iFrame을 통해 콘텐츠를 소싱해야 하는 경우 아래와 같이 프레임 조상을 활용할 수 있습니다.

"Content-Security-Policy" : "frame-ancestors 'self' gf.dev koreantech.org.com",

위와 같이 하면 gf.dev, koreantech.org.com 및 자체 사이트에서 콘텐츠를 로드할 수 있습니다.

  iPhone SE 3에서 야간 모드를 얻는 방법

X-Frame-Options – iframe을 사용하여 동일한 사이트 내의 일부 페이지에 사이트 콘텐츠를 표시하려는 경우 SAMEORIGIN으로 변경할 수 있습니다.

"X-Frame-Options": "SAMEORIGIN",

서버 – 여기에서 서버 헤더를 삭제할 수 있습니다. 당신이 좋아하는 것을 넣으십시오.

"Server" : "koreantech.org Server",

RemoveHeaders – 정보 유출 취약성을 완화하기 위해 버전을 숨기기 위해 일부 헤더를 제거해야 합니까?

여기에서 할 수 있습니다.

let removeHeaders = [
	"Public-Key-Pins",
	"X-Powered-By",
	"X-AspNet-Version",
]

새 헤더 추가 – 일부 사용자 지정 헤더를 애플리케이션에 전달해야 하는 경우 아래와 같이 securityHeaders 섹션에 추가할 수 있습니다.

let securityHeaders = {
	"Content-Security-Policy" : "frame-ancestors 'self' gf.dev koreantech.org.com",
	"Strict-Transport-Security" : "max-age=1000",
	"X-Xss-Protection" : "1; mode=block",
	"X-Frame-Options" : "SAMEORIGIN",
	"X-Content-Type-Options" : "nosniff",
	"Referrer-Policy" : "strict-origin-when-cross-origin",
        "Custom-Header"  : "Success",
}

필요한 모든 헤더를 조정했으면 작업자 이름을 지정하고 저장 및 배포를 클릭합니다.

엄청난! 작업자가 준비되었으며 다음으로 헤더를 적용하려는 사이트에 작업자를 추가해야 합니다. 이것을 내 실험실 사이트에 적용하겠습니다.

  • Cloudflare 홈/대시보드로 이동하여 사이트를 선택합니다.
  • 작업자 탭 >> 경로 추가로 이동합니다.
  • 경로에 URL을 입력하십시오. 여기에서 Regex를 적용할 수 있습니다.
  • 새로 생성된 작업자를 선택하고 저장합니다.

그게 다야; 1초 안에 모든 헤더가 사이트에 구현되었음을 알 수 있습니다.

다음은 Chrome 개발자 도구에서 본 모습입니다. HTTP 헤더 도구를 통해 헤더를 테스트할 수도 있습니다.

Server 헤더가 반영되지 않는 이유를 모르겠습니다. Cloudflare가 이것을 무시하고 있다고 생각합니다.

전체 구현에는 ~15분이 소요되며 Apache 또는 Nginx와 같은 다운타임이나 재시작이 필요하지 않습니다. 프로덕션 사이트에 적용할 계획이라면 먼저 낮은 환경에서 테스트하거나 루트의 도움을 받아 테스트 페이지에 적용하여 결과를 확인할 수 있습니다. 만족하면 원하는 곳으로 밀어 넣으십시오.

이것은 굉장하다!

덕분에 스콧 코드를 위해.