개발자가 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>은 직접 정의한 커스텀 엘리먼트임
관련 내용을 블로그 글에 정리했음
사실 이런 기능 대부분은 “모던”이라기보다 90년대부터 존재하던 것들임 <label> 클릭으로 포커스가 이동하는 건 데스크톱 UI의 전통을 따른 것임
체크박스 상태에 따라 스타일을 바꾸는 기능도 Firefox 1 시절부터 있었음
SVG 필터를 HTML에 직접 임베드하는 것도 오래된 기능임
즉, 이건 새로운 HTML의 문제라기보다 오래된 기능의 조합임
이 데모를 보니 예전 Flash Player 해킹이 떠올랐음
사용자가 시스템 스토리지를 허용하도록 속이던 그 방식과 비슷함
벡터 그래픽은 정말 스스로를 제어하지 못하는 존재 같음
SVG adder는 예술 작품 같음. 정말 멋짐
매우 강력한 데모였음. 오늘 처음 알았는데, Turing 완전성을 위해서는 단순히 기능적 완전성만으로는 부족하고, 저장공간과 임의 접근이 필요함을 배움
관련 내용은 Stack Overflow 글에서 참고했음
내 안드로이드 Chrome(정확히는 Kiwi 브라우저)에서는 다크 모드 때문인지 화면이 깨져 보이거나 이상하게 표시됨
다른 사람도 이런 현상이 있는지 궁금함
Hacker News 의견
개발자가 X-Frame-Options 헤더를 제대로 설정하면 이런 문제는 해결됨
하지만 현실적으로는 보안 문제를 쫓다가 브라우저에서 SVG 스펙의 절반을 삭제하는 식으로 대응할 것 같음
또 프레임이 아닌 HTML 인젝션이 가능한 사이트에서도 이런 공격이 가능함
나는 이미 보안상의 이유로 SVG를 꺼두고 있음
그런데 요즘은 CSS까지 비활성화해야 할지도 모른다는 생각이 듦
CSS가 단순히 텍스트를 꾸미는 용도로 남아 있었으면 좋았을 텐데, 이제는 프로그래밍 언어처럼 변해서 해커나 광고주가 악용하기 쉬워졌음
지금은 거의 불가능에 가까움
“픽셀이 순수한 검정인지 감지해서 필터를 켜거나 끄는 예시”를 보며 완전히 혼란스러웠음
왜 HTML/CSS가 이렇게 복잡해졌는지 모르겠음
숨겨진
<checkbox>와<label>이 있고, 클릭하면 체크박스가 토글되며, CSS만으로 상태에 따라 스타일이 바뀜SVG는 실제로 아무것도 그리지 않고 필터만 정의함
<feTile>이 두 개나 쓰여서 타일 영역과 출력 영역을 따로 정의하는 구조도 이상함<fake-frame>이나<art-frame>같은 요소는 또 뭐임?<label>클릭 시 체크박스가 토글되는 건 HTML의 기본 동작임CSS의
:has()선택자를 이용해 상태를 감지함<feTile>은 단일 필터 요소로, 입력 이미지를 타일링하거나 크롭하는 용도로 씀<fake-frame>과<art-frame>은 직접 정의한 커스텀 엘리먼트임관련 내용을 블로그 글에 정리했음
<label>클릭으로 포커스가 이동하는 건 데스크톱 UI의 전통을 따른 것임체크박스 상태에 따라 스타일을 바꾸는 기능도 Firefox 1 시절부터 있었음
SVG 필터를 HTML에 직접 임베드하는 것도 오래된 기능임
즉, 이건 새로운 HTML의 문제라기보다 오래된 기능의 조합임
이 데모를 보니 예전 Flash Player 해킹이 떠올랐음
사용자가 시스템 스토리지를 허용하도록 속이던 그 방식과 비슷함
벡터 그래픽은 정말 스스로를 제어하지 못하는 존재 같음
SVG adder는 예술 작품 같음. 정말 멋짐
관련 내용은 Stack Overflow 글에서 참고했음
내 안드로이드 Chrome(정확히는 Kiwi 브라우저)에서는 다크 모드 때문인지 화면이 깨져 보이거나 이상하게 표시됨
다른 사람도 이런 현상이 있는지 궁금함
이 글을 보니 예전에 봤던 CSS 계산 데모가 떠올랐음
정말 인상적인 작업임. 어떻게 해결해야 할지는 모르겠지만, 빠른 시일 내에 수정이 필요함
너무 멋진 포스트였음. 읽는 내내 즐거웠음