파비콘에 웹사이트 저장하기: 기술적 개념 증명
파비콘에 웹사이트 저장하기: 기술적 개념 증명
HTML 데이터를 이미지 픽셀로 인코딩하기
Tim Wehrle는 웹사이트의 HTML 콘텐츠를 파비콘 내에 직접 저장하는 개념 증명을 시연했습니다. 이는 이미지 픽셀의 RGB(Red, Green, Blue) 채널을 원시 바이트 저장소로 취급하여, 파비콘을 시각적 아이콘이 아닌 데이터 컨테이너로 효과적으로 사용하는 방식입니다.
인코딩 프로세스
웹사이트를 파비콘에 저장하기 위해, 콘텐츠는 텍스트에서 바이트로 변환된 후 픽셀에 매핑됩니다:
- 바이트 변환: HTML 페이로드는
TextEncoder를 사용하여 바이트 배열로 변환됩니다. - 길이 헤더: 페이로드 길이를 저장하기 위해 배열 앞에 4바이트 헤더가 추가됩니다. 이는 이미지가 사용되지 않은 나머지 픽셀을 포함할 수 있으므로, 디코더가 데이터가 정확히 어디서 끝나는지 알 수 있도록 보장합니다.
- 픽셀 매핑: 각 바이트는 색상 채널에 할당됩니다. 첫 번째 바이트는 첫 번째 픽셀의 red 채널이 되고, 두 번째 바이트는 green, 세 번째 바이트는 blue가 됩니다. 이 프로세스는 이미지의 모든 픽셀에 걸쳐 순차적으로 반복됩니다.
저장 효율성 및 크기
각 픽셀이 3바이트의 데이터를 저장하므로, 이미지 크기에 비해 저장 용량이 매우 높습니다. 208바이트의 페이로드와 4바이트 헤더(총 212바이트)의 경우, 단 71개의 픽셀만 필요합니다. 9x9 픽셀 정사각형 이미지는 81개의 픽셀을 제공하므로 총 239바이트의 용량을 제공합니다. 이 특정 구현체에서는 212바이트 페이로드가 9x9 이미지의 가용 공간의 87%를 사용했습니다.
콘텐츠 디코딩 및 렌더링하기
저장된 웹사이트를 불러오기 위해서는 이미지 데이터를 읽고 HTML을 재구성하는 JavaScript bootstrap loader가 필요합니다.
데이터 추출 워크플로우
- 이미지 로딩: 브라우저는 파비콘을 표준 이미지로 로드합니다.
- Canvas 렌더링: 이미지는 HTML5 Canvas 요소에 그려집니다.
- 픽셀 추출: Canvas API를 사용하여 모든 픽셀의 RGB 값을 읽습니다.
- 재구성: 바이트는 작성된 것과 동일한 순서로 RGB 채널에서 추출되며, 처음 4바이트는 페이로드 길이를 결정하는 데 사용됩니다.
- 디코딩: 바이트 배열은 다시 UTF-8 텍스트로 디코딩되어 문서의 body에 주입됩니다.
웹 에셋 내의 대안적인 데이터 저장 방법
픽셀 기반 방식은 경계 테스트를 위한 창의적인 연습이지만, 웹 에셋 내에 데이터를 숨기거나 저장하는 다른 기술적 방법들이 존재합니다:
- SVG 마크업: SVG 파비콘은 XML 기반이므로, 마크업이나 텍스트를 직접 SVG 파일 내에 저장하고
fetch요청과 regex 매칭을 통해 추출할 수 있습니다. - PNG 메타데이터: PNG 형식은 이미지의 시각적 외형을 변경하지 않고 임 arbitrary text 데이터를 저장할 수 있게 해주는 특정 comment chunks (
tEXt,zTXt,iTXt)를 지원합니다. - ICO 형식:
.ico형식은 단일 파일 내에 다양한 해상도의 여러 아이콘을을 제공하므로 데이터 저장 공간을 추가로 제공합니다. - Favicon Cache: 일부 연구자들은 브라우저가 시크릿 모드에서 캐시를 무분별하게 재사용할 경우, 파비콘 캐시가 도메인 간 사용자 추적 또는 핑거프린팅에 사용될 수 있다고 언급했습니다.
기술적 한계
이 방법은 표준 웹 호스팅을 위한 실용적인 대체재는 아닙니다. 작동을 위해서는 JavaScript bootstrap loader가 필요하며, 이는 파비콘이 스스로 웹사이트를 렌더링할 수 없음을 의미합니다. 또한, 저장할 수 있는 데이터의 양은 이미지 크기에 의해 매우 제한적입니다. 커뮤니티 멤버들이 언급했듯이, 일부 개인정보 보호 중심 브라우저(예: Brave)는 추적 방지 기능이가 활성화된 경우 파비콘 로딩을 차단할 수 있으며, 이는 bootstrap loader가 데이터에 접근하는 것을 방해할 수 있습니다.