Content Security Policy and X-Frame-Options

프로젝트를 하다보면 마주칠 수 있는 문제중 하나가 CSP(Content Security Policy)이다.
사실 보안적으로 중요하며, 반드시 신경써야되는 부분이다. 이와 같이 X-Frame-Options도 살펴보아야 한다.

Content Security Policy

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. (MDN)

CSP는 보안을 위해 추가된 계층이다. CSP를 동작하게 하려면 웹 서버에서 Content-Security-Policy HTTP header를 리턴해줘야 한다. 예를 들어 Node js에서는 helmet 라이브러리를 이용하면 다음과 같이 설정할 수 있다.

app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      "script-src": ["'self'", "example.com"],
      "style-src": null,
    },
  })
);

nginx 등의 load balancer를 이용한다면 서버 앞단에서 설정해줄 수도 있다.

meta tag를 통해서도 삽입할 수 있다.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

지시문과 제한 대상

default-src 지시문을 지정하여 이 기본 동작을 재정의할 수 있다. 이 지시문은 지정하지 않은 채로 두는 대부분의 지시문에 대한 기본값을 정의한다. 일반적으로 -src로 끝나는 모든 지시문에 이 사항이 적용이 된다.

키워드/데이터 속성 및 설명

Example of Content Security Policy

Content-Security-Policy: img-src 'self' data: blob: filesystem: ;
media-src mediastream; script-src 'self' https://example.com

이외에도 report-uri 지시문을 통해 브라우저에서 위반 사항을 탐지했을 때 지정된 URL로 JSON형식의 위반보고서를 POST함.

{
  "csp-report": {
    "document-uri": "http://example.org/page.html",
    "referrer": "http://evil.example.com/",
    "blocked-uri": "http://evil.example.com/evil.js",
    "violated-directive": "script-src 'self' https://apis.google.com",
    "original-policy": "script-src 'self' https://apis.google.com; report-uri http://example.org/my_amazing_csp_report_parser"
  }
}

referrer 지시문: referrer 동작을 변경
reflected-xss 지시문: allow, block, filter option을 통해 반사형 크로스 사이트 스크립팅으로 불리는 공격에 대한 필터를 활성화(X-XSS-Protection header와 동일한 효과)

X-Frame-Options

X-Frame-Options Header는 MDN에서 말하고 있는 것 그자체로 간단하다. deny, sameorigin, allow-from 옵션 3가지가 있다. 그 중 allow-from은 대부분의 브라우저에서 지원하고 있지 않으므로 사용하지 못한다고 봐도 무방하다.

The X-Frame-Options HTTP 응답 헤더는 해당 페이지를 <frame> 또는<iframe>, <object>에서 렌더링할 수 있는지 여부를 나타내는데 사용됩니다. - MDN

1. deny: 어떤 사이트에서도 frame상에서 보여질 수 없음
2. sameorigin: 동일한 사이트의 frame에서만 보여짐
3. allow-from uri: 지정된 특정 uri의 frame에서만 보여짐

Content Security Policy vs X-Frame-Options

그렇다면 CSP의 child-src, frame-ancestors 같은 지시문이 X-Frame-Options Header와 같이 쓰였을 때는 어떻게 동작할까? 다음과 같이 stackoverflow에서 답을 찾을 수 있었다. 간단히 말하면 frame-ancestors 지시문이 있을 때 X-Frame-Options는 무시된다.

This directive is similar to the X-Frame-Options header that several user agents have implemented. The 'none' source expression is roughly equivalent to that header’s DENY, 'self' to SAMEORIGIN, and so on. The major difference is that many user agents implement SAMEORIGIN such that it only matches against the top-level document’s location. This directive checks each ancestor. If any ancestor doesn’t match, the load is cancelled. RFC7034

The frame-ancestors directive obsoletes the X-Frame-Options header. If a resource has both policies, the frame-ancestors policy SHOULD be enforced and the X-Frame-Options policy SHOULD be ignored.

관련자료

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
• https://stackoverflow.com/questions/40373771/how-does-content-security-policy-work-with-x-frame-options
• https://developers.google.com/web/fundamentals/security/csp
• https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/X-Frame-Options#browser_compatibility
• https://stackoverflow.com/questions/39488241/what-is-the-difference-between-cors-and-csps
• 리얼 월드 HTTP ( book )

살펴보면 좋을 자료

• https://www.hahwul.com/2019/01/27/csp-bypass-technique-xss/

참고

alb에서는 CORS를 지원하지 않는다

관련자료