data URI 방식

data URI scheme

데이터 URI 스킴은 Uniform Resource Identifier(URI; 유니폼자원 식별자) 스킴으로 데이터를 외부 자원인 것처럼 웹 페이지에 인라인으로 포함할 수 있습니다.파일 리터럴 또는 여기 문서의 형식입니다.이 기술을 사용하면 이미지나 스타일시트 등의 개별 요소를 하나의 Hypertext Transfer Protocol(HTTP) 요구로 가져올 수 있습니다.이러한 [1]요구는 여러 HTTP 요구보다 효율적이며 여러 브라우저 확장에 의해 이미지 [2][3]및 기타 멀티미디어 콘텐츠를 단일 HTML 파일로 패키징하여 페이지를 저장할 수 있습니다.2022년 현재 데이터 URI는 대부분의 주요 브라우저에서 완전히 지원되며 Internet [4]Explorer에서 부분적으로 지원됩니다.

구문

데이터 URI 구문은 [5]1998년8월에 발행된 Request for Comments(RFC) 2397에 정의되어 있으며 URI 방식 구문을 따릅니다.데이터 URI는 다음과 같이 구성됩니다.

데이터: [<media type>][;base64], <data>
  • 그 계획은data. 그 뒤에 콜론(colon)이 붙습니다.:).
  • 옵션의 미디어 타입.미디어 유형 부품은 형식에서 하나 이상의 매개 변수를 포함할 수 있습니다.attribute=value, 세미콜론으로 구분(;). 일반적인 미디어 타입 파라미터는 다음과 같습니다.charset미디어 타입의 문자 세트를 지정합니다.값은 IANA 문자 세트 [6]이름 목록에서 가져옵니다.지정되지 않은 경우 데이터 URI의 미디어 유형은 다음과 같습니다.text/plain;charset=US-ASCII.
  • 옵션인 base64 확장 기능 base64는, 앞의 부분으로부터 세미콜론으로 구분됩니다.존재하는 경우 이는 URI의 데이터 내용이 바이너리 데이터이며 바이너리 투 텍스트 부호화에 Base64 방식을 사용하여 ASCII 형식으로 부호화되어 있음을 나타냅니다.base64 확장기능은 다른 미디어 타입 파라미터와 구별됩니다.이러한 파라미터에는=value컴포넌트 및 미디어 타입 파라미터 뒤에 옵니다.Base64 부호화 데이터는 원래 데이터보다 약 33% 크기 때문에 서버가 HTTP 압축을 지원하거나 삽입 파일이 1KB 미만인 경우에만 Base64 데이터 URI를 사용하는 것이 좋습니다.
  • 이전 부분과 쉼표로 구분된 데이터(,데이터는 0 이상의 옥텟으로 이루어진 일련의 문자입니다.데이터 부분의 길이가 0인 경우에도 데이터 URI에는 쉼표가 필요합니다.데이터 부분에 사용할 수 있는 문자에는 ASCII 대소문자, 숫자 및 다수의 ASCII 구두점 및 특수 문자가 포함됩니다.여기에는 콜론, 세미콜론, 콤마 등 데이터 부분 앞에 있는 URI 컴포넌트의 딜리미터가 포함될 수 있습니다.다른 옥텟은 퍼센트로 인코딩해야 합니다.데이터가 Base64로 인코딩된 경우 데이터 부분은 유효한 Base64 [7]문자만 포함할 수 있습니다.Base64 로 인코딩된 것에 주의해 주세요.data:URI 는 표준 Base64 문자 세트를 사용합니다( 「 」 ） 。+' 및 '/는, 이른바 「URL-safe Base64」문자 집합이 아닌, 문자 62 및 63)로 표시됩니다.

기능의 대부분을 나타내는 데이터 URI의 예를 다음에 나타냅니다.

data:text/vnd-example+xyz;foo=bar;base64,R0lGODdh
data:text/plain;charset=UTF-8;page=21,the%20data:1234,5678(파일: "데이터: 1234,5678")

최소 데이터 URI는data:,는 스킴, 미디어 타입 없음 및 제로렝스 데이터로 구성됩니다.

따라서 URI 구문 전체에서 데이터 URI는 권한 부분, 쿼리 문자열 또는 fragment가 없는 스킴과 경로로 구성됩니다.옵션의 미디어 타입, 옵션의 base64 인디케이터 및 데이터는 모두 URI 패스의 일부입니다.

사용 예

HTML

작은 빨간 점 그림이 포함된 HTML 조각:

< >img src="데이터: image/png;base64,iVBORw0KGgoAAA ANSUHEUGAAUAAAFAFCAAACNBLAAAAHELEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4오와AAABJRU 5ErkJgg==" 알트="빨간 점" />

이 예에서는 포맷을 위해 행이 끊어집니다.데이터 URI를 포함한 실제 URI에서는 제어문자(ASCII 0~31 및 127)와 스페이스(ASCII 32)는 「제외문자」입니다.즉, 데이터 URI에서는 공백 문자를 사용할 수 없습니다.다만, HTML 4 및 HTML 5 의 컨텍스트에서는, 요소 속성치(위의 「src」등)내의 행 피드는 무시됩니다[citation needed].따라서 위의 데이터 URI는 회선 피드를 무시하고 처리되므로 올바른 결과를 얻을 수 있습니다.단, 이는 HTML 기능으로 데이터 URI 기능이 아닙니다.다른 컨텍스트에서는 URI 내의 공백에 의존하여 무시할 수 없습니다.

CSS

배경 이미지를 포함하는 Cascading Style Sheet(CSS; 캐스케이드 스타일 시트) 규칙:

울.체크리스트 리.완성하다 {     패딩 레프트: 20px;     배경: 하얀색 url('데이터: image/png;base64,iVB\' ORW0KGOAAAANSUHEUGAABAAAAAQMAAAALPW0iAAAABLBMVEU\ AAAD//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8\ yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGFyjOXZtQAAAAAEl\ FTkSuQmCC') 무료의 스크롤 왼쪽 정상; }

이 예에서는\ + <linefeed>회선 터미네이터는 CSS의 기능으로 다음 행의 계속을 나타냅니다.이것들은 CSS 스타일시트 프로세서에 의해 삭제되고 데이터 URI는 공백 없이 재구성됩니다.데이터 URI의 데이터 컴포넌트에는 공백이 허용되지 않기 때문입니다.

자바스크립트

각주 링크와 같이 내장된 하위 창을 여는 JavaScript 문:

윈도.열다.('데이터: 텍스트/메시지; charset=utf-8', +     encodeURIC 컴포넌트( // URL 포맷용 이스케이프         '<!DOSCTYPE html>'+         '<timeout lang="en">'+         '<head> <title> 삽입창 </title> </title> </head>'+         '<body><h1>42</h1></body>'+         '/'     ) );

SVG

JPEG 이미지가 포함된 SVG 이미지의 예

Base64에 인코딩된 JPEG 이미지가 포함된 Scalable Vector Graphic 이미지:

<138g> <이미지> 폭="64" 높이="24" href="데이터: image/base64, /9j/4AAQSkZJRGABAQEAYABGAAD/2wBDADIJswlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ+u7Kf r6zI4f/zyNT/16yv+v/9////////wfD//////////////////////////2wBDATU4OEtCS5NRUZP/zq/////////////////////////////// ////////////////////////////////////////ARCAAAYAEADAREA AhEBAxEB/8분기AGQAAAgMBAAAAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAE EAgMAAAAAAAAAAAAQ적외선 AAMSITEEY JBGTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAAA AAD/2gAMAwEAAHEDEQA/AOGM52xQrjvAV5Xv0vfKUALLTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4 MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstfAas4UyRHVJRAkC9KhpLMClQfc2 X1gUj4viwVObKrdH9YDoHvujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYY JLCuxwJCO2O1bwCRidAfWBSctswbI12GAJT3yuFR7+MBJGK2g/WAJR3FdF84E2rK5VR0YH/9k="/> </httpg>

악성 프로그램 및 피싱

데이터 URI 는, 의심하지 않는 Web 유저로부터 유저명과 패스워드를 취득하려고 하는 공격 페이지를 작성하기 위해서 사용할 수 있습니다.또한 Cross-Site Scripting(XSS; 사이트 간 스크립팅) 제한을 회피하고 공격 페이로드를 주소 표시줄에 완전히 삽입하여 서드파티에 [8]의해 제어되는 완전한 웹사이트가 아닌 URL 단축 서비스를 통해 호스트할 수도 있습니다.그 결과 일부 브라우저는 이제 웹 페이지가 데이터 [9]URI로 이동하는 것을 차단합니다.

레퍼런스

  1. ^ "Using Data URIs to Speed Up Your Website". Treehouse Blog. 27 March 2014.
  2. ^ "SingleFile - Chrome Web Store". Chrome Web Store. Retrieved 25 August 2018.
  3. ^ "SingleFile – Add-ons for Firefox". Firefox Add-ons. Retrieved 25 August 2018.
  4. ^ Deveria, Alexis (July 2015). "Can I use..." Retrieved 31 August 2015.
  5. ^ Masinter, L (August 1998). "RFC 2397 - The "data" URL scheme". Internet Engineering Task Force. Retrieved 2008-08-12.
  6. ^ Freed, Ned; Dürst, Martin, eds. (20 December 2013). "Character Sets". Internet Assigned Numbers Authority. Retrieved 31 August 2015.
  7. ^ Berners-Lee, Tim; Fielding, Roy; Masinter, Larry (January 2005). "Uniform Resource Identifiers (URI): Generic Syntax". Internet Engineering Task Force. Retrieved 31 August 2015.
  8. ^ 웹페이지가 없는 피싱– 연구자들은 링크 자체가 어떻게 악의적일 수 있는지 밝혀냈습니다, Sophos, 2012년 8월 31일 https://nakedsecurity.sophos.com/2012/08/31/phishing-without-a-webpage-researcher-reveals-how-a-link-itself-can-be-malicious/
  9. ^ "Data URLs - HTTP MDN". MDN Web Docs. Mozilla. Retrieved 11 May 2018.