Công cụ dành cho nhà phát triển · Bộ mã hóa và giải mã Base64
URI dữ liệu được giải thích: cách data:image/png;base64 hoạt động và nó đến từ đâu
· Lý lịch
base64 mã hóa
Dữ liệu: lược đồ URL đã được chỉ định trong 1998 như một cách để nhúng các tài nguyên nhỏ trực tiếp vào một trang. Bài đăng này giải thích ngữ pháp của nó, tại sao Base64 là tùy chọn và nơi trình duyệt đưa ra giới hạn.
Biểu tượng yêu thích là 1,300 ký tự URL — gặp dữ liệu: URI trong tự nhiên và đọc các phần của nó
Dữ liệu: URI nhúng trực tiếp một tài nguyên nhỏ vào URL, tránh yêu cầu HTTP riêng biệt. Định dạng được chỉ định trong RFC 2397 (được xác định trong 1998) và sử dụng ngữ pháp với sơ đồ, loại phương tiện tùy chọn, cờ mã hóa tùy chọn và chính tải trọng. Ví dụ: data:text/plain,hello là dữ liệu văn bản thuần túy URI chứa từ xin chào. Trình duyệt xử lý việc này giống như cách nó xử lý yêu cầu HTTP nhưng thay vì tìm nạp nội dung qua mạng, trình duyệt sẽ giải mã nội dung đó từ chính URL.
URI dữ liệu phổ biến nhất cho các hình ảnh nhỏ, biểu tượng CSS và các thiết bị thử nghiệm. Dữ liệu: URI với mã hóa Base64 trông như thế này: data:image/png;base64,iVBORw0K.... Phân tích là: data: là lược đồ; image/png là loại phương tiện; ;base64 là cờ mã hóa; chuỗi dài là byte hình ảnh được mã hóa Base64. Khi trình duyệt nhìn thấy URL này, trình duyệt sẽ giải mã Base64 để khôi phục các byte ban đầu, sau đó hiển thị hình ảnh bằng cách sử dụng các byte đó.
Đọc dữ liệu URI từ ngữ pháp hiển thị của nó — loại phương tiện, điểm đánh dấu Base64 tùy chọn và tải trọng
Nếu cờ mã hóa bị bỏ qua (data:text/html,<p>Xin chào</p>), tải trọng được mã hóa phần trăm UTF-8 văn bản, không phải base64. Sự hiện diện của ;base64 cho trình duyệt biết nên áp dụng quy tắc giải mã nào. Loại phương tiện trong dữ liệu: URI là một MIME loại, chuỗi cùng loại được sử dụng trong HTTP Tiêu đề kiểu nội dung. hình ảnh/png, chữ/plain, ứng dụng/json và hình ảnh/svg+xml là những ví dụ phổ biến. Nếu không có loại phương tiện nào được chỉ định thì mặc định là văn bản/plain;charset=US-ASCII.
Trình duyệt phải xác định cách hiển thị byte dựa trên loại phương tiện: nếu nó nói image/png, thì các byte là PNG; nếu nó ghi văn bản/html, thì nội dung là HTML. Việc chỉ định sai loại phương tiện có thể tạo ra kết quả khó hiểu; tệp PNG được gắn nhãn là văn bản/plain sẽ hiển thị dưới dạng ký tự rác thay vì hình ảnh. Base64 là tùy chọn trong dữ liệu: URI. Đối với nội dung văn bản, mã hóa phần trăm (cùng loại mã hóa được sử dụng trong chuỗi truy vấn URL) thường nhỏ gọn hơn base64. Người tiêu dùng dữ liệu URI quyết định cách diễn giải tải trọng từ loại phương tiện và điểm đánh dấu trước dấu phẩy. Bộ mã hóa Base64 chỉ cung cấp các ký tự tải trọng. Nó không thêm loại MIME, chọn xem các byte mô tả PNG hay SVG hay xác thực địa chỉ đã tập hợp.
Tại sao Base64 là tùy chọn — tải trọng văn bản được mã hóa phần trăm cho SVG và văn bản thuần túy so với Base64 cho nhị phân
Dữ liệu URI:text/html,<p>Hello</p> chứa HTML dưới dạng ký tự chữ (có mã hóa phần trăm cho bất kỳ ký tự đặc biệt nào như dấu ngoặc kép hoặc dấu ngoặc nhọn). Base64 hữu ích cho dữ liệu nhị phân không thể biểu diễn dưới dạng văn bản và trong trường hợp tải trọng chứa nhiều ký tự đặc biệt mà mã hóa phần trăm sẽ phình to. Một SVG nhỏ hoặc một tệp văn bản có thể được mã hóa theo phần trăm nhỏ hơn; tệp nhị phân phải là base64. Xây dựng dữ liệu: URI bằng tay đòi hỏi phải biết loại phương tiện và mã hóa.
Đối với biểu tượng SVG, bạn có thể sử dụng data:image/svg+xml theo sau là đánh dấu SVG được mã hóa phần trăm hoặc byte được mã hóa ;base64 và base64. Để mã hóa phần trăm, hãy bọc SVG trong data:image/svg+xml, sau đó mã hóa phần trăm bất kỳ dấu ngoặc nhọn, dấu ngoặc kép và các ký tự đặc biệt khác. Kết quả dài nhưng con người có thể đọc được. Đối với base64, lấy SVG byte, mã hóa chúng thành base64 và tạo data:image/svg+xml;base64, sau đó nối chuỗi base64. Base64 thường nhỏ gọn hơn đối với văn bản nhị phân, nhưng đối với văn bản SVG, dạng được mã hóa phần trăm có thể ngắn hơn.
Ví dụ hoạt động: xây dựng dữ liệu: URI cho SVG nhỏ bằng tay — mã hóa đánh dấu dưới dạng văn bản và tập hợp chuỗi
Các trình duyệt và ứng dụng tiêu thụ có thể áp đặt các giới hạn hoặc hạn chế chính sách đối với URI dữ liệu, nhưng kho lưu trữ này không thiết lập mức trần số di động. Việc sử dụng bộ nhớ, hoạt động của trình phân tích cú pháp và chính sách bảo mật cũng phụ thuộc vào vị trí giá trị xuất hiện, vì vậy hãy kiểm tra chính xác trình duyệt đích và ngữ cảnh nhúng thay vì dựa vào giới hạn đã ghi nhớ.
Hình ảnh được nhúng 5 MB trong mọi tệp HTML sẽ làm tăng kích thước trang. URI dữ liệu là tốt nhất cho các tài nguyên nhỏ: CSS biểu tượng, hình ảnh nhỏ hoặc dữ liệu thử nghiệm. Đối với các tệp lớn, yêu cầu bên ngoài sẽ nhanh hơn vì trình duyệt có thể lưu vào bộ nhớ đệm phản hồi và sử dụng lại trên nhiều trang; dữ liệu: URI được nội tuyến mỗi khi tải trang.
Các giới hạn về trình duyệt và bảo mật cần được xác minh trong ứng dụng tiêu dùng thay vì giả định
Ngưỡng chung là vài kilobyte; dưới mức đó, dữ liệu: URI hoạt động hiệu quả; trên mức đó, các tệp bên ngoài thường nhanh hơn. Chính sách bảo mật và trình duyệt hạn chế dữ liệu: URI việc sử dụng trong một số ngữ cảnh nhất định. Điều hướng cấp cao nhất (nhấp vào liên kết trỏ đến dữ liệu: URI với nội dung HTML) thường bị chặn để ngăn chặn lừa đảo. Dữ liệu: URI trong thuộc tính src tập lệnh có thể thực thi JavaScript tùy ý, tạo ra rủi ro bảo mật.
Trình duyệt áp dụng quy tắc Chính sách bảo mật nội dung (CSP) cho dữ liệu: URI; CSP nghiêm ngặt có thể cấm chúng hoàn toàn. Dữ liệu: URI trong img src hoặc iframe src thường được cho phép nhưng được nhúng trong ngữ cảnh kiểu hoặc tập lệnh có thể bị hạn chế. Luôn kiểm tra tính tương thích của trình duyệt và chính sách bảo mật của môi trường mục tiêu của bạn. URI dữ liệu trong CSS thường dùng cho hình nền nhỏ. Cú pháp giống nhau: url(data:image/png;base64,...).
Trường hợp dữ liệu: URI vẫn là công cụ phù hợp — biểu tượng CSS, hình ảnh nội tuyến an toàn cho email và thiết bị kiểm tra
Tệp CSS có dữ liệu được nhúng: URI có thể được gửi dưới dạng một tệp duy nhất có chứa tất cả hình ảnh, giúp giảm yêu cầu HTTP. Điều này hữu ích cho các bộ biểu tượng nhỏ hoặc đồ họa đơn giản. Hình ảnh lớn được nhúng trong CSS làm cho tệp bị phồng lên và làm chậm quá trình phân tích cú pháp của tệp. Các công cụ xây dựng hiện đại (như webpack) có thể tự động chuyển đổi hình ảnh nhỏ thành dữ liệu: URI trong CSS và hình ảnh bên ngoài thành URL thông thường, cân bằng hiệu suất.
Dữ liệu: định dạng URI được xác định bởi RFC 2397, một tài liệu ngắn chỉ định ngữ pháp nhưng không xác định nơi dữ liệu: URI có thể hoặc không thể được sử dụng. Các nhà cung cấp trình duyệt đã thêm các hạn chế của riêng họ dựa trên những lo ngại về bảo mật và hiệu suất.
Điều này không bao gồm những gì - blob: URL, URL đối tượng và quyền truy cập hệ thống tệp
Một số hệ thống không còn dùng dữ liệu: hỗ trợ URI trong một số ngữ cảnh nhất định (như hành động biểu mẫu ở cấp CSP 3) để ngăn chặn lạm dụng. Khi sử dụng dữ liệu: URI, hãy kiểm tra dữ liệu đó trong trình duyệt mục tiêu của bạn; RFC cho biết định dạng này hợp lệ nhưng chính sách bảo mật của trình duyệt có thể chặn định dạng đó.
Việc tạo dữ liệu: URI theo cách thủ công không phổ biến trong quá trình sản xuất; hầu hết các công cụ và thư viện xây dựng đều xử lý việc chuyển đổi. Nhưng hiểu định dạng này rất hữu ích cho việc gỡ lỗi. Nếu bạn thấy một data:image/... URL dài trong CSS hoặc HTML của mình, bạn có thể giải mã nó bằng công cụ mã hóa & giải mã Base64: xóa tiền tố data:image/...;base64,, dán chuỗi còn lại vào công cụ và giải mã nó để xem byte thực tế.
Bài học rút ra: một định dạng nhỏ với ngữ pháp nghiêm ngặt — cách bộ mã hóa và giải mã Base64 xử lý bước mã hóa văn bản để bạn có thể tập hợp URI hợp lệ
Đối với dữ liệu SVG: URI, bạn có thể giải mã phần trăm biểu mẫu văn bản và đọc đánh dấu XML. Hiểu cấu trúc của dữ liệu: URI giúp khắc phục sự cố tài nguyên được nhúng dễ dàng hơn. URI dữ liệu là một tiêu chuẩn Web (RFC 2397) cho phép nhúng tài nguyên trực tiếp dưới dạng URL. Chúng hiệu quả nhất đối với các tài nguyên nhỏ, ổn định không được hưởng lợi từ bộ nhớ đệm riêng biệt. Định dạng này bao gồm đặc tả loại phương tiện tùy chọn và cờ mã hóa (mã hóa base64 hoặc phần trăm ngụ ý).
Mã hóa Base64 là bắt buộc đối với dữ liệu nhị phân nhưng tùy chọn đối với văn bản; SVG được mã hóa phần trăm có thể dễ đọc hơn. Chính sách bảo mật của trình duyệt giới hạn nơi dữ liệu: URI có thể được sử dụng, vì vậy việc hiểu các hạn chế trong môi trường mục tiêu của bạn là điều cần thiết. Công cụ mã hóa & giải mã Base64 có thể giúp bạn mã hóa tài nguyên theo cách thủ công hoặc giải mã URI được nhúng để kiểm tra nội dung của tài nguyên đó.