什麼是data:image/png;base64,?一道關於Data URI Scheme的入門級CTF_Web題
阿新 • • 發佈:2020-03-13
## 一道關於Data URI Scheme的入門級CTF_Web題
### 0x00 題目描述
這是偶爾遇到的某網安交流群的入群題,題目沒有任何的提示,直接給了一個`txt`檔案。
![image-20200312221315891](https://img2018.cnblogs.com/blog/1535268/202003/1535268-20200312235834847-689465139.png)
### 0x01 解題過程
通過給的這個檔案的名字,大致可以猜測和圖片有關。我們先開啟這個文字檔案看看這裡面有什麼。
```css
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAoCAIAAAAaOwPZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQuSURBVHhe7ZptmoMgDIR7rh6o5+lpvEwP01XUGshAokgX+8z+7PKRTF6SoN7e/KMCnSlw68wemkMF3oSSEHSnAKHsLiQ0iFCSge4UIJTdhYQGEUoy0J0ChLK7kNAgQkkGulOAUHYXEhpEKMlAdwpcG8rhcRv/HkN3stIgW4F88DYoX89nObjmANuOc0eMXpHHcyX9+mowhgHKmdlChM0BZzvzet6DSSW7xjEWk8Hu+/O1x7zF1237/Uu4t/O46V6sZuARoZb9KqbO7On4rJlykqcYYnNAjSbx3Gmrj6WTzxirVlA+90F82G+nm4fX3zOxgqyKqRaUU7b8FpRDOeyjJa7k5oByT1yWse4mxfDC3NrrprnQtQeUMuUXoURmCGHdKfl/oTS8MElxu2mudO0BXUCZL8efVGU0EmsQjkGpM2H8y/CwGtW1C3el8ywxhHKWxgOlaPNj0VcRRW+OoiKvCXF0o6YeXWLQDaNQyMf1Clhsi22D9HUNXOBCVZamaBmiO5BxRdRQOt3M3oFUAD4/HDolSChx7AvXzRIJQtgsUfMu6HB+HglNLc5d5KiwpcAqTH7Idk/lvLD9Z0rUx4vYWL2UJ4WY6XbdL91ML57+EjsRNEMnw/LCrKklN9NNkbuLvKsdabjM/ZMByh+PDWuuw6kDEYXPzeSfzGARlNG1M1ENRCfGLlUuJ5MVTg+UyxGzC+1+KN/DkDyuTSVbqo7vNnagfKPTrH9b8pQtgQ/PRCifDTaUJaIWw8adUycklLrcppkyCZfkJ5cYlSZnQTkmsYf58OYAlMpg6JnlhYlC9uxhIdWvbr1NS8Ahc9pgQlkkai3fOorVUK4JGeYTJIgVTm+mnCqrmSfOgDJ0mOlOlhcmClk3M0KmPzeF0mnDGVB6LjqbmKB8p5GRQ34DStRCdpEpp5MRNWRNocwsjk9i7nyqugzPYTWUSZuqe0qVucAT5tgH9ITmxEdCdihjpcCVAgfI8uJ4pgx3K3UhgBeRQ9dtbJmjp1TnYmsKoSH1UGqKE23mxlrsri4yKsuAFnZ5BrAugypw0/IdSvHmxHJbEI6lREzj0asuOc7TR8BONdd9pNKCo4LRNY9CdgCEXjqObDhQvsFpy7z7DsqHP9khxp9DzNeKbSR+Iy3/n31tqVFYe17xFUZkTu507+4px4USFwBRm32lbzFyXphgRMtn3cwqqaef8a0UrMHlaJYM8RC1Iq2DeOXvKUdVjALmzromST8+4N+Egm9rrwzl/DpAVlddnE9su36Jyx6ECtkUxufaUMJOzfwQsxldUbnTLyO/ckCcNsS112yDmkkGF/4xKL8rHndrowChbKMrV61QgFBWiMepbRQglG105aoVChDKCvE4tY0ChLKNrly1QgFCWSEep7ZRgFC20ZWrVihAKCvE49Q2ChDKNrpy1QoF/gDXIhmWmc+CSAAAAABJRU5ErkJggg==
```
開啟之後,我們可以看到這個檔案內容的格式:
`data:image/png;base64,`後面是一段Base64編碼。
本來看到了base64,只想到解密。但是卻沒解出來東西。猜測與前面的內容有關,於是百度了一下。
於是瞭解到這一段內容就相當與一個`url`,我們複製到位址列中便可直接開啟。
![image-20200312222358990](https://img2018.cnblogs.com/blog/1535268/202003/1535268-20200312235834610-1448801398.png)
開啟之後是一張圖片,圖片上顯示這我們的flag。
![image-20200312222511738](https://img2018.cnblogs.com/blog/1535268/202003/1535268-20200312235834089-1804022688.png)
### 0x03 相關知識
#### data URI scheme
上面我們見到的那種形式的程式碼就是`Data URI Scheme`。那麼什麼是`Data URI Scheme`呢?
> The data URI scheme is a uniform resource identifier (URI) scheme that provides a way to include data in-line in Web pages as if they were external resources.
>
> 摘自維基百科
**data URI scheme**(資料URI方案)是**URI**(統一資源識別符號)方案,它提供了一種在**網頁中內聯包含資料**的方式,這些資料好像它們是外部資源一樣。它目的是將一些小的資料,直接嵌入到網頁中,這樣就不用再從外部檔案載入。常常用於把圖片嵌入網頁中。
#### 語法
```
data:[][;base64],
```
`data`代表方案名稱,後面跟`:`
``為可選的以部分,這部分表示媒體型別,可以有一個或多個引數,不同引數之間用`;`分隔。引數的格式為`attribute=value`。比如我們可以指定編碼的字符集`charset`;資料的`MIME 型別`;以及編碼格式。也就是這種格式`data:[][;charset=][;],`
`;base64`也是可選的部分。如果存在,則表示URI的資料內容是二進位制資料,使用**Base64方案**以**ASCII格式**編碼。由於base64方案會是檔案增大$\frac13$左右,所以data URI scheme一般用於較小的資料。
``表示資料。前面用`,`分隔。即使資料為空,這個`,`也不能丟掉。資料部分中允許的字元包括ASCII大寫和小寫字母,數字以及許多ASCII標點和特殊字元。如果資料是B**ase64編碼**的,則資料部分可能僅包含有效的Base64字元
例如
```
data:text/plain;charset=UTF-8;page=21,the%20data:1234,5678
(outputs: "the data:1234,5678")
```
#### 用法
平常我們用HTML插入一張圖片一般是這個樣子,
```html
```
如果我們使用data URI scheme可以這樣:
```html
```
前者我們開啟這個圖片時會發出HTTP請求,去訪問外部資源,從而顯示出來這張圖片;
而後者則沒有發出HTTP請求,直接從HTML檔案中讀取到檔案的值,從而顯示出來。
#### 支援的型別
```css
data:, 文字資料
data:text/plain, 文字資料
data:text/html, HTML程式碼
data:text/html;base64, base64編碼的HTML程式碼
data:text/css, CSS程式碼
data:text/css;base64, base64編碼的CSS程式碼
data:text/javascript, Javascript程式碼
data:text/javascript;base64, base64編碼的Javascript程式碼
data:image/gif;base64, base64編碼的gif圖片資料
data:image/png;base64, base64編碼的png圖片資料
data:image/jpeg;base64, base64編碼的jpeg圖片資料
data:image/x-icon;base64, base64編碼的icon圖片資料
...
```
#### 優缺點
##### 優
- 可以減少對資源的請求;
- 可解決外部資源受限問題;
##### 卻
- 資源不會被瀏覽器快取,每次訪問都要重新獲取;
- 可以放在樣式表`css`中,與樣式表一起被快取;
- 資源會比原來的大1/3;
## 0x04 參考資料
[1] [data URI scheme](https://en.wikipedia.org/wiki/Data_URI_scheme)
[2] [前端-Data URI Scheme](https://www.jianshu.com/p/ea49397fcd13)
[3] [Css中路徑data:image/png;base64的用法詳解](https://www.aimks.com/css-path-data-image-png-usage-base6
![](mages/image.jpeg)