클릭재킹은 사용자가 신뢰할 수 있고 익숙한 사이트처럼 보이는 사이트에서 링크나 UI 요소를 클릭하도록 속이는 악성 공격입니다. 이는 일반적으로 <iframe>를 사용하여 신뢰할 수 있는 사이트의 일부 또는 전부를 악성 사이트에 삽입하여 이루어집니다.
Content-Security-Policy (CSP) 헤더의 X-Frame-Options (XFO) 헤더 및 frame-ancestors 지시어는 사이트가 <iframe> 내에 삽입되는 방식을 제어하여 클릭재킹 공격을 완화할 수 있습니다.
Lighthouse 감사 실패 방식
XFO 헤더가 SAMEORIGIN 또는 DENY로 설정되어 있거나 CSP 헤더에 frame-ancestors 지시어가 설정되어 있으면 감사가 통과합니다. 이러한 프레임 제어 정책이 모두 구성되지 않은 경우 감사가 실패합니다.
클릭재킹을 완화하기 위해 프레임 제어 정책을 설정하는 방법
프레임 제어 정책은 초기 문서 요청의 HTTP 헤더에 설정해야 합니다. <meta> 요소에 설정된 경우 Content-Security-Policy의 X-Frame-Options 헤더와 frame-ancestors 지시어가 작동하지 않습니다.
XFO 헤더
XFO 헤더에 DENY 또는 SAMEORIGIN를 설정하면 클릭재킹 공격을 완화할 수 있습니다.
X-Frame-Options: SAMEORIGIN
X-Frame-Options: DENY
SAMEORIGIN 디렉티브는 모든 조상 프레임이 페이지 자체와 동일한 출처를 공유하는 경우에만 페이지가 표시되도록 허용합니다. 반대로 DENY 디렉티브는 상위 프레임 출처와 관계없이 페이지가 프레임에 표시되지 않도록 합니다.
CSP 헤더
CSP 헤더 내의 frame-ancestors 지시어는 <frame>, <iframe>, <object> 또는 <embed>에 지정된 페이지를 삽입할 수 있는 사이트를 정의합니다. XFO와 마찬가지로 CSP frame-ancestors 지시어를 self 또는 none로 설정하여 클릭재킹 공격을 완화하는 데 사용할 수 있습니다.
Content-Security-Policy: frame-ancestors 'self';
Content-Security-Policy: frame-ancestors 'none';
그러나 frame-ancestors 디렉티브는 페이지를 삽입할 수 있는 특정 상위 소스를 설정할 수 있으므로 XFO보다 유연합니다.
Content-Security-Policy: frame-ancestors 'self' https://example.com;