data: URLs

Cú pháp

data:[<media-type>][;base64],<data>

data:

Scheme của URL.

<media-type> Optional

MIME type cho biết kiểu dữ liệu, chẳng hạn image/jpeg cho một tệp ảnh JPEG. Nếu bỏ qua, mặc định là text/plain;charset=US-ASCII. Bạn có thể xem phân tích đầy đủ về cấu trúc MIME type và bảng các MIME type phổ biến trên web.

;base64 Optional

Cho biết dữ liệu nên được giải mã base64; xem mã hóa dữ liệu sang định dạng base64.

<data>

Bản thân dữ liệu. Nếu dữ liệu chứa các ký tự được định nghĩa trong RFC 3986 là ký tự dành riêng, hoặc chứa ký tự khoảng trắng, ký tự xuống dòng, hay các ký tự không in được khác, thì những ký tự đó phải được percent-encoded. Nếu dữ liệu là văn bản, bạn có thể nhúng văn bản đó (dùng các entity hoặc escape phù hợp dựa trên kiểu của tài liệu bao ngoài). Nếu không, bạn có thể chỉ định base64 để nhúng dữ liệu nhị phân đã được mã hóa base64.

Một vài ví dụ:

data:,Hello%2C%20World%21

Dữ liệu text/plain là Hello, World!. Lưu ý dấu phẩy được percent-encoded thành %2C, và ký tự khoảng trắng thành %20.

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

Phiên bản base64 của ví dụ trên

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

Một tài liệu HTML với <h1>Hello, World!</h1>

data:text/html,%3Cscript%3Ealert%28%27hi%27%29%3B%3C%2Fscript%3E

Một tài liệu HTML với <script>alert('hi');</script> thực thi một JavaScript alert. Lưu ý rằng thẻ đóng script là bắt buộc.

Mã hóa dữ liệu sang định dạng base64

Base64 là một nhóm các sơ đồ mã hóa nhị phân sang văn bản, biểu diễn dữ liệu nhị phân trong một chuỗi ASCII bằng cách chuyển nó sang biểu diễn radix-64. Vì nó chỉ bao gồm các ký tự được phép bởi cú pháp URL ("an toàn cho URL"), chúng ta có thể mã hóa an toàn dữ liệu nhị phân trong Data URL. Base64 dùng các ký tự + và /, vốn có thể có ý nghĩa đặc biệt trong URL. Vì Data URL không có các phân đoạn đường dẫn hay tham số truy vấn, cách mã hóa này là an toàn trong ngữ cảnh này.

Mã hóa trong JavaScript

Các Web API có sẵn các phương thức gốc để mã hóa hoặc giải mã sang base64: Base64.

Mã hóa trên hệ thống Unix

Mã hóa base64 của một tệp hoặc chuỗi trên Linux và macOS có thể được thực hiện bằng lệnh base64 của dòng lệnh (hoặc thay thế bằng tiện ích uuencode với đối số -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=

Mã hóa trên Microsoft Windows

Trên Windows, Convert.ToBase64String từ PowerShell có thể được dùng để thực hiện mã hóa Base64:

[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello"))
# outputs to console: aGVsbG8=

Ngoài ra, một shell GNU/Linux (chẳng hạn WSL) cung cấp tiện ích base64:

bash$ echo -n hello | base64
# outputs to console: aGVsbG8=

Các vấn đề thường gặp

Phần này mô tả những vấn đề thường xảy ra khi tạo và sử dụng các URL data.

data:text/html,lots of text…<p><span class%3D"bottom">bottom</span>?arg=val</p>

Điều này biểu diễn một tài nguyên HTML có nội dung là:

lots of text…
<p><span class="bottom">bottom</span>?arg=val</p>

Cú pháp

Định dạng của URL data rất đơn giản, nhưng rất dễ quên đặt dấu phẩy trước đoạn "data", hoặc mã hóa dữ liệu sang định dạng base64 một cách sai.

Định dạng trong HTML

Một URL data cung cấp một tệp bên trong một tệp, điều này có thể rất rộng so với chiều rộng của tài liệu bao ngoài. Là một URL, phần data nên có thể được định dạng với khoảng trắng (xuống dòng, tab, hoặc dấu cách), nhưng có các vấn đề thực tế phát sinh khi dùng mã hóa base64.

Giới hạn độ dài

Trình duyệt không bắt buộc phải hỗ trợ bất kỳ độ dài tối đa cụ thể nào của dữ liệu. Chromium và Firefox giới hạn URL data ở mức 512MB, còn Safari (WebKit) giới hạn ở 2048MB. Lưu ý rằng Firefox 97 đã tăng giới hạn từ 256KB lên 32MB, và Firefox 136 đã tăng nó lên 512MB.

Thiếu xử lý lỗi

Các tham số không hợp lệ trong media, hoặc lỗi đánh máy khi chỉ định 'base64', sẽ bị bỏ qua, nhưng không có lỗi nào được báo.

Không hỗ trợ chuỗi truy vấn, v.v.

Phần dữ liệu của một data URL là opaque, nên một nỗ lực dùng chuỗi truy vấn (các tham số theo trang, với cú pháp <url>?parameter-data) với một data URL sẽ chỉ đưa chuỗi truy vấn vào dữ liệu mà URL đó biểu diễn.

Vấn đề bảo mật

Một số vấn đề bảo mật (ví dụ, phishing) đã liên quan đến Data URL, và việc điều hướng tới chúng ở cấp cao nhất của trình duyệt. Để giảm thiểu các vấn đề như vậy, điều hướng cấp cao nhất tới các URL data: bị chặn trong tất cả các trình duyệt hiện đại. Xem bài đăng này của Mozilla Security Team để biết thêm chi tiết.

Đặc tả

Tương thích trình duyệt

Xem thêm

• Base64
• Percent-encoding
• atob()
• btoa()
• CSS <url>
• URI