보안 헤더 설정

웹 애플리케이션 보안을 강화하려면 엣지 또는 애플리케이션 내에서 ‘ HTTP ’ 보안 헤더를 설정하십시오. 다음 JavaScript 예제에서는 이러한 헤더를 구현하는 방법을 보여줍니다. 전송 중인 응답 헤더를 수정함으로써, 백엔드 애플리케이션을 변경하지 않고도 이러한 일반적인 보안 헤더와 같은 보호 기능을 추가할 수 있습니다.

X-XSS-Protection: XSS 공격이 감지되면 페이지 로딩을 방지합니다. 자세히 알아보기 예를 들어

"X-XSS-Protection": "1; mode=block",

X-Frame-Options

클릭재킹 공격을 방지합니다. 자세히 알아보기 예를 들어

"X-Frame-Options": "DENY",

X-Content-Type-Options

브라우저가 선언된 콘텐츠 유형에서 벗어난 응답을 MIME 스니핑하지 못하도록 합니다. 자세히 알아보기 예를 들어

"X-Content-Type-Options": "nosniff",

권한 정책

브라우저 기능에 대한 액세스를 제어할 수 있습니다. 예를 들어, 코호트 연합 학습을 선택 해제하려면 ( FLoC ):

"Permissions-Policy": "interest-cohort=()",

Referrer-Policy

요청에 포함되는 리퍼러 정보를 얼마나 많이 포함할지 제어합니다. 예를 들어, 다음과 같습니다.

"Referrer-Policy": "strict-origin-when-cross-origin",

엄격한 운송 보안

서버에 대한 보안( HTTPS ) 연결을 적용합니다. 웹사이트가 Chrome의 HTTP 엄격한 전송 보안( HSTS ) 사전 로드 목록에 추가될 수 있으므로 이러한 헤더는 자동으로 설정되지 않습니다. 예를 들어, 다음과 같습니다.

"Strict-Transport-Security" : "max-age=63072000; includeSubDomains; preload",

콘텐츠 보안 정책

신뢰할 수 있는 도메인과 모든 하위 도메인의 콘텐츠를 허용합니다. 자세히 알아보기 예를 들어

"Content-Security-Policy": "default-src 'self' example.com *.example.com",

자바스크립트 예제

export default {
  async fetch(request) {
    const DEFAULT_SECURITY_HEADERS = {  
      "X-Content-Type-Options": "nosniff",
      "Referrer-Policy": "strict-origin-when-cross-origin",
      "Cross-Origin-Embedder-Policy": 'require-corp; report-to="default";',
      "Cross-Origin-Opener-Policy": 'same-site; report-to="default";',
      "Cross-Origin-Resource-Policy": "same-site",
    };
    const BLOCKED_HEADERS = [
      "Public-Key-Pins",
      "X-Powered-By",
      "X-AspNet-Version",
    ];
    let response = await fetch(request);
    let newHeaders = new Headers(response.headers);
    const tlsVersion = request.cf.tlsVersion;
    console.log(tlsVersion);
    // This sets the headers for HTML responses:
    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(DEFAULT_SECURITY_HEADERS).map((name) => {
      newHeaders.set(name, DEFAULT_SECURITY_HEADERS[name]);
    });
    BLOCKED_HEADERS.forEach((name) => {
      newHeaders.delete(name);
    });
    if (tlsVersion !== "TLSv1.2" && tlsVersion !== "TLSv1.3") {
      return new Response("You need to use TLS version 1.2 or higher.", {
        status: 400,
      });
    } else {
      return new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers: newHeaders,
      });
    }
  },
};