클릭재킹과 X-Frame-Options: 페이지를 iframe 밖으로
클릭재킹은 공격자가 제어하는 사이트의 투명한 iframe 안에 여러분의 페이지를 로드하여, 숨겨진 컨트롤을 클릭하도록 사용자를 속이는 공격입니다. X-Frame-Options — 또는 최신 CSP frame-ancestors 지시문 — 은 브라우저가 페이지를 삽입하기를 거부하도록 지시하여 공격을 완전히 차단합니다.
무엇인가요
클릭재킹 공격은 공격자의 페이지에 있는 보이지 않거나 반투명한 iframe 안에 여러분의 사이트를 프레이밍하여 작동합니다. 피해자는 미끼 콘텐츠를 보고 무해해 보이는 버튼을 클릭하지만, 숨겨진 iframe이 여러분의 페이지에서 실제 클릭 — 계좌 이체, 설정 변경, OAuth 승인 — 을 사용자가 알아채지 못한 채 가로챕니다.
X-Frame-Options는 두 가지 유용한 값을 가진 HTTP 응답 헤더입니다: DENY(누구의 프레이밍도 거부)와 SAMEORIGIN(자신의 출처 페이지에서만 프레이밍 허용). CSP의 frame-ancestors 지시문은 더 세밀한 제어로 같은 일을 합니다 — 특정 신뢰 origin을 나열할 수 있으며, CSP를 지원하는 브라우저에서 X-Frame-Options를 대체합니다.
왜 중요한가요
의미 있는 동작이 있는 페이지 — 계정 설정, 결제 확인, 이메일 설정, 관리자 토글 — 는 모두 클릭재킹 표적입니다. 악성 페이지에 도달한 로그인 사용자는 아무런 이상 징후 없이 의도하지 않은 실제 동작을 하도록 속을 수 있습니다.
X-Frame-Options는 추가 비용이 전혀 없고 모든 최신 브라우저가 지원합니다. 민감한 동작을 수행하는 페이지에서 이를 생략하는 것은 누락된 기능이 아니라 명백한 설정 오류입니다.
고치는 방법
next.config.js에 헤더를 설정하여 모든 route에 적용되도록 하세요. DENY는 삽입될 필요가 없는 앱에 안전한 기본값입니다.
// next.config.js
module.exports = {
async headers() {
return [
{
source: "/:path*",
headers: [{ key: "X-Frame-Options", value: "DENY" }],
},
];
},
};CSP의 frame-ancestors 지시문은 최신 브라우저에서 X-Frame-Options를 대체하며 origin별 제어를 제공합니다. 이미 설정한 Content-Security-Policy 헤더에 추가하세요.
// extend your existing CSP string
const csp = [
// ... your other directives ...
"frame-ancestors 'none'",
].join("; ");자신의 사이트에 페이지를 정당하게 삽입한다면 — 미리보기 iframe이나 동일 출처의 임베드 위젯 — DENY 대신 X-Frame-Options: SAMEORIGIN 또는 frame-ancestors 'self'를 사용하세요.
nginx 프록시를 통해 응답을 제공한다면, server 블록에 헤더를 추가하세요.
add_header X-Frame-Options "DENY" always;자주 묻는 질문
X-Frame-Options인가요 CSP frame-ancestors인가요 — 무엇을 써야 하나요?
둘 다 사용하세요. X-Frame-Options는 구형 브라우저를 지원하고, CSP의 frame-ancestors는 origin별 세밀함을 제공하는 최신 표준입니다. 둘은 안전하게 공존합니다 — CSP를 지원하는 브라우저는 frame-ancestors를 사용하고 X-Frame-Options를 무시합니다.
DENY가 내 위젯이나 분석 대시보드 삽입을 깨뜨리나요?
네 — DENY는 자신의 출처를 포함한 모든 프레이밍을 차단합니다. 자신의 도메인에서 특정 페이지를 iframe에 삽입해야 한다면 SAMEORIGIN 또는 frame-ancestors 'self'를 사용하세요. 정말 삽입이 필요한 페이지에서만 완화하세요.
AppSafe는 X-Frame-Options 누락에 어떤 심각도를 보고하나요?
중간입니다. 그 자체로 즉각적인 데이터 탈취 경로는 아니지만, 계정 동작을 수행하는 페이지는 이것이 없으면 실제 클릭재킹 위험이 있습니다.