Zrozumienie data:image/png;base64: opakowania i bajtów

data:image/png;base64, jest przedrostkiem, a nie pełnym obrazem. Wprowadza zasób wbudowany: schemat to dane, zadeklarowany typ nośnika to image/png, a znacznik mówi, że następujący ładunek wykorzystuje Base64. Przecinek stanowi granicę między metadanymi a danymi.

Przeczytaj strukturę

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

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

Pierwszy przykład przedstawia tekst Witam do Base64. Drugi zamiast tego używa kodowania procentowego. Parser danych URI musi sprawdzić metadane przed wyborem dekodera. Wysłanie pełnego URI do surowego dekodera Base64 kończy się niepowodzeniem, ponieważ dwukropek, średnik i przecinek nie są znakami ładunku.

Podziel przy pierwszym przecinku, a nie przy każdym przecinku. Pozostałe dane mogą same zawierać przecinki, zwłaszcza w tekście innym niż Base64 URI. Opcjonalne parametry typu nośnika mogą pojawić się przed znacznikiem Base64. Jeśli typ nośnika zostanie pominięty, format danych URL ma domyślny typ tekstu i zestaw znaków; to ustawienie domyślne nie przekształca dowolnych bajtów binarnych w czytelny tekst.

Etykieta MIME jest oświadczeniem

Każdy może umieścić image/png w przedrostku. Etykieta nie dowodzi, że bajty tworzą PNG. Porównaj podpis, a następnie poproś rzeczywisty dekoder obrazu o załadowanie wyniku. Podobnie nagłówek PDF jest jedynie wskazówką rozpoznawczą; kompletny parser PDF może nadal odrzucić dokument.

Zmiana image/png do image/jpeg nie konwertuje obrazu. Konwersja oznacza dekodowanie obrazu źródłowego i kodowanie nowego pliku w formacie docelowym. Może to zmienić przejrzystość, metadane, jakość i rozmiar. Zachowaj oryginał, jeśli te różnice mają znaczenie.

Odzyskaj zasób bez jego wykonywania

Najpierw przeanalizuj i sprawdź. Tekst może być wyświetlany jako tekst, a obsługiwane obrazy rastrowe można przeglądać w elemencie obrazu. Unikaj wstawiania do dokumentu dowolnych znaczników HTML lub SVG. Dane URL mogą reprezentować zarówno aktywną treść, jak i obraz, więc ich samodzielny charakter nie gwarantuje bezpieczeństwa.

Aby pobrać plik, zachowaj zdekodowane bajty i użyj rozsądnego rozszerzenia w oparciu o potwierdzone informacje o formacie. W przypadku raportu diagnostycznego wyświetl oddzielnie zadeklarowany typ i wykryty typ. Dzięki temu niedopasowania stają się widoczne, zamiast ukrywać je za uspokajającą ikoną pliku. Składnię danych URL i jej wartości domyślne opisano w MDN: adresy URL danych.