Розробники · Base64 енкодер & decoder
Дані URIs пояснили: як дані:image/png;base64 роботи і куди прийшла
· Підземелля
Опубліковано ToolAcre · Редакція журналу
бази64 коди
Дані: URL схема була вказана в 1998 як спосіб складання невеликих ресурсів безпосередньо на сторінці. Ця публікація пояснює свою граматику, чому Base64 є необов'язковою і де браузери відображаються межі.
Фавкон, який був 1,300-характер URL — зустріч даних: URI в дикому і читати її частини
Дані: URI вбудовується невеликий ресурс безпосередньо в URL, уникаючи окремого HTTP запит. Формат вказаний в RFC 2397 (визначено в 1998) і використовує граматику за допомогою схеми, необов'язкового медіа типу, додаткового прапора кодування, і сама завантаження. Наприклад, дані:текст/plain,hello є простими даними URI містить слово hello. Процеси веб-переглядача, таким чином, він обробляє HTTP запит, але замість того, щоб захопити вміст через мережу, він декодує його від URL сам.
Дані URI є найбільш поширеними для невеликих зображень, CSS іконки, і тестові світильники. Дані: URI з кодуванням Base64 виглядає так: дані:image/png;base64,iVBORw0K.... Розбиття: дані: схема; зображення/png є медіатипом; ;base64 є прапором кодування; довгий рядок є Base64-encoded зображення байтів. При перегляді браузера URL, він decodes the Base64 для відновлення оригінальних байтів, потім надає зображення за допомогою цих байтів.
Читання даних URI з його видимої граматики — медіа тип, необов'язковий знак Base64 і завантаження
Якщо прапор кодування вдається (data:text/html,<p>напляскване</p>), перевантаження відсотків UTF-8 текст, не base64. Наявність ;base64 розповідає про браузер, який визначає правила застосування. Тип ЗМІ в даних: URI є MIME тип, однотипний рядок, що використовується в HTTP Контент-Тип головки. зображення/png, Новини/plain, Додаток/json і зображення/svg+xml є загальними прикладами. Якщо не зазначено тип медіа, за замовчуванням є текстом/plain;charset=US-ASCII.
Якщо мова йде про зображення/png, байти PNG; якщо це говорить текст/html, Зміст HTML. Вкажіть неправильний тип медіа може виробляти результати заплутування; PNG файл позначений як текст/plain буде відображатися як символи сміття замість зображення. Base64 є обов'язковим у даних: URI. Для текстового вмісту, %-encoding (таке ж кодування використовується в URL Квадратні рядки) часто більш компактні, ніж base64. Дані URI споживач вирішує, як інтерпретувати навантаження з медіатипу та маркеру перед комою. Бази64 енкодер постачає тільки символи корисного навантаження. Не додаємо MIME тип, вибрати, чи описуються байти PNG або SVG, або повірити зібрану адресу.
Чому Base64 є необов'язковою — відсотково зашифровані текстові навантаження для SVG і звичайний текст versus Base64 для бінарних
Про нас URI data:text/html,<p>Hello</p> містить HTML як літеральні символи (з відсотками для будь-яких спеціальних символів, таких як лапки або кутові кронштейни). Base64 корисно для бінарних даних, які не можуть бути представлені як текст, так і для випадків, коли платне навантаження містить багато спеціальних символів, які відсотків-кодування буде бблати. Маленький SVG або текстовий файл може бути менший відсоток-encoded; бінарний файл повинен бути base64. Створення даних: URI вручну потрібно знати тип медіа та кодування.
Для SVG icon, ви можете використовувати дані:image/svg+xml за допомогою відсотків SVG розмітка або ;base64 і base64-encoded байтів. Для відсотків-покриття, загортання SVG у даних:image/svg+xml, потім процент-кодувати будь-які кутові кронштейни, котирування та інші спеціальні символи. В результаті довга, але людина-прочитана. Для base64 візьміть SVG байти, закодувати їх в base64 і виробляти дані:image/svg+xml;base64, потім додайте base64 рядок. Base64 зазвичай більш компактний для бінарних, але для SVG текст може бути коротшим.
Розроблено приклад: побудови даних: URI для маленького SVG вручну — кодування розмітки як текст і складання рядка
Браузери та споживаючі програми можуть накладати обмеження або обмеження політики на дані URIs, але це репозиторій не встановлює портативний нумерний стелю. Використання пам'яті, пароля і політика безпеки також залежать від того, де з'являється значення, тому перевірте точний цільовий браузер і вбудовування контексту замість перекриття на згаданому ліміті.
Р 5 MB вбудоване зображення в кожен HTML файл б зблокувати розмір сторінки. Дані URI найкраще підходять для невеликих ресурсів: CSS іконки, маленькі зображення або тестові дані. Для великих файлів зовнішній запит швидше, тому що браузер може кешувати відповідь і повторно використовувати його на декількох сторінках; дані: URI вказаний час завантаження сторінок.
Браузер і кордони безпеки для перевірки в споживанні, а не припустимо
Загальний поріг - це кілька кілограмів; нижче цього, дані: URIs є ефективними; над тим, що зовнішні файли зазвичай швидше. Інформація щодо політики безпеки та браузера: URI використання в певних контекстах. Навігація верхнього рівня (затискання посилання, що вказує на дані: URI з HTML вміст) часто блокується для запобігання фішингу. Дані: URI в атрибуті src може виконувати довільний JavaScriptСтворення ризику безпеки.
Браузери застосовуються Політики безпеки вмістуCSP) правила до даних: URIs; суворий CSP може повністю заборонити їх. Дані: URI в img src або iframe src зазвичай дозволений, але вбудований в стиль або сценарій контекст може бути обмежений. Завжди перевірте сумісність браузера та політику безпеки вашого цільового середовища. УРТ даних CSS є загальними для невеликих фонових зображень. Синтаксис є таким же: url(data:image/png;base64,...).
Де дані: УРТ все ще правильний інструмент — CSS іконки, електронні захисні вбудовані зображення і тестові світильники
Р CSS файл з вбудованими даними: URI може бути відправлений як один файл з усіма зображеннями, що включені, зменшення HTTP запити. Це корисно для невеликих іконок або простої графіки. Великі зображення, вбудовані в CSS заблокувати файл і уповільнити його парсування. Сучасні інструменти побудови (наприклад, webpack) можуть автоматично конвертувати невеликі зображення на дані: URIs в CSS, і зовнішні зображення для нормальних URL-адрес, балансування продуктивності.
Дані: URI формат визначається RFC 2397, короткий документ, який визначає граматику, але не визначає, де дані можуть використовуватися URIs. Браузери додали свої обмеження на основі питань безпеки та продуктивності.
Що це не обкладинка — blob: URL, URL-адреси об'єктів та доступ до файлової системи
Деякі системи депресовані дані: URI підтримка в певних контекстах CSP рівень 3) для запобігання зловживанню. При використанні даних: URI, перевірити його в цільовому браузері; RFC Цей формат є дійсним, але політика безпеки браузера може блокувати його.
Створення даних: URI вручну є некомерційним у виробництві; більшість інструментів та бібліотек керують перетворенням. Але розуміння формату корисно для відбілювання. Якщо ви бачите довгу інформацію:зображення/... URL у вас CSS або HTML, ви можете видалити його з інструментом Base64 і decoder: видалити дані:image/...;base64, префікс, вставте решту рядку в інструмент, і декодуйте його, щоб побачити фактичні байти.
Поруч: невеликий формат з строгою граматикою — як працює Base64 енкодер і декодер, що ручить текстовий крок, щоб ви могли зібрати дійсний URI
Для SVG дані: URIs, ви можете процентувати текстову форму та читати XML розмітка. Розуміння анатомії даних: URI полегшує усунення вбудованих ресурсів. Дані URIs є веб-стандартомRFC 2397) що дозволяє збирати ресурси безпосередньо як URL. Вони є найбільш ефективними для невеликих, стабільних ресурсів, які не мають вигоди від окремого кешування. Формат включає в себе додаткові специфікації медіа-типу та прапор кодування (base64 або ненадійний відсоток-encoding).
Base64 кодування потрібна для бінарних даних, але необов'язково для тексту; %-encoded SVG може бути більш читаним. Обмеження політики безпеки браузера, де дані: URI можуть бути використані, тому розуміння обмежень у Вашому середовищі є важливим. Інструмент для кодування бази64 і декодування може допомогти вам вручну закодувати ресурс або декодувати вбудований URI перевірити його зміст.