Verzeichnis suchen
Guides Access control CORS Authentication Browser detection using the user agent Caching Caching FAQ Compression Conditional requests Connection management in HTTP 1.x Content negotiation Content negotiation: List of default Accept values Cookies CSP Messages Overview Protocol upgrade mechanism Proxy servers and tunneling Proxy servers and tunneling: Proxy Auto-Configuration (PAC) file Public Key Pinning Range requests Redirections Resources and specifications Resources and URIs Response codes Server-Side Access Control Session Guides: Basics Basics of HTTP Choosing between www and non-www URLs Data URIs Evolution of HTTP Identifying resources on the Web MIME Types MIME types: Complete list of MIME types CSP Content-Security-Policy Content-Security-Policy-Report-Only CSP: base-uri CSP: block-all-mixed-content CSP: child-src CSP: connect-src CSP: default-src CSP: font-src CSP: form-action CSP: frame-ancestors CSP: frame-src CSP: img-src CSP: manifest-src CSP: media-src CSP: object-src CSP: plugin-types CSP: referrer CSP: report-uri CSP: require-sri-for CSP: sandbox CSP: script-src CSP: style-src CSP: upgrade-insecure-requests CSP: worker-src Headers Accept Accept-Charset Accept-Encoding Accept-Language Accept-Ranges Access-Control-Allow-Credentials Access-Control-Allow-Headers Access-Control-Allow-Methods Access-Control-Allow-Origin Access-Control-Expose-Headers Access-Control-Max-Age Access-Control-Request-Headers Access-Control-Request-Method Age Allow Authorization Cache-Control Connection Content-Disposition Content-Encoding Content-Language Content-Length Content-Location Content-Range Content-Type Cookie Cookie2 Date DNT ETag Expect Expires Forwarded From Headers Host If-Match If-Modified-Since If-None-Match If-Range If-Unmodified-Since Keep-Alive Large-Allocation Last-Modified Location Origin Pragma Proxy-Authenticate Proxy-Authorization Public-Key-Pins Public-Key-Pins-Report-Only Range Referer Referrer-Policy Retry-After Server Set-Cookie Set-Cookie2 SourceMap Strict-Transport-Security TE Tk Trailer Transfer-Encoding Upgrade-Insecure-Requests User-Agent User-Agent: Firefox Vary Via Warning WWW-Authenticate X-Content-Type-Options X-DNS-Prefetch-Control X-Forwarded-For X-Forwarded-Host X-Forwarded-Proto X-Frame-Options X-XSS-Protection Methods CONNECT DELETE GET HEAD Methods OPTIONS PATCH POST PUT Status 100 Continue 101 Switching Protocols 200 OK 201 Created 202 Accepted 203 Non-Authoritative Information 204 No Content 205 Reset Content 206 Partial Content 300 Multiple Choices 301 Moved Permanently 302 Found 303 See Other 304 Not Modified 307 Temporary Redirect 308 Permanent Redirect 400 Bad Request 401 Unauthorized 403 Forbidden 404 Not Found 405 Method Not Allowed 406 Not Acceptable 407 Proxy Authentication Required 408 Request Timeout 409 Conflict 410 Gone 411 Length Required 412 Precondition Failed 413 Payload Too Large 414 URI Too Long 415 Unsupported Media Type 416 Range Not Satisfiable 417 Expectation Failed 426 Upgrade Required 428 Precondition Required 429 Too Many Requests 431 Request Header Fields Too Large 451 Unavailable For Legal Reasons 500 Internal Server Error 501 Not Implemented 502 Bad Gateway 503 Service Unavailable 504 Gateway Timeout 505 HTTP Version Not Supported 511 Network Authentication Required Status
Figuren

数据 URL,以该模式data:为前缀的 URL,允许内容创建者将小文件嵌入文档中。

注意:现代浏览器将数据 URL 视为唯一不透明的起源,而不是继承设置对象的原点

负责导航。

语法

数据 URL 由四部分组成:前缀(data:),指示数据类型的 MIME 类型,非文本形式的可选base64标记以及数据本身:

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

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

如果数据是文本的,则可以简单地嵌入文本(使用适当的实体或基于封闭文档类型的转义符)。否则,您可以指定base64嵌入 base64 编码的二进制数据。

几个示例:

data:,Hello%2C%20World!简单的纯文本/数据data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D的 base64 编码版本,上面data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E有一个 HTML 文件<h1>Hello, World!</h1>data:text/html,<script>alert('hi');</script>执行 JavaScript 警告的 HTML 文档。请注意,关闭脚本标记是必需的。

将数据编码为 base64 格式

这可以通过Linux和Mac OS X系统上的命令行uuencode实用程序轻松完成:

uuencode -m infile remotename

infile参数是要编码为 Base64 格式的文件名,remotename是不实际使用的远程名称data网址的文件。

输出结果如下所示:

begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK====

数据 URL 将使用初始标题行之后的编码数据。

在网页中使用 JavaScript

Web API 有基本的编码或解码到 base64:Base64 编码和解码。

常见问题

本节介绍创建和使用data网址时常见的问题。

语法data网址的格式非常简单,但很容易忘记在“数据”段之前放置逗号,或者错误地将数据编码为 base64 格式。在 HTMLA data网址中的格式在文件中提供了一个文件,该文件可能非常有用宽度相对于封闭文档的宽度。作为一个 URL,data应该可以用空格(换行符,制表符或空格)来形成,但是在使用 base64编码时会出现实际问题。延长限制尽管 Firefox 支持的data网址长度基本上没有限制,但浏览器不需要支持任何特定的最大值数据的长度。例如,Opera 11 浏览器限制 URL 长度为65535个字符data网址为65529个字符(65529个字符是编码数据的长度,而不是源,如果使用清楚地 data:,不指定 MIME 类型)。缺少错误处理媒体中的参数无效或指定'base64'时出现拼写错误,但忽略错误提供。不支持查询字符串等。

数据 URL 的数据部分是不透明的,所以试图在数据 URL 中使用查询字符串(包含<url>?parameter-data语法的页面特定参数)将包含查询字符串到 URL 所代表的数据中。例如:

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

这代表一个 HTML 资源,其内容是:

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

规范

规范

标题

RFC 2397

“数据”URL方案

浏览器兼容性

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

(Yes)

121

(Yes)

82

7.20

(Yes)

CSS files

(Yes)

121

(Yes)

82 91

7.20

(Yes)

HTML files

?

No

?

No

?

?

JavaScript files

(Yes)

121

(Yes)

91

7.20

(Yes)

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

Basic Support

(Yes)

(Yes)

(Yes)1

(Yes)

(Yes)1

(Yes)

(Yes)

CSS files

(Yes)

(Yes)

(Yes)1

(Yes)

(Yes)1

(Yes)

(Yes)

HTML files

?

?

No

?

No

?

?

JavaScript files

(Yes)

(Yes)

(Yes)1

(Yes)

(Yes)1

(Yes)

(Yes)

1. 最大支持的大小是4GB

2. 最大支持的大小是32kB

Vorheriger Artikel: Nächster Artikel: