X-Frame-Options

사용법

클릭재킹 공격은 정상적인 페이지 위에 겹쳐 놓은 숨겨진 요소를 클릭하도록 사용자를 속입니다. 공격자는 대상 사이트를 투명한 iframe에 끼워 넣고 그 위에 기만적인 UI를 배치한 뒤, 프레임 안 콘텐츠로 향하던 클릭을 가로챕니다. X-Frame-Options는 응답이 프레임 안에 표시되어도 되는지를 브라우저에 알려 이를 방지합니다.

참고

X-Frame-Options는 CSP frame-ancestors에 밀려 더 이상 사용되지 않습니다. 모든 최신 브라우저가 frame-ancestors를 지원하며, 이는 여러 오리진과 스킴 매칭을 포함해 더 세밀한 제어를 제공합니다. X-Frame-Options는 구형 브라우저와의 하위 호환성을 위해 여전히 널리 배포되어 있습니다.

이 헤더는 DENY와 SAMEORIGIN이라는 두 가지 유효한 값을 받습니다. 세 번째 값인 ALLOW-FROM은 과거 구현에서 정의되었지만 지금은 폐기되어 최신 브라우저에서 무시됩니다.

DENY

DENY 값은 요청한 사이트와 무관하게 페이지가 어떤 프레임에도 표시되지 못하게 차단합니다. 어떤 경우에도 프레임 삽입이 허용되지 않습니다.

SAMEORIGIN

SAMEORIGIN 값은 같은 오리진을 공유하는 페이지만 해당 페이지를 프레임에 넣을 수 있게 허용합니다. https://example.re 의 페이지는 https://example.re 의 다른 페이지를 프레임에 넣을 수 있지만, 다른 오리진의 페이지는 차단됩니다.

ALLOW-FROM (폐기됨)

ALLOW-FROM uri 값은 한때 지정된 URI에서만 프레임 삽입을 허용하도록 브라우저에 지시했습니다. 최신 브라우저는 더 이상 이 디렉티브를 지원하지 않습니다. 동등한 기능은 CSP frame-ancestors 디렉티브로 사용할 수 있습니다.

Content-Security-Policy: frame-ancestors https://trusted.example.re

예시

페이지의 모든 프레임 삽입을 차단하는, 클릭재킹에 대한 가장 엄격한 보호입니다.

X-Frame-Options: DENY

동일 출처의 프레임 삽입은 허용하면서 외부 사이트의 페이지 임베드는 차단합니다.

X-Frame-Options: SAMEORIGIN

폭넓은 브라우저 지원을 위해 X-Frame-Options와 CSP frame-ancestors 디렉티브를 결합한 심층 방어 구성입니다.

X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self'

문제 해결

프레임 관련 문제는 페이지가 다른 문서 안에서 렌더링을 거부할 때 빈 iframe이나 콘솔 오류로 드러납니다.

“Refused to display in a frame” 콘솔 오류. 브라우저가 프레임에 넣은 페이지를 차단하고 Refused to display ‘https://example.re/’ in a frame because it set ‘X-Frame-Options’ to ‘DENY’(또는 ‘SAMEORIGIN’)를 기록합니다. DevTools의 Network 탭에서 프레임 대상 URL의 응답 헤더를 확인하십시오. 페이지를 임베드해야 한다면 헤더 값을 DENY에서 SAMEORIGIN으로 바꾸거나, 헤더를 완전히 제거하고 더 세밀한 제어를 위해 CSP frame-ancestors를 사용하십시오.

최신 브라우저에서 ALLOW-FROM이 동작하지 않습니다. ALLOW-FROM 디렉티브는 폐기되었습니다. Chrome, Firefox, Safari는 이 디렉티브를 완전히 무시하며 헤더에 유효한 값이 설정되지 않은 것처럼 취급합니다. ALLOW-FROM을 여러 오리진을 지원하는 CSP frame-ancestors 디렉티브로 대체하십시오. Content-Security-Policy: frame-ancestors https://trusted.example.re https://other.example.re 와 같이 쓰면 됩니다.

X-Frame-Options와 CSP frame-ancestors가 충돌합니다. 두 헤더가 모두 있을 때 CSP Level 2 이상을 지원하는 브라우저는 X-Frame-Options를 무시하고 frame-ancestors만 따릅니다. CSP를 지원하지 않는 구형 브라우저는 X-Frame-Options로 되돌아갑니다. 의도한 정책이 두 헤더에서 일관된지 확인하십시오. frame-ancestors ‘self’와 함께 X-Frame-Options: DENY를 보내면 최신 브라우저는 동일 출처 프레임 삽입을 허용하는데 구형 브라우저는 모든 프레임 삽입을 차단하는 불일치가 생깁니다.

정상적인 임베드가 차단됩니다(결제 폼, 위젯, 임베드형 앱). 호스트 페이지가 X-Frame-Options: DENY를 보내면 iframe 임베드가 필요한 서드파티 서비스가 실패합니다. CSP frame-ancestors로 임베드 접근이 필요한 특정 오리진을 허용 목록에 추가하십시오. Content-Security-Policy: frame-ancestors ‘self’ https://payments.provider.example.re 와 같이 쓰면 됩니다.

X-Frame-Options에서 CSP frame-ancestors로 마이그레이션하기. 전환 기간에는 두 헤더를 모두 배포하십시오. frame-ancestors를 의도한 프레임 정책에 맞게 설정하십시오. CSP를 지원하지 않는 브라우저를 위해 X-Frame-Options를 유지하십시오. 레거시 브라우저 트래픽이 허용 가능한 수준 아래로 떨어지면 X-Frame-Options를 제거하고 frame-ancestors만 사용하십시오. 허용된 오리진에서 페이지를 iframe에 임베드해 보고 여러 브라우저에서 프레임이 로드되는지 확인하여 마이그레이션을 테스트하십시오.