如何理解data URL？
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 URL
- data URL与传统的url有什么区别？
- data URL在浏览器地址栏输入后是怎样的？
- data URL语法
- data URL由哪四部分组成？
[<mediatype>]详情[;base64]和<data>详情- 常见的data URL形式
- 字符串base64编解码的多种语言实现
- 为何要用base64来表示data URL中的？
- 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。 如何理解这句话呢？看一下这个例子：html
// data URL
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII=
// 传统的URL
https://www.google.com
复制代码
由上面的结果能够看出： data URL与传统的url不一样。 传统的url在浏览器地址栏中输入，能够直接导航到目标地址；而data URL则是一个data的url表现，能够理解为用url表明数据。 一般状况下，这里的数据指代的是图片。java
data URL在浏览器地址栏输入后是怎样的？
一般状况下，能够看到这个url表明的图片。node
<!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!python
data:,Hello%2C%20World! // MIME type和;base64都没有，data和数据间只有`:,`
复制代码
注意引号和空格的percent-encoding（URL-encoding）。 对于CSV数据（”text/csv“），percent-encoding须要保留分隔电子表格行的行尾。git
简单的text/palin数据的base64形式
Hello World!github
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
复制代码
HTML片断：普通标签
<h1>Hello, World!</h1>canvas
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
复制代码
HTML片断：执行js的script标签
<script>alert('hi');</script>c#
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
异常处理的缺失
media的无效参数，或者‘base64’排版错误，都会被忽略，可是不会报错出来。
不支持字符串查询
data URL的数据部分是不透明的，因此若是使用query string（好比<url>?parameter-data）去查询时，将只在数据中包含URL的查询字符串。也就是说查询无效，query也会被当作数据的一部分。
安全问题
许多安全问题(如网络钓鱼)都与data url相关，并在浏览器的顶层导航到它们。 为了解决这些问题，在Firefox 59+中(发布版本，从58开始)，对数据的顶层导航data:// urls已经被禁止。
参考资料：
- 1. 如何理解data URL？
- 2. URL是如何解析的
- 3. Data URL简介及Data URL的利弊
- 4. 如何使用Python处理Missing Data
- 5. jQuery.get(url, [data], [callback], [type])
- 6. 如何使用 JavaScript 解析 URL
- 7. 【译】如何用 JavaScript 来解析 URL
- 8. 如何在Java中进行URL解码？
- 9. HTML5中的 `data-*` 如何处理数据详解
- 10. Blob URL和Data URL有什么区别
- 更多相关文章...
- • XSD 如何使用? - XML Schema 教程
- • 如何伪造ARP响应？ - TCP/IP教程
- • Docker 清理命令
- • ☆技术问答集锦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。