Obsługa SVG dla interfejsu Async Clipboard API

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Interfejs Clipboard interfejsu Async Clipboard API zapewnia uprawnienia do odczytu i zapisu zawartości schowka systemowego. Dzięki temu aplikacja internetowa może wdrożyć funkcje wycinania, kopiowania i wklejania. Możesz wkleić dane ze schowka do aplikacji, wywołując metodę read(), a następnie kopiować dane do schowka przy użyciu metody write(). Oprócz tekstu, obrazów w formacie Portable Network Graphics (PNG), oczyszczonego i nieoczyszczonego kodu HTML oraz niestandardowych formatów internetowych interfejs Async Clipboard API obsługuje teraz również kopiowanie i wklejanie obrazów SVG, co oznacza, że możesz w końcu korzystać z oprogramowania do edycji obrazów, które w bardziej naturalny sposób obsługuje pliki SVG dzięki kopiowaniu i wklejaniu obrazów tekstowych SVG jako obrazów lub wklejaniu ich jako obrazów tekstowych.

Obsługa plików SVG z wykrywaniem cech

Wykrywaj obsługę obrazów SVG (i innych typów MIME), wywołując statyczną metodę ClipboardItem.supports() i przekazując jej żądany typ MIME.

const supportsSVG = () => {
  if (
    !('supports' in window.ClipboardItem) ||
    !window.ClipboardItem.supports('image/svg+xml')
  ) {
    return false;
  }
  return true;
};

Kopiowanie obrazu SVG

Skopiuj obraz SVG, wypełniając obiekt ClipboardItem za pomocą obiektu. Obiekt blob z danymi obrazu SVG to wartość i typ obiektu blob (w tym przypadku 'image/svg+xml') jako klucz.

copyButton.addEventListener('click', async () => {
  if (!supportsSVG()) {
    return;
  }
  try {
    const blob = await fetch(img.src).then((response) => response.blob());
    await navigator.clipboard.write([
      new window.ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
  } catch (err) {
    console.error(err.name, err.message);
    alert(err.message);
  }
});

Wklejanie obrazu SVG

Aby wkleić obraz SVG, odczytaj ze schowka ClipboardItem i pobierz odpowiedni typ (w tym przypadku 'image/svg+xml') za pomocą metody getType(). Spowoduje to zwrócenie obiektu blob, który po przekonwertowaniu na adres URL obiektu blob można przypisać do atrybutu src <img>.

pasteButton.addEventListener('click', async () => {
  if (!supportsSVG()) {
    return;
  }
  const [clipboardItem] = await navigator.clipboard.read();
  const svgBlob = await clipboardItem.getType('image/svg+xml');
  if (!svgBlob) {
    alert('No SVG in the clipboard.');
    return;
  }
  const image = document.createElement('img');
  const blobURL = URL.createObjectURL(svgBlob);
  image.addEventListener('load', () => {
    URL.revokeObjectURL(blobURL);
  });
  image.src = blobURL;
});

Dezynfekcja

SVG to zaawansowany format, który umożliwia np. umieszczanie skryptów. Może to być niebezpieczne, gdy użytkownik wkleja treści z nieznanych źródeł, więc przeglądarka przeprowadza etap oczyszczania. Podczas kopiowania danych interfejs Async Clipboard API tworzy poprawnie sformatowany dokument SVG i zapisuje go w schowku. Po wklejeniu danych parser fragmentów tworzy ściśle przetworzony fragment SVG. Dlatego przed wklejeniem atrybuty modułu obsługi zdarzeń onclick są nadal dostępne, ale po wklejeniu zostają usunięte.

Aplikacja Clipboard Viewer na system macOS sprawdza zawartość schowka. Widać, że w pliku SVG nadal występują atrybuty detektora zdarzeń „onclick”.
Aplikacja Clipboard Viewer na urządzeniach z macOS sprawdza zawartość schowka. Widać, że atrybuty detektora zdarzeń „onclick” w pliku SVG nadal występują.

Pokaz

Odkryj kopiowanie i wklejanie plików SVG w wersji demonstracyjnej Glitch. Aby dowiedzieć się, jak to działa, wyświetl kod źródłowy. Przed kopiowaniem i wklejeniem warto kliknąć dowolne kółka. Po wklejeniu potencjalnie niebezpieczne atrybuty modułu obsługi zdarzeń onclick są usuwane.

Podziękowania

Obsługa formatu SVG w interfejsie Async Clipboard API w Chromium została wdrożona przez zespół Microsoft Edge. Ten post został zrecenzowany przez Rachel Andrew i Anupam Snigdha.