如何理解data URL？

時間 2020-04-24

標籤如何理解 data url 欄目 HTTP/TCP 简体版

原文原文鏈接

canvas有一個很是經常使用的方法canvas.toDataURL()，它會將canvas轉化爲data URL的格式。
一般狀況下這個data URL的類型爲image。
看看下面的例子：javascript

<canvas id="canvas" height="2" width="2"></canvas>

var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
console.log(dataURL);
/*
* data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII=
*/

那麼這個以data:[MIME type];base64,開頭的data URL究竟是什麼東西呢？php

初識data URLhtml
- data URL與傳統的url有什麼區別？
- data URL在瀏覽器地址欄輸入後是怎樣的？
data URL語法java
- data URL由哪四部分組成？
- [<mediatype>]詳情
- [;base64]和<data>詳情
- 常見的data URL形式
字符串base64編解碼的多種語言實現node
- 爲何要用base64來表示data URL中的<data>？
- unix，javascript，node，python，php，java，.net實現base64編碼
data URL常見問題

初識data URL

data URL是一種特殊格式的url，它的前綴是data:
data URL容許內容的建立者將小文件嵌入在documents中
過去被叫作data URIs，直到WHATWG將其改名爲data URL(s)

data URL與傳統的url有什麼區別？

現代瀏覽器將data url視做惟一的不透明來源，而不是負責導航的url。
如何理解這句話呢？看一下這個例子：python

// data URL
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII=
// 傳統的URL
https://www.google.com

由上面的結果能夠看出：
data URL與傳統的url不一樣。
傳統的url在瀏覽器地址欄中輸入，能夠直接導航到目標地址；而data URL則是一個data的url表現，能夠理解爲用url表明數據。
一般狀況下，這裏的數據指代的是圖片。git

data URL在瀏覽器地址欄輸入後是怎樣的？

一般狀況下，能夠看到這個url表明的圖片。github

<!DOCTYPE html>
<html lang="en">
  <body>
    <canvas id="canvas"></canvas>
  </body>
  <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.font = "48px serif";
    ctx.fillText("Hello Canvassssssssss", 0, 75 + 24);
    var dataURL = canvas.toDataURL();
    console.log(dataURL);
  </script>
</html>

data URL語法

data URL由哪四部分組成？

data:[<mediatype>][;base64],<data>

組成	含義
`data:`	前綴
`[<mediatype>]`	MIME type 表明數據的類型
`[;base64]`	可選的base64標識
`<data>`	數據自己

`[<mediatype>]`詳情

mediatype是一個MIME type的字符串，好比'image/jpeg'。
若是忽略的話，默認是"text/plain;charset=US-ASCII"。
canvas.toDataURL()並無忽略，默認MIMIE type爲"image/png"。

`[;base64]`和`<data>`詳情

若是data是純文本，你能夠簡單的嵌入文本（根據document類型使用適當的實體或者轉義）。
若是data不是純文本的話，能夠標識爲base64，而且嵌入base64編碼的二進制數據。

常見的data URL形式

簡單的text/plain數據
簡單的text/palin數據的base64形式
HTML片斷：普通標籤
HTML片斷：執行js的script標籤

簡單的text/plain數據

Hello World!canvas

data:,Hello%2C%20World! // MIME type和;base64都沒有，data和數據間只有`:,`

注意引號和空格的percent-encoding（URL-encoding）。
對於CSV數據（」text/csv「），percent-encoding須要保留分隔電子表格行的行尾。c#

簡單的text/palin數據的base64形式

Hello World!

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

HTML片斷：普通標籤

<h1>Hello, World!</h1>

data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

HTML片斷：執行js的script標籤

<script>alert('hi');</script>

data:text/html,<script>alert('hi');</script>

執行js的script標籤，注意閉script標籤是須要的。

字符串base64編解碼的多種語言實現

爲何要用base64來表示data URL中的`<data>`？

base64字符串是用64進制來表示二進制數據的，它是一個ASCII字符串。
因爲僅僅是經過ASCII字符組成的，因此base64字符串是url-safe的，所以纔將base64應用於data URL的<data>中。

unix，javascript，node，python，php，java，.net實現base64編碼

"foo@gmail.com"
"Zm9vQGdtYWlsLmNvbQ=="

1.unix (author: Peng Zhao)

解碼：echo "Zm9vQGdtYWlsLmNvbQ==" | base64 -D
編碼：echo "foo@gmail.com" | base64

2.javascript (author: Kai Gao)

var encodedData = window.btoa("foo@gmail.com"); // 編碼
var decodedData = window.atob("Zm9vQGdtYWlsLmNvbQ=="); // 解碼
console.log(encodedData,decodedData)

3.nodejs (author: Kai Gao)

//base64編碼
var  b = new Buffer("foo@gmail.com");
var s = b.toString('base64')
console.log("郵箱編碼:"+s)
//base64解碼
var b = new Buffer("Zm9vQGdtYWlsLmNvbQ==","base64")
var s = b.toString();
console.log("郵箱解碼:"+s)

4.python (author: Peng Zhao)

import base64
base64.b64encode("foo@gmail.com")
base64.b64decode("Zm9vQGdtYWlsLmNvbQ==")

5.php (author: Chuang Shen)

<?php
$a = 'foo@gmail.com';
    $b = base64_encode($a);//編碼
    echo $b;
    $c = base64_decode($b);//解碼
    echo $c;  
?>

6.java (author: Chuang Shen)

String str = "foo@gmail.com";
        String encodeStr = new String(Base64.encode(str.getBytes()));
        System.out.println(encodeStr);
        String decodeStr = Base64.base64Decode(encodeStr);
        System.out.println(decodeStr);

7..net (author: Peng Li)

static void Main(string[] args)
        {
            Console.WriteLine("輸入:");
            var str = Console.ReadLine();
            //加密
            byte[] EncryptionByte = Encoding.UTF8.GetBytes(str);
            var EncryptionStr = Convert.ToBase64String(EncryptionByte);

            Console.WriteLine("加密結果：" + EncryptionStr);

            //解密
            byte[] DecryptionByte = Convert.FromBase64String(EncryptionStr);
            var DecryptionStr = Encoding.UTF8.GetString(DecryptionByte);

            Console.WriteLine("解密結果：" + DecryptionStr);

        }

查看字符串base64編解碼的多種語言實現弄清base64多語言實現的前因後果。

data URL常見問題

羅列一些在建立和使用data URL時的常見問題。

data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val

其實它表明的是：

lots of text...<p><a name="bottom">bottom</a>?arg=val

語法
HTML中的格式
長度限制
異常處理的缺失
不支持字符串查詢
安全問題

語法

data URL的格式很是簡單，很容易忘記在data前面添加一個逗號，或者是錯誤的將數據編碼爲base64格式。

HTML中的格式

data URL在文件中提供了一個文件，這個文件相對於閉文檔的寬度可能很是寬。
做爲一URL，data應該將空白格式化好（換行、tab、或者空格），可是在使用base64編碼時會有一些問題。

長度限制

儘管firefox支持無現場的data URL長度，可是瀏覽器不須要支持任何最大特定長度的數據。例如Opera 11瀏覽器將URL的長度限制到65535，data URL限制到65529（65529指的是base64 encoded後的<data>長度）。

主流瀏覽器data URL長度限制

Chrome - 2MB for the current document. Otherwise the limit is the in-memory storage limit for - arbitrary blobs: if x64 and NOT ChromeOS or Android, then 2GB; otherwise, total_physical_memory / 5 (source).

Firefox - unlimited

IE ≥ 9 & Edge - 4GB

引自：Data protocol URL size limitations