# 사용자를 속이고 경고를 우회하는 현대식 SVG 클릭재킹 공격 > Clean Markdown view of GeekNews topic #24877. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=24877](https://news.hada.io/topic?id=24877) - GeekNews Markdown: [https://news.hada.io/topic/24877.md](https://news.hada.io/topic/24877.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2025-12-07T02:33:05+09:00 - Updated: 2025-12-07T02:33:05+09:00 - Original source: [lyra.horse](https://lyra.horse/blog/2025/12/svg-clickjacking/) - Points: 2 - Comments: 1 ## Topic Body - **SVG 필터를 이용한 새로운 클릭재킹 기법**이 제시되며, 기존 단순 클릭 유도 공격을 복잡한 상호작용형 공격으로 확장함 - `feColorMatrix`, `feDisplacementMap` 등 **SVG 필터 요소들이 cross-origin iframe에도 적용 가능**함이 확인되어, 이를 통해 시각적 조작과 데이터 추출이 가능함 - 필터 조합으로 **픽셀 판독, 논리 연산, 조건 기반 UI 조작**이 가능해져, 다단계 클릭재킹이나 입력 유도형 공격을 구현할 수 있음 - 실제 사례로 **Google Docs 취약점**을 이용한 공격이 성공해, 연구자는 Google VRP로부터 **$3133.70 보상**을 받음 - 이 기법은 **브라우저 보안 모델의 새로운 공격면**을 드러내며, SVG 필터의 논리적 활용이 보안 위협으로 발전할 수 있음을 보여줌 --- ### SVG 클릭재킹의 개요 - 기존 클릭재킹은 iframe을 덮어 사용자가 의도치 않게 클릭하도록 유도하는 단순한 공격 구조 - 새로 제시된 **SVG 클릭재킹**은 SVG 필터를 이용해 **복잡한 상호작용과 데이터 유출**을 가능하게 함 - `feColorMatrix`와 `feDisplacementMap` 같은 필터가 **cross-origin 문서에도 적용**되어, 외부 콘텐츠를 시각적으로 조작할 수 있음 ### SVG 필터의 구성 요소 - 주요 필터 요소로 **<feImage>** , **<feFlood>** , **<feOffset>** , **<feDisplacementMap>** , **<feGaussianBlur>** , **<feTile>** , **<feMorphology>** , **<feBlend>** , **<feComposite>** , **<feColorMatrix>** 등이 있음 - 이들은 입력 이미지를 조합·변형해 새로운 이미지를 생성하며, **체인 형태로 연결 가능** - 이러한 조합을 통해 공격자가 **시각적 효과, 마스킹, 색상 조작** 등을 자유롭게 구현 가능 ### 공격 예시 - **가짜 캡차(fake captcha)** : `feDisplacementMap`을 이용해 텍스트를 왜곡시켜 사용자가 민감한 코드를 입력하도록 유도 - **회색 텍스트 숨기기(grey text hiding)** : `feComposite`와 `feMorphology`로 입력창의 안내문이나 오류 문구를 제거해 사용자가 공격자가 지정한 비밀번호를 입력하도록 유도 - **픽셀 판독(pixel reading)** : 특정 픽셀의 색상을 감지해 필터 동작을 제어함으로써, **버튼 클릭·호버·입력 상태 감지** 등 동적 반응형 공격 구현 ### 논리 연산과 복합 공격 - `feBlend`와 `feComposite`를 조합해 **AND, OR, XOR, NOT** 등의 **논리 게이트 구현** 가능 - 이를 통해 **SVG 필터 내에서 완전한 논리 회로**를 구성할 수 있으며, 다단계 클릭재킹 시나리오를 자동화 가능 - 예시로 **‘Securify’ 앱 공격**에서는 대화상자 열림, 체크박스 클릭, 버튼 클릭 등 여러 단계를 논리적으로 제어해 사용자를 속이는 구조를 구현 ### 실제 사례: Google Docs 취약점 - Google Docs에서 “Generate Document” 버튼 클릭 후 나타나는 팝업과 입력창을 **SVG 필터 기반 논리로 감지·조작** - 입력창의 포커스 상태, 회색 텍스트, 로딩 화면 등을 실시간으로 감지해 공격 흐름을 제어 - 이 공격으로 Google에 보고되어 **$3133.70의 버그 바운티** 지급 ### QR 코드 응용 - SVG 필터 내에서 **QR 코드 생성 로직**을 구현해, 픽셀 데이터를 URL로 인코딩 후 QR 형태로 표시 가능 - 사용자가 QR을 스캔하면 공격자가 제어하는 서버로 데이터가 전송됨 - `feDisplacementMap`과 **Reed–Solomon 오류 정정**을 이용해 스캔 가능한 QR 코드 생성 ### 추가 활용 가능성 - **텍스트 판독, 클릭 기반 데이터 유출, 가짜 마우스 커서 삽입** 등 다양한 공격 응용 가능 - **JavaScript 없이 CSS/SVG만으로도 공격 구현** 가능해 CSP 우회 가능성 존재 ### 연구적 의의 - SVG 필터를 이용한 **논리 연산 기반 클릭재킹**은 기존 연구에서 다루지 않은 새로운 공격 기법 - 과거 연구들은 SVG를 단순 시각적 가림 용도로만 언급했으나, 본 연구는 **논리 실행과 상호작용 제어**를 입증 - 연구자는 이를 **새로운 취약점 클래스**로 제시하며, 브라우저 보안 체계의 재검토 필요성을 강조 ### 마무리 - 본 연구는 **SVG 필터를 프로그래밍 언어처럼 활용한 첫 보안 공격 사례**로 평가됨 - 저자는 2025년 말 **39c3** 및 **Disobey 2026**에서 관련 발표 예정 - 포스트는 **이미지·JS 없이 42kB의 HTML/CSS/SVG만으로 작성**, 실험적 보안 연구의 창의성을 보여줌 ## Comments ### Comment 47319 - Author: neo - Created: 2025-12-07T02:33:05+09:00 - Points: 1 ###### [Hacker News 의견](https://news.ycombinator.com/item?id=46155085) - 개발자가 **X-Frame-Options 헤더**를 제대로 설정하면 이런 문제는 해결됨 하지만 현실적으로는 보안 문제를 쫓다가 브라우저에서 SVG 스펙의 절반을 삭제하는 식으로 대응할 것 같음 - 완전히 해결된 건 아님. 일부 애플리케이션(예: Google Docs)은 프레이밍이 필요함 또 프레임이 아닌 HTML 인젝션이 가능한 사이트에서도 이런 공격이 가능함 - SVG에는 **보안 지뢰**가 너무 많음. 특히 사용자 제공 SVG처럼 신뢰할 수 없는 경우엔 그냥 비활성화하는 게 가장 단순함 - 나는 이미 보안상의 이유로 SVG를 꺼두고 있음 그런데 요즘은 **CSS까지 비활성화**해야 할지도 모른다는 생각이 듦 CSS가 단순히 텍스트를 꾸미는 용도로 남아 있었으면 좋았을 텐데, 이제는 프로그래밍 언어처럼 변해서 해커나 광고주가 악용하기 쉬워졌음 - “CSS를 단순하게 놔뒀으면 좋았을 텐데”라는 말에 공감하지만, 사실 이런 공격은 **2000년대 후반**에 훨씬 쉽게 가능했음 지금은 거의 불가능에 가까움 - 나는 보안 강화를 위해 브라우저를 망가뜨리기보다는, **민감한 데이터 자체를 브라우저 밖에 두는 게 낫다**고 생각함 - 문제의 핵심은 CSS가 아니라 **iFrame**임. 브라우저 초창기부터 계속된 보안 취약점의 근원임 - 이 데모 외에 다른 보안 이유가 있는지 궁금함. 대부분의 플랫폼에서는 이 공격이 작동하지 않음 - 그건 과도한 대응임. 이런 공격에 걸릴 확률은 매우 낮고, **샌드박스나 세션 쿠키**를 뚫을 수도 없음 - “픽셀이 순수한 검정인지 감지해서 필터를 켜거나 끄는 예시”를 보며 완전히 혼란스러웠음 왜 HTML/CSS가 이렇게 복잡해졌는지 모르겠음 숨겨진 `<checkbox>`와 `<label>`이 있고, 클릭하면 체크박스가 토글되며, CSS만으로 상태에 따라 스타일이 바뀜 SVG는 실제로 아무것도 그리지 않고 필터만 정의함 `<feTile>`이 두 개나 쓰여서 타일 영역과 출력 영역을 따로 정의하는 구조도 이상함 `<fake-frame>`이나 `<art-frame>` 같은 요소는 또 뭐임? - 나는 이런 구조가 꽤 **멋지다고 생각함**. JavaScript 없이도 인터랙티브한 콘텐츠를 만들 수 있음 `<label>` 클릭 시 체크박스가 토글되는 건 HTML의 기본 동작임 CSS의 `:has()` 선택자를 이용해 상태를 감지함 `<feTile>`은 단일 필터 요소로, 입력 이미지를 타일링하거나 크롭하는 용도로 씀 `<fake-frame>`과 `<art-frame>`은 직접 정의한 **커스텀 엘리먼트**임 관련 내용을 [블로그 글](https://lyra.horse/blog/2025/08/you-dont-need-js/)에 정리했음 - 사실 이런 기능 대부분은 “모던”이라기보다 **90년대부터 존재하던 것들**임 `<label>` 클릭으로 포커스가 이동하는 건 데스크톱 UI의 전통을 따른 것임 체크박스 상태에 따라 스타일을 바꾸는 기능도 Firefox 1 시절부터 있었음 SVG 필터를 HTML에 직접 임베드하는 것도 오래된 기능임 즉, 이건 새로운 HTML의 문제라기보다 **오래된 기능의 조합**임 - 이 데모를 보니 예전 **Flash Player 해킹**이 떠올랐음 사용자가 시스템 스토리지를 허용하도록 속이던 그 방식과 비슷함 벡터 그래픽은 정말 스스로를 제어하지 못하는 존재 같음 - **SVG adder**는 예술 작품 같음. 정말 멋짐 - 매우 강력한 데모였음. 오늘 처음 알았는데, **Turing 완전성**을 위해서는 단순히 기능적 완전성만으로는 부족하고, **저장공간과 임의 접근**이 필요함을 배움 관련 내용은 [Stack Overflow 글](https://stackoverflow.com/questions/4908893/what-logic-gates-are-required-for-turing-completeness/4909412#4909412)에서 참고했음 - 내 안드로이드 Chrome(정확히는 Kiwi 브라우저)에서는 **다크 모드** 때문인지 화면이 깨져 보이거나 이상하게 표시됨 다른 사람도 이런 현상이 있는지 궁금함 - Firefox에서 **Dark Reader**를 꺼야 예제가 제대로 보였음 - **줌 비율이 100%가 아닐 때** QR 관련 예제가 깨짐 - 이 글을 보니 예전에 봤던 [CSS 계산 데모](https://lcamtuf.coredump.cx/css_calc/)가 떠올랐음 - 정말 인상적인 작업임. 어떻게 해결해야 할지는 모르겠지만, **빠른 시일 내에 수정이 필요함** - 너무 멋진 포스트였음. 읽는 내내 즐거웠음