数据url

数据 URL
数据 URL,即以该方案为前缀的 URL,允许内容创建者在文档中内联嵌入小文件。它们以前被称为“数据 URI”,直到该名称被 WHATWG 停用。data:

注意:数据 URL 被现代浏览器视为唯一的不透明来源,而不是继承负责导航的设置对象的来源。

语法
数据 URL 由四个部分组成:前缀 ()、指示数据类型的 MIME 类型、可选标记(如果是非文本的)和数据本身:data:base64

data:[<mediatype>][;base64],<data>
是 MIME 类型的字符串,例如用于 JPEG 图像文件。如果省略,则默认为mediatype'image/jpeg'text/plain;charset=US-ASCII

如果数据包含在 RFC 3986 中定义为保留字符的字符,或者包含空格字符、换行符或其他非打印字符,则必须对这些字符进行百分比编码。

如果数据是文本的,则可以嵌入文本(根据封闭文档的类型使用适当的实体或转义符)。否则,您可以指定嵌入 base64 编码的二进制数据。您可以在此处和此处找到有关 MIME 类型的更多信息。base64

举几个例子:

data:,Hello%2C%20World%21
文本/纯数据 .请注意,逗号的百分比编码为 ,空格字符的 。Hello, World!%2C%20

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
上述的 base64 编码版本

data:text/html,%3Ch1%3EHello%2C%20World%21%3C%2Fh1%3E
一个 HTML 文档,其中包含<h1>Hello, World!</h1>

data:text/html,%3Cscript%3Ealert%28%27hi%27%29%3B%3C%2Fscript%3E
带有该文档的 HTML 文档会执行 JavaScript 警报。请注意,结束脚本标记是必需的。<script>alert('hi');</script>

将数据编码为 base64 格式
Base64 是一组二进制到文本的编码方案,通过将二进制数据转换为基数 64 表示形式,以 ASCII 字符串格式表示二进制数据。通过仅包含 URL 语法允许的字符(“URL 安全”),我们可以安全地在数据 URL 中编码二进制数据。Base64 使用字符 和 ,这些字符在 URL 中可能具有特殊含义。由于数据 URL 没有 URL 路径段或查询参数,因此在此上下文中,此编码是安全的。+/

JavaScript 中的编码
Web API 具有对 base64 进行编码或解码的本机方法:Base64。

在 Unix 系统上编码
在 Linux 和 macOS 系统上,可以使用命令行(或者,作为替代方案,使用带有参数的实用程序)实现文件或字符串的 Base64 编码。base64uuencode-m

巴什
复制到剪贴板
echo -n hello|base64
# outputs to console: aGVsbG8=

echo -n hello>a.txt
base64 a.txt
# outputs to console: aGVsbG8=

base64 a.txt>b.txt
# outputs to file b.txt: aGVsbG8=
在 Microsoft Windows 上编码
在 Windows 上,PowerShell 中的 Convert.ToBase64String 可用于执行 Base64 编码:

[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello"))
# outputs to console: aGVsbG8=
或者,GNU/Linux shell(例如 WSL)提供实用程序:base64

巴什
复制到剪贴板
bash$ echo -n hello | base64
# outputs to console: aGVsbG8=
常见问题
本节介绍在创建和使用URL时经常出现的问题。data

[HTML全文]
复制到剪贴板
data:text/html,lots of text…<p><a name%3D"bottom">bottom</a>?arg=val</p>
这表示一个 HTML 资源,其内容为:

[HTML全文]
复制到剪贴板
lots of text…
<p><a name="bottom">bottom</a>?arg=val</p>
语法
URL 的格式非常简单,但很容易忘记在“data”段之前添加逗号,或者错误地将数据编码为 base64 格式。data

HTML 格式化
URL 提供文件中的文件,相对于封闭文档的宽度,该文件可能非常宽。作为 URL,应为带有空格(换行符、制表符或空格)的格式可格式化,但在使用 base64 编码时会出现实际问题。datadata

长度限制
浏览器不需要支持任何特定的最大数据长度。例如,Opera 11 浏览器将 URL 长度限制为 65535 个字符,而 URL 限制为 65529 个字符(如果使用纯文本,则为 65529 个字符,而不是源的长度,未指定 MIME 类型)。Firefox 版本 97 及更新版本支持最大 32MB 的 URL(在 97 之前,限制接近 256MB)。Chromium 反对超过 512MB 的 URL,而 Webkit (Safari) 反对超过 2048MB 的 URL。datadata:data

缺乏错误处理
媒体中的无效参数或指定时的拼写错误将被忽略,但不会提供任何错误。'base64'

不支持查询字符串等。
数据 URL 的数据部分是不透明的,因此尝试将查询字符串(特定于页面的参数,带有语法)与数据 URL 一起使用时,只会在 URL 表示的数据中包含查询字符串。<url>?parameter-data

安全问题
许多安全问题(例如,网络钓鱼)与数据 URL 相关联,并在浏览器的顶层导航到它们。为了缓解此类问题,所有现代浏览器都会阻止对 URL 的顶级导航。有关更多详细信息,请参阅 Mozilla 安全团队的这篇博客文章。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

桔梗.py

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值