Obsługa SVG dla interfejsu Async Clipboard API

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Interfejs Clipboard interfejs Async Clipboard API zapewnia uprawnienia do odczytu i zapisu zawartości do schowka systemowego. Pozwala to aplikacji internetowej wdrożyć wycinanie, kopiowanie wklej funkcje. Aby wkleić dane ze schowka do aplikacji, możesz: Wywołując funkcję read(), i kopiuje dane do schowka przez wywołanie metody Metoda write(). Oprócz pola text obrazy w Portable Network Format graficzny (PNG), oczyszczony nieczytelny kod HTML oraz Niestandardowe formaty internetowe, Interfejs Async Clipboard API obsługuje teraz również kopiowanie i wklejanie obrazów SVG, możesz wreszcie użyć oprogramowania do edycji obrazów, które obsługuje pliki SVG w sposób bardziej naturalny, kopiując i wklejając obrazy SVG jako obrazy, a nie w formie tekstu przy użyciu niebezpiecznych rozwiązań.

Obsługa plików SVG z wykrywaniem cech

Wykryj obsługę obrazów SVG (i innych typów MIME), wywołując metodę statyczną metodę ClipboardItem.supports(), 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 pole ClipboardItem z nad obiektem. Obiekt blob z danymi obrazu SVG to wartość i typ obiektu blob. (w tym przypadku 'image/svg+xml').

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, a następnie uzyskać pożądany typ (w tym przypadku 'image/svg+xml') za pomocą funkcji getType(). Powoduje to zwrócenie obiektu blob, który po przekonwertowaniu na adres URL obiektu blob który możesz przypisać do atrybutu src elementu <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ć niebezpieczny, gdy użytkownik wkleja treści z nieznanych źródeł. przeglądarka przeprowadza krok oczyszczania. Podczas kopiowania danych interfejs Async Clipboard API tworzy prawidłowy dokument SVG, a następnie zapisuje go w schowku. Kiedy wklejanie danych, powstaje ściśle przetworzony fragment SVG parsera. Dlatego przed wklejeniem moduł obsługi zdarzeń onclick atrybuty nadal są obecne, ale po wklejeniu zostają usunięte.

Aplikacja Clipboard Viewer na system macOS sprawdza zawartość schowka. Pokazuje że atrybuty detektora zdarzeń „onclick” w pliku SVG nadal są dostępne.
Aplikacja Clipboard Viewer na urządzeniach z macOS sprawdza zawartość schowka. Pokazuje że atrybuty detektora zdarzeń „onclick” w pliku SVG nadal są dostępne.

Prezentacja

Odkryj kopiowanie i wklejanie plików SVG w demonstracja dotycząca Glitcha. Wyświetl kod źródłowy aby zobaczyć, jak to działa. Pamiętaj, by kliknąć dowolne kółka przed i po. kopiowanie i wklejanie. Po wklejeniu potencjalnie niebezpieczne zdarzenie onclick zostaną usunięte atrybuty modułów obsługi.

Podziękowania

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