URL dữ liệu là gì

URL dữ liệu là một lược đồ URI cung cấp một cách để nội dòng dữ liệu trong tài liệu và nó thường được sử dụng để nhúng hình ảnh vào HTML và CSS

Giới thiệu

URL dữ liệu là một lược đồ URI cung cấp một cách để nội dòng dữ liệu trong tài liệu HTML.

Giả sử bạn muốn nhúng một hình ảnh nhỏ. Bạn có thể làm theo cách thông thường, tải nó lên một thư mục và sử dụngimgđể làm cho trình duyệt tham chiếu nó từ mạng:

<img src="image.png" />

hoặc bạn có thể mã hóa nó ở một định dạng đặc biệt, được gọi là URL dữ liệu, giúp bạn có thể nhúng hình ảnh trực tiếp vào tài liệu HTML, vì vậy trình duyệt không phải thực hiện một yêu cầu riêng để lấy nó.

URL dữ liệu có thể tiết kiệm một chút thời gian cho các tệp nhỏ, nhưng đối với các tệp lớn hơn, có nhược điểm là kích thước tệp HTML tăng lên và chúng đặc biệt là một vấn đề nếu hình ảnh tải lại trên tất cả các trang của bạn, vì bạn không thể tận dụng bộ nhớ đệm của trình duyệt các khả năng.

Ngoài ra, hình ảnh được mã hóa dưới dạng URL dữ liệu thường lớn hơn một chút so với hình ảnh tương tự ở định dạng nhị phân.

Chúng không thực tế nhiều nếu hình ảnh của bạn thường xuyên được chỉnh sửa, vì mỗi lần thay đổi hình ảnh, nó phải được mã hóa lại.

Điều đó nói lên rằng họ có vị trí của mình trên Nền tảng web.

URL dữ liệu trông như thế nào

URL dữ liệu là một chuỗi bắt đầu bằngdata:tiếp theo là định dạng kiểu MIME. Ví dụ, một hình ảnh PNG có kiểu kịch câmimage/png.

Tiếp theo là dấu phẩy và sau đó là dữ liệu thực tế.

Văn bản thường được chuyển dưới dạng văn bản thuần túy, trong khi dữ liệu nhị phân thường được mã hóa base64.

Dưới đây là một ví dụ về cách URL dữ liệu như vậy sẽ trông như thế nào:

<img src="data:image/png,%89PNG%0D%0A..." />

Vàđây là một phiên bản nhỏ của hình ảnh biểu ngữ của bài viết này được mã hóa trong một liên kết

Đây là cách URL dữ liệu được mã hóa base64 trông như thế nào. Lưu ý rằng nó bắt đầu bằngdata:image/png;base64:

<img src="data:image/png;base64,iVBORw0KGgoAA..." />

Vàđây là một phiên bản nhỏ của hình ảnh biểu ngữ của bài viết này được mã hóa base64 trong một liên kết.

Trang web này có một trình tạo URL dữ liệu rất đẹp:https://dopiaza.org/tools/datauri/index.phpmà bạn có thể sử dụng để chuyển đổi bất kỳ hình ảnh nào trên màn hình của bạn thành URL dữ liệu.

URL dữ liệu có thể được sử dụng ở bất kỳ nơi nào mà một URL có thể được sử dụng, như bạn đã thấy, bạn có thể sử dụng nó cho các liên kết, nhưng cũng thường sử dụng chúng trong CSS:

.main {
    background-image url('data:image/png;base64,iVBORw0KGgoAA...');
}

Hỗ trợ trình duyệt

họ đangđược hỗ trợ trong tất cả các trình duyệt hiện đại.

Bảo vệ

URL dữ liệu có thể mã hóa bất kỳ loại thông tin nào, không chỉ hình ảnh, và do đó chúng đi kèm với tập hợp các hàm ý bảo mật của chúng.

TừWikipedia:

URI dữ liệu có thể được sử dụng để xây dựng các trang tấn công nhằm lấy tên người dùng và mật khẩu từ những người dùng web không nghi ngờ. Nó cũng có thể được sử dụng để giải quyết tập lệnh trên nhiều trang web (XSS) hạn chế, nhúng hoàn toàn trọng tải tấn công vào bên trong thanh địa chỉ và được lưu trữ thông qua các dịch vụ rút ngắn URL thay vì cần một trang web đầy đủ do bên thứ ba kiểm soát.

Kiểm trabài viết này từ Blog Mozilla Firefoxđể biết thêm thông tin về cách người dùng độc hại có thể sử dụng URL dữ liệu để làm việc xấu và cách trình duyệt Firefox giảm thiểu những rủi ro đó.

URL dữ liệu được xác định trongRFC 2397.