diff --git a/files/ko/web/http/basics_of_http/data_urls/index.md b/files/ko/web/http/basics_of_http/data_urls/index.md index 65b75701ef7e9b..54c7848b4ecaa2 100644 --- a/files/ko/web/http/basics_of_http/data_urls/index.md +++ b/files/ko/web/http/basics_of_http/data_urls/index.md @@ -1,86 +1,110 @@ --- -title: 데이터 URIs +title: 데이터 URI slug: Web/HTTP/Basics_of_HTTP/Data_URLs +l10n: + sourceCommit: 997a0ec66e1514b7269076195b2419db334e876e --- {{HTTPSidebar}} -**Data URIs**, `data:` 스킴이 접두어로 붙은 URL은 컨텐츠 작성자가 작은 파일을 문서 내에 인라인으로 삽입할 수 있도록 해줍니다. +**데이터 URL**, `data:` 스킴이 접두어로 붙은 URL은 컨텐츠 작성자가 작은 파일을 문서 내에 인라인으로 삽입할 수 있도록 해줍니다. WHATWG에 의해 해당 이름이 없어질 때까지 이전에는 "데이터 URI"로 알려졌습니다. + +> **참고:** 데이터 URL은 탐색을 담당하는 설정 객체의 출처를 상속받지 않고 최신 브라우저에서 고유하고 불투명한 출처로 처리됩니다. ## 구문 -Data URIs는 접두사(`data:`), 데이터의 타입을 가리키는 MIME 타입, 텍스트가 아닌 경우 사용될 부가적인 `base64` 토큰 그리고 데이터 자체 총 네가지 부분으로 구성됩니다. +데이터 URI는 접두사(`data:`), 데이터의 타입을 가리키는 [MIME 타입](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types), 텍스트가 아닌 경우 사용될 부가적인 `base64` 토큰 그리고 데이터 자체 총 네가지 부분으로 구성됩니다. -``` +```plain data:[][;base64], ``` -`mediatype`이란, MIME 타입을 말합니다(JPEG 이미지의 경우 `'image/jpeg'`). 만약 생략된다면, 기본 값으로 `text/plain;charset=US-ASCII`이 사용됩니다.`` +`mediatype`이란, [MIME type](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types)을 말합니다(JPEG 이미지의 경우 `'image/jpeg'`). 만약 생략된다면, 기본 값으로 `text/plain;charset=US-ASCII`이 사용됩니다. + +데이터에 [RFC 3986에 예약된 문자로 정의된 문자](https://datatracker.ietf.org/doc/html/rfc3986#section-2.2)가 포함되어 있거나, 공백 문자, 개행 문자 또는 기타 인쇄할 수 없는 문자가 포함되어 있는 경우, 해당 문자는 [URL 인코딩](https://en.wikipedia.org/wiki/URL_encoding)된 문자여야 합니다. -데이터가 텍스트인 경우, 단순히 텍스트를 (포함된 문서 유형에 따라 적합한 엔티티 혹은 이스케이프를 사용하여) 임베드할 수 있습니다. 그게 아니라면, base64로 인코딩된 이진 데이터를 임베드하기 위해 `base64`를 지정할 수 있습니다. +데이터가 텍스트인 경우, 단순히 텍스트를 (포함된 문서 유형에 따라 적합한 엔티티 혹은 이스케이프를 사용하여) 포함할 수 있습니다. 그게 아니라면, base64로 인코딩된 이진 데이터를 포함하기 위해 `base64`를 지정할 수 있습니다. MIME 유형에 대한 자세한 내용은 [여기](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types) 및 [여기](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)에서 확인할 수 있습니다. -몇 가지 예제: +몇 가지 예제입니다. - `data:,Hello%2C%20World!` - - : 간단한 text/plain 데이터 -- `data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D` + - : 간단한 text/plain 데이터 `Hello, World!`, 쉼표는 `%2C`로 [URl 인코딩](https://en.wikipedia.org/wiki/URL_encoding)되고 공백 문자는 `%20`으로 표시됩니다. +- `data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==` - : 위 예제의 base64 인코딩 버전 - `data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E` - - : `

Hello, World!

인 HTML 문서` -- `data:text/html,` - - : 자바스크립트 얼럿을 실행하는 HTML 문서입니다. 닫기 스크립트 태그가 필요하다는 것을 기억하세요. + - : `

Hello, World!

`인 HTML 문서 +- `data:text/html,%3Cscript%3Ealert%28%27hi%27%29%3B%3C%2Fscript%3E` + - : `` 자바스크립트 경고문을 실행하는 HTML 문서입니다. 닫기 스크립트 태그가 필요하다는 것을 기억하세요. ## base64 포맷으로 데이터 인코딩하기 -리눅스와 Mac OS X 시스템의 명령줄에서 `uuencode` 유틸리티를 사용해 쉽게 인코딩할 수 있습니다: +Base64는 이진 데이터를 {{Glossary("ASCII")}} 문자열 형식으로 기수-64 표현으로 변환하여 나타내는 이진-텍스트 인코딩 체계 그룹입니다. ASCII 문자로만 구성되므로 base64 문자열은 일반적으로 URL로부터 안전하므로 데이터 URL에서 데이터를 인코딩하는 데 사용할 수 있습니다. -``` -uuencode -m infile remotename +### JavaScript에 인코딩하기 + +Web API에는 [Base64](/ko/docs/Glossary/Base64)로 인코딩하거나 디코딩하는 기본 메서드가 있습니다. + +### Unix System에 인코딩하기 + +Linux 및 macOS 시스템의 Base64 인코딩은 명령줄 `base64`(또는 대안으로 `-m` 인수가 포함된 `uuencode` 유틸리티)를 사용하여 수행할 수 있습니다. + +```bash +echo -n hello|base64 +# 콘솔에 찍히는 결과: aGVsbG8= + +echo -n hello>a.txt +base64 a.txt +# 콘솔에 찍히는 결과: aGVsbG8= + +base64 a.txt>b.txt +# b.txt에 찍히는 결과: aGVsbG8= ``` -`infile` 파라메터는 base64 포맷으로 인코딩하려는 파일의 이름이며, `remotename`는 파일에 대한 원격지 이름으로 `data` URLs내에서는 실제로 사용되지 않습니다. +### Windows에 인코딩하기 -출력은 다음과 같은 내용일 겁니다: +Windows에서는 PowerShell의 [Convert.ToBase64String](https://docs.microsoft.com/dotnet/api/system.convert.tobase64string?view=net-5.0)을 사용하여 Base64 인코딩을 수행할 수 있습니다. +```plain +[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello")) +# b.txt에 찍히는 결과: aGVsbG8= ``` -begin-base64 664 test -YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK -==== + +또는, GNU/Linux 셸(예, [WSL](https://en.wikipedia.org/wiki/Windows_Subsystem_for_Linux))은 `base64` 유틸리티를 제공합니다. + +```bash +bash$ echo -n hello | base64 +# 콘솔에 찍히는 결과: aGVsbG8= ``` -Data URI는 초기 헤더줄 다음의 인코딩된 데이터를 사용하게 됩니다. +## 일반적인 문제점 -### 웹 페이지에서 JavaScript 사용하기 +이 섹션에서는 `데이터` URL를 만들고 사용할 때 일반적으로 발생하는 문제점들에 대해 설명합니다. -웹 API는 base64로 인코딩하거나 디코딩하기 위한 프리미티브를 가지고 있습니다: [Base64 인코딩과 디코딩](/ko/docs/Web/JavaScript/Base64_encoding_and_decoding). +```html +data:text/html,lots of text…

bottom?arg=val

+``` -## 일반적인 문제점 +내용이 다음과 같은 HTML 리소스를 나타냅니다. -이 섹션에서는 `data` URIs를 만들고 사용할 때 일반적으로 발생하는 문제점들에 대해 설명합니다. +```html +lots of text… +

bottom?arg=val

+``` - 구문 - - : `data` URIs를 위한 문법은 매우 간단하지만, "data" 세그먼트 앞에 콤마를 넣는 것을 쉽게 잊거나 데이터를 base64 포맷으로 부정확하게 인코딩하는 경우가 있습니다. + - : `데이터` URL를 위한 문법은 매우 간단하지만, "data" 세그먼트 앞에 콤마를 넣는 것을 쉽게 잊거나 데이터를 base64 형식으로 부정확하게 인코딩하는 경우가 있습니다. - HTML 내에 포맷시키기 - - : `data` URI는 동봉된 문서의 너비에 비례할 가능성이 높은 파일 내에 파일을 제공하게 됩니다. URL로 `data`를 공백 문자(라인 피드, 탭 혹은 스페이스)을 사용해 포맷이 가능해야 하지만 [base64 인코딩을 사용할 때](https://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12) 일어나는 실질적인 문제가 있습니다. + - : `데이터` URL는 동봉된 문서의 너비에 비례할 가능성이 높은 파일 내에 파일을 제공하게 됩니다. URL로 `데이터`를 공백 문자(라인 피드, 탭 혹은 스페이스)을 사용해 포맷이 가능해야 하지만 [base64 인코딩을 사용할 때](hhttps://bugzil.la/73026#c12) 일어나는 실질적인 문제가 있습니다. - 길이 제한 - - : 파이어폭스는 기본적으로 길이 제한이 없는 `data` URIs를 지원하지만, 브라우저들은 데이터의 개별적인 최대 길이를 제공해야 할 의무가 없습니다. 예를 들어, 오페라 11 브라우저는 `data` URL을 65529 문자로 제한하는 65535 개의 character long으로 제한합니다(MIME 타입을 지정하지 않고 plain `data`를 사용한다면, 소스가 아닌 인코딩된 데이터의 길이는 65529자가 됩니다). + - : 브라우저들은 데이터의 개별적인 최대 길이를 제공해야 할 의무가 없습니다. 예를 들어, Opera 11 브라우저는 URL을 65535자로 제한하여, `data` URL을 65529 문자로 제한합니다.(MIME 타입을 지정하지 않고 plain `data`를 사용한다면, 소스가 아닌 인코딩된 데이터의 길이는 65529자가 됩니다). Firefox 버전 97 이상에서는 최대 32MB의 `data` URL을 지원합니다(97 이전에는 한도가 256MB에 비슷했습니다). Chromium 객체는 512MB가 넘는 URL에, Webkit(Safari)은 2048MB가 넘는 URL에 적용됩니다. - 오류 처리의 부족 - - : 미디어 내의 유효하지 않은 파라메터들 또는 '`base64`'를 지정할 때 오타들은 무시되지만 오류가 발생하지는 않습니다. + - : 미디어 내의 유효하지 않은 매개변수들 또는 '`base64`'를 지정할 때 오타들은 무시되지만 오류가 발생하지는 않습니다. - 쿼리 문자열에 대한 미지원 등 + - : 데이터 URL의 데이터 일부는 불명확해서 데이터 URL를 이용해 쿼리 문자열(`?parameter-data` 문법을 이용한 페이지 특정의 파라메터)을 사용하려는 시도는 URL이 나타내는 데이터 내에 쿼리 문자열을 포함하게 됩니다. +- 보안 이슈 + - : 많은 보안 문제(예, 피싱)가 데이터 URL과 연관되어 있으며, 브라우저의 최상위 수준에서 해당 URL로 이동합니다. 이 문제를 완화하기 위해 `data:` URL에 대한 최상위 탐색은 모든 최신 브라우저에서 차단됩니다. 자세한 내용은 [Mozilla 보안 팀의 이 블로그 포스트](https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-59/)를 참조하세요. - - : data URI의 data 일부는 불명확해서 데이터 URI를 이용해 쿼리 문자열(`?parameter-data` 문법을 이용한 페이지 특정의 파라메터)을 사용하려는 시도는 URI가 나타내는 데이터 내에 쿼리 문자열을 포함하게 됩니다. 예를 들어: - - ``` - data:text/html,lots of text...

bottom?arg=val - ``` - - 이는 내용이 다음과 같은 HTML 리소스를 나타냅니다: - - ``` - lots of text...

bottom?arg=val - ``` - -## 명세 +## 명세서 {{Specifications}} @@ -88,10 +112,11 @@ Data URI는 초기 헤더줄 다음의 인코딩된 데이터를 사용하게 {{Compat}} -## 함께 참고할 내용 +## 같이 보기 -- [Base64 인코딩과 디코딩](/ko/docs/Web/JavaScript/Base64_encoding_and_decoding) -- {{domxref("WindowBase64.atob","atob()")}} -- {{domxref("WindowBase64.btoa","btoa()")}} +- [Base64](/ko/docs/Glossary/Base64) +- [URL 인코딩](https://en.wikipedia.org/wiki/URL_encoding) +- {{domxref("atob","atob()")}} +- {{domxref("btoa","btoa()")}} - [CSS `url()`](/ko/docs/Web/CSS/uri) -- [URI](/ko/docs/URI) +- [URI](/ko/docs/Glossary/URI)