회사 홈페이지가 다른 사이트 화면 안에 몰래 끼워져 열린다면 어떻게 막을 수 있을까요?

웹 서버가 끼워 넣기 제한을 보내지 않으면 브라우저는 다른 사이트가 그 페이지를 iframe 안에 띄우도록 허용합니다. 이 허용을 악용하면 미끼 화면 아래에 우리 회사 페이지를 보이지 않게 깔아 두고, 방문자가 미끼 버튼을 누른다고 생각하는 순간 실제로는 우리 페이지의 버튼을 누르게 만들 수 있습니다. 이 글은 이런 공격을 막는 응답 헤더 두 가지를 MDN 문서로 정리하고, 회사 홈페이지 담당자가 제작사에 무엇을 확인하면 되는지 순서를 적은 것입니다.

다른 사이트 안에 끼워진 페이지가 왜 위험할까요

MDN의 클릭재킹 설명에 따르면 클릭재킹은 공격자가 미끼 사이트를 만들고 그 안에 목표 사이트를 iframe으로 끼워 넣은 뒤, iframe을 보이지 않게 숨기고 미끼 버튼을 목표 사이트의 중요한 버튼과 같은 자리에 맞춰 두는 방식입니다. 방문자는 미끼 버튼을 누른다고 생각하지만 실제로는 보이지 않는 목표 사이트의 버튼을 누르게 됩니다. 방문자가 목표 사이트에 이미 로그인해 있다면 그 요청에는 방문자의 실제 로그인 정보가 실리고 요청이 그대로 처리될 수 있다고 MDN은 설명합니다.

회사 홈페이지에 회원 정보 변경이나 관리자 화면처럼 로그인한 상태에서 버튼 하나로 처리되는 기능이 있다면 이 설명이 그대로 해당합니다. 반대로 로그인도 없고 버튼을 눌러 처리되는 동작도 없는 소개 페이지라면 위험이 작을 수 있지만, 어느 페이지에 그런 기능이 생길지 미리 알기 어려우므로 사이트 전체에 기본값을 정해 두는 편이 관리하기 쉽습니다.

AI로 생성한 개념 이미지. 실제 회사 사진이 아닙니다.

끼워 넣기를 제한하는 두 가지 응답 헤더

MDN은 클릭재킹이 목표 사이트를 iframe 안에 끼워 넣을 수 있어야 성립하므로, 주된 방어는 이 끼워 넣기를 막거나 적어도 제한하는 것이라고 설명합니다. 도구는 두 가지입니다.

• 콘텐츠 보안 정책(CSP)의 frame-ancestors 지시어는 그 페이지를 끼워 넣을 수 있는 상위 페이지를 지정합니다. 'none'으로 두면 어디에도 끼워 넣을 수 없고, 'self'와 허용할 주소를 나열하면 같은 출처와 그 주소만 끼워 넣을 수 있습니다.
• X-Frame-Options 응답 헤더는 DENY(모든 끼워 넣기 차단)와 SAMEORIGIN(모든 상위 프레임이 같은 출처일 때만 허용) 가운데 하나를 고르는 더 단순한 방식입니다.

MDN은 frame-ancestors가 X-Frame-Options를 대체하는 지시어이며, 두 가지를 모두 보내면 frame-ancestors를 지원하는 브라우저는 X-Frame-Options를 무시한다고 설명합니다. 둘 다 보내면 frame-ancestors를 지원하지 않는 브라우저에서도 끼워 넣기를 막을 수 있지만, frame-ancestors를 지원하는 브라우저가 매우 많아 큰 걱정거리는 아니라고 덧붙입니다.

설정할 때 놓치기 쉬운 점도 MDN 문서에 나와 있습니다.

• frame-ancestors는 다른 CSP 지시어와 달리 default-src 설정을 물려받지 않습니다. 그래서 default-src를 'none'으로 막아 둔 정책이라도 frame-ancestors를 따로 적지 않으면 누구나 그 페이지를 끼워 넣을 수 있습니다.
• frame-ancestors는 HTML의 meta 요소로 넣은 CSP에서는 지원되지 않고, X-Frame-Options도 meta 요소로 넣으면 아무 효과가 없습니다. 두 가지 모두 서버의 HTTP 응답 헤더로 보내야 합니다.
• X-Frame-Options의 ALLOW-FROM 값은 더는 쓰이지 않는 값이라 최신 브라우저는 이 값을 만나면 헤더 전체를 무시합니다. 특정 사이트만 허용하려면 frame-ancestors를 써야 합니다.

MDN은 부분적인 보조 대책으로 로그인 세션 쿠키에 SameSite 속성을 Lax나 Strict로 두라고도 권합니다. 그러면 같은 사이트가 아닌 상위 페이지 안의 iframe에서 보내는 요청에는 그 쿠키가 실리지 않아 서버가 로그인한 사용자의 요청으로 처리하지 않습니다.

AI로 생성한 개념 이미지. 실제 회사 사진이 아닙니다.

회사 홈페이지 담당자가 확인할 순서

탱탱소프트의 운영 권장은 헤더를 바로 켜기 전에 우리 홈페이지를 일부러 끼워 넣어 쓰는 곳이 있는지부터 정리하는 것입니다.

1. 우리 페이지를 다른 곳에 iframe으로 끼워 넣어 쓰는 경우가 있는지 확인합니다. 예를 들어 그룹사 사이트나 협력사 포털 안에 우리 회사의 신청 화면을 넣어 둔 경우입니다. 없다면 사이트 전체에 frame-ancestors 'none', 우리 사이트 안에서만 쓴다면 'self', 특정 사이트도 허용해야 한다면 그 주소를 함께 적습니다.
2. 제작사나 서버 관리자에게 이 값을 HTTP 응답 헤더로 보내 달라고 요청합니다. 오래된 브라우저까지 고려한다면 X-Frame-Options의 DENY나 SAMEORIGIN도 함께 보내도록 합니다.
3. 브라우저 개발자 도구의 네트워크 탭에서 첫 화면뿐 아니라 로그인, 문의, 관리자 화면의 응답 헤더에도 같은 값이 들어 있는지 확인합니다.
4. 이미 CSP를 쓰고 있다면 default-src만 있고 frame-ancestors가 빠져 있지 않은지 확인합니다.
5. 로그인 기능이 있다면 세션 쿠키의 SameSite 속성도 함께 점검합니다.

이 글은 청주·충북 지역 기업을 포함한 일반적인 회사 홈페이지의 설정 방법을 MDN 문서에 따라 정리한 것이며 특정 사이트를 점검한 결과가 아닙니다. 실제 적용 값은 홈페이지가 끼워 넣어 쓰이는 곳과 서버 구성에 맞춰 정해야 합니다.

참고 자료

• MDN Web Docs, Clickjacking
• MDN Web Docs, Content-Security-Policy: frame-ancestors directive
• MDN Web Docs, X-Frame-Options header