Понимание data:image/png;base64: оболочки и байтов

data:image/png;base64, это префикс, а не полное изображение. Он представляет встроенный ресурс: схема — данные, объявленный тип носителя — image/png, а маркер говорит, что следующая полезная нагрузка использует Base64. Запятая — это граница между метаданными и данными.

Прочтите структуру

data:[media-type][;base64],payload

data:text/plain;base64,SGVsbG8=
data:text/plain,Hello%20world

Первый пример представляет текст Hello через Base64. Вместо этого второй использует процентное кодирование. Анализатор данных URI должен проверить метаданные перед выбором декодера. Отправка полного URI в необработанный декодер Base64 завершается неудачей, поскольку двоеточие, точка с запятой и запятая не являются символами полезной нагрузки.

Разделить по первой запятой, а не по каждой запятой. Остальные данные сами могут содержать запятые, особенно в тексте URI, отличном от Base64. Необязательные параметры типа носителя могут отображаться перед маркером Base64. Если тип носителя опущен, формат данных URL имеет текстовый тип и кодировку по умолчанию; это значение по умолчанию не преобразует произвольные двоичные байты в читаемый текст.

Метка MIME является претензией.

Любой желающий может разместить image/png в префиксе. Метка не доказывает, что байты образуют PNG. Сравните подпись, а затем попросите реальный декодер изображений загрузить результат. Аналогично, заголовок PDF является лишь ключом к распознаванию; полный анализатор PDF все равно может отклонить документ.

Изменение image/png чтобы image/jpeg не конвертирует изображение. Конвертация означает декодирование исходного изображения и кодирование нового файла в целевой формат. Это может изменить прозрачность, метаданные, качество и размер. Сохраняйте оригинал, если эти различия имеют значение.

Восстановить ресурс, не выполняя его

Разбираем и проверяем в первую очередь. Текст может отображаться как текст, а поддерживаемые растровые изображения можно предварительно просмотреть в элементе изображения. Не вставляйте в документ произвольную разметку HTML или SVG. Данные URL могут представлять как активное содержимое, так и изображение, поэтому их автономный характер не является гарантией безопасности.

При загрузке файла сохраняйте декодированные байты и используйте разумное расширение, основанное на подтвержденной информации о формате. В диагностическом отчете отображайте объявленный тип и обнаруженный тип отдельно. Это делает несоответствия видимыми, а не скрывает их за обнадеживающим значком файла. Синтаксис данных URL и его значения по умолчанию описаны в разделе MDN: URL-адреса данных.