개발자 도구 · Base64 인코더 및 디코더
데이터 URI 설명: data:image/png;base64 작동 방식 및 출처
· 배경
베이스64 인코딩
data: URL 구성표는 작은 리소스를 페이지에 직접 삽입하는 방법으로 1998에 지정되었습니다. 이 게시물에서는 문법, Base64가 선택 사항인 이유, 브라우저가 제한하는 부분에 대해 설명합니다.
1,300 문자 URL인 파비콘 — 야생에서 data: URI를 만나고 해당 부분을 읽습니다.
data: URI는 별도의 HTTP 요청을 피하면서 URL에 직접 작은 리소스를 포함합니다. 형식은 RFC 2397(1998에 정의됨)에 지정되며 구성표, 선택적 미디어 유형, 선택적 인코딩 플래그 및 페이로드 자체가 포함된 문법을 사용합니다. 예를 들어 data:text/plain,hello는 hello라는 단어가 포함된 일반 텍스트 데이터 URI입니다. 브라우저는 HTTP 요청을 처리하는 것과 동일한 방식으로 이를 처리하지만 네트워크를 통해 콘텐츠를 가져오는 대신 URL 자체에서 콘텐츠를 디코딩합니다.
데이터 URI는 작은 이미지, CSS 아이콘 및 테스트 픽스처에 가장 일반적입니다. Base64 인코딩을 사용하는 data: URI는 다음과 같습니다. data:image/png;base64,iVBORw0K.... 분석은 다음과 같습니다. data:는 구성표입니다. image/png은 미디어 유형입니다. ;base64는 인코딩 플래그입니다. 긴 문자열은 Base64로 인코딩된 이미지 바이트입니다. 브라우저가 이 URL을 보면 Base64를 디코딩하여 원래 바이트를 복구한 다음 해당 바이트를 사용하여 이미지를 렌더링합니다.
눈에 보이는 문법(미디어 유형, 선택적 Base64 마커 및 페이로드)에서 데이터 URI 읽기
인코딩 플래그가 생략된 경우(data:text/html,<p>hello</p>), 페이로드는 base64가 아닌 퍼센트 인코딩된 UTF-8 텍스트입니다. ;base64가 있으면 브라우저에 적용할 디코딩 규칙을 알려줍니다. 데이터: URI의 미디어 유형은 MIME 유형으로, HTTP 콘텐츠 유형 헤더에 사용되는 것과 동일한 유형 문자열입니다. image/png, text/plain, application/json 및 image/svg+xml는 미디어 유형이 지정되지 않은 경우 기본값은 text/plain;charset=US-ASCII.입니다.
브라우저는 미디어 유형에 따라 바이트를 렌더링하는 방법을 결정해야 합니다. image/png,라고 표시되면 바이트는 PNG입니다. text/html,라고 표시되면 콘텐츠는 HTML입니다. 잘못된 미디어 유형을 지정하면 혼란스러운 결과가 발생할 수 있습니다. text/plain 라벨이 붙은 PNG 파일은 이미지 대신 가비지 문자로 표시됩니다. Base64는 data: URI에서 선택 사항입니다. 텍스트 콘텐츠의 경우 백분율 인코딩(URL 쿼리 문자열에 사용되는 것과 동일한 인코딩)이 base64보다 더 컴팩트한 경우가 많습니다. 데이터 URI 소비자는 미디어 유형과 쉼표 앞의 마커에서 페이로드를 해석하는 방법을 결정합니다. Base64 인코더는 페이로드 문자만 제공합니다. MIME 유형을 추가하지 않으며 바이트가 PNG 또는 SVG를 설명하는지 선택하거나 조합된 주소의 유효성을 검사하지 않습니다.
Base64가 선택적인 이유 - SVG 및 일반 텍스트에 대한 백분율 인코딩 텍스트 페이로드와 바이너리에 대한 Base64
URI data:text/html,<p>Hello</p>에는 HTML이 리터럴 문자로 포함되어 있습니다(따옴표나 꺾쇠 괄호와 같은 특수 문자에 대한 퍼센트 인코딩 포함). Base64는 텍스트로 표시할 수 없는 이진 데이터와 페이로드에 백분율 인코딩이 부풀어오르는 특수 문자가 많이 포함되어 있는 경우에 유용합니다. 작은 SVG 또는 텍스트 파일은 더 작은 백분율로 인코딩될 수 있습니다. 바이너리 파일은 base64여야 합니다. 데이터 구축: URI를 직접 작성하려면 미디어 유형과 인코딩을 알아야 합니다.
SVG 아이콘의 경우 data:image/svg+xml 뒤에 백분율로 인코딩된 SVG 마크업 또는 ;base64 및 base64로 인코딩된 바이트를 사용할 수 있습니다. 퍼센트 인코딩의 경우 SVG를 data:image/svg+xml,로 묶은 다음 꺾쇠 괄호, 따옴표 및 기타 특수 문자를 퍼센트 인코딩합니다. 결과는 길지만 사람이 읽을 수 있습니다. base64의 경우 SVG 바이트를 가져와 base64로 인코딩하고 data:image/svg+xml;base64,를 생성한 다음 base64 문자열을 추가합니다. Base64는 일반적으로 바이너리의 경우 더 간결하지만 SVG 텍스트의 경우 백분율로 인코딩된 형식은 더 짧을 수 있습니다.
작업된 예: 손으로 작은 SVG용 데이터: URI 작성 — 마크업을 텍스트로 인코딩하고 문자열 조합
브라우저 및 소비 애플리케이션은 데이터 URI에 제한 또는 정책 제한을 부과할 수 있지만 이 저장소는 이식 가능한 숫자 한도를 설정하지 않습니다. 메모리 사용, 파서 동작 및 보안 정책도 값이 나타나는 위치에 따라 달라지므로 기억된 제한에 의존하는 대신 정확한 대상 브라우저와 내장 컨텍스트를 테스트하세요.
모든 HTML 파일에 포함된 5 MB 이미지는 페이지 크기를 부풀립니다. 데이터 URI는 CSS 아이콘, 작은 이미지, 테스트 데이터 등 작은 리소스에 가장 적합합니다. 대용량 파일의 경우 브라우저가 응답을 캐시하고 여러 페이지에서 재사용할 수 있으므로 외부 요청이 더 빠릅니다. 데이터: URI는 페이지가 로드될 때마다 인라인됩니다.
가정하기보다는 소비 애플리케이션에서 확인할 브라우저 및 보안 경계
일반적인 임계값은 몇 킬로바이트입니다. 그 아래에는 data: URI가 효율적입니다. 그 이상에서는 일반적으로 외부 파일이 더 빠릅니다. 보안 및 브라우저 정책은 데이터를 제한합니다. 특정 컨텍스트에서 URI 사용이 가능합니다. 피싱을 방지하기 위해 최상위 탐색(데이터: HTML 콘텐츠가 포함된 URI를 가리키는 링크 클릭)이 차단되는 경우가 많습니다. data: script src 속성의 URI는 임의의 JavaScript를 실행하여 보안 위험을 초래할 수 있습니다.
브라우저는 데이터에 CSP(콘텐츠 보안 정책) 규칙을 적용합니다. URI; 엄격한 CSP에서는 이를 완전히 금지할 수 있습니다. img src 또는 iframe src의 data: URI는 일반적으로 허용되지만 스타일 또는 스크립트 컨텍스트에 포함되는 것은 제한될 수 있습니다. 항상 대상 환경의 브라우저 호환성 및 보안 정책을 확인하세요. CSS의 데이터 URI는 작은 배경 이미지에 일반적입니다. 구문은 동일합니다: url(data:image/png;base64,...).
데이터: URI는 여전히 올바른 도구입니다 — CSS 아이콘, 이메일에 안전한 인라인 이미지 및 테스트 픽스쳐
데이터가 포함된 CSS 파일: URI는 모든 이미지가 포함된 단일 파일로 제공될 수 있으므로 HTTP 요청이 줄어듭니다. 이는 작은 아이콘 세트나 간단한 그래픽에 유용합니다. CSS에 포함된 큰 이미지는 파일을 부풀리고 구문 분석 속도를 저하시킵니다. webpack과 같은 최신 빌드 도구는 자동으로 작은 이미지를 데이터로 변환할 수 있습니다. 즉, CSS의 URI와 외부 이미지를 일반 URL로 변환하여 성능의 균형을 맞춥니다.
data: URI 형식은 문법을 지정하지만 data: URI를 사용할 수 있거나 사용할 수 없는 위치를 정의하지 않는 짧은 문서인 RFC 2397에 의해 정의됩니다. 브라우저 공급업체는 보안 및 성능 문제를 기반으로 자체 제한 사항을 추가했습니다.
여기서 다루지 않는 내용 — blob: URL, 개체 URL 및 파일 시스템 액세스
일부 시스템에는 더 이상 사용되지 않는 데이터가 있습니다. 남용을 방지하기 위해 특정 컨텍스트(예: CSP 수준 3의 양식 작업)에서 URI를 지원합니다. data: URI를 사용하는 경우 대상 브라우저에서 테스트하세요. RFC에서는 형식이 유효하다고 말하지만 브라우저의 보안 정책이 이를 차단할 수 있습니다.
데이터 만들기: URI를 수동으로 만드는 것은 프로덕션에서 흔하지 않습니다. 대부분의 빌드 도구와 라이브러리가 변환을 처리합니다. 그러나 형식을 이해하는 것은 디버깅에 유용합니다. CSS 또는 HTML에 긴 data:image/... URL이 표시되면 Base64 인코더 및 디코더 도구를 사용하여 이를 디코딩할 수 있습니다. data:image/...;base64, 접두사를 제거하고 나머지 문자열을 도구에 붙여넣은 다음 디코딩하여 실제 바이트를 확인합니다.
요약: 엄격한 문법이 포함된 작은 형식 - 유효한 URI를 조합할 수 있도록 Base64 인코더 및 디코더가 텍스트 인코딩 단계를 처리하는 방법
SVG 데이터: URI의 경우 텍스트 형식을 퍼센트 디코딩하고 XML 마크업을 읽을 수 있습니다. 데이터 분석 이해: URI를 사용하면 포함된 리소스 문제를 더 쉽게 해결할 수 있습니다. 데이터 URI는 리소스를 URL로 직접 포함할 수 있는 웹 표준(RFC 2397)입니다. 별도의 캐싱으로 이점을 얻지 못하는 작고 안정적인 리소스에 가장 효율적입니다. 형식에는 선택적 미디어 유형 사양과 인코딩 플래그(base64 또는 암시적 백분율 인코딩)가 포함됩니다.
Base64 인코딩은 바이너리 데이터에 필요하지만 텍스트에는 선택 사항입니다. 퍼센트로 인코딩된 SVG는 더 읽기 쉽습니다. 브라우저 보안 정책은 데이터: URI를 사용할 수 있는 위치를 제한하므로 대상 환경의 제한 사항을 이해하는 것이 필수적입니다. Base64 인코더 및 디코더 도구를 사용하면 리소스를 수동으로 인코딩하거나 포함된 URI를 디코딩하여 콘텐츠를 검사할 수 있습니다.