Async Clipboard API için SVG desteği

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

İlgili içeriği oluşturmak için kullanılan Clipboard arayüzü Async Clipboard API, sistem panosuna gidin. Bu, bir web uygulamasının kesme, kopyalama ve özellikleri yapıştırır. Panodaki verileri aşağıdaki adımları izleyerek bir uygulamaya yapıştırabilirsiniz: read() yöntemi, öğesini çağırarak verileri panoya kopyalayabilirsiniz. write() yöntemini kullanabilirsiniz. text dışında, Taşınabilir Ağdaki resimler Grafik (PNG) biçimi, arındırılmış ve denetlenmemiş HTML ve Web özel biçimleri, Eş zamansız Clipboard API'si artık SVG resimlerinin kopyalanıp yapıştırılmasını da destekliyor. Artık SVG'lerle ilgilenen resim düzenleme yazılımıyla etkileşime geçebileceğiniz metin veya resim yerine resim biçiminde kopyalayıp yapıştırarak Saldırıya uğrayan çözümler kullanın.

Özellik algılama SVG desteği

SVG resimleri (ve diğer MIME türleri) için desteği tespit etmek üzere statik ClipboardItem.supports() yöntemini kullanır.

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

SVG resmini kopyalama

ClipboardItem - olabilir. SVG resim verilerini içeren blob, blobun değeri ve türüdür. (yani bu örnekte 'image/svg+xml') kullanabilirsiniz.

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);
  }
});

SVG resmi yapıştırın

SVG resmi yapıştırmak için panodaki ClipboardItem metnini okuyun ve İstenen türü (yani, bu örnekte 'image/svg+xml') getType() yöntemi. Bu, blob URL'sine dönüştürüldüğünde bir blob döndürür. bir <img> öğesinin src özelliğine atayabilirsiniz.

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;
});

Temizleme

SVG, yerleştirilmiş komut dosyalarına izin veren güçlü bir biçimdir. Bu özellik, kullanıcı bilinmeyen kaynaklardan içerik yapıştırdığında tehlikeli olan tarayıcı bir temizleme adımı çalıştırıyor. Veriler kopyalandığında, iyi biçimlendirilmiş bir SVG dokümanı oluşturur ve daha sonra bunu panoya yazar. Zaman veri yapıştırıldığında, tam olarak işlenmiş bir SVG parçası, ayrıştırıcıdır. Bu nedenle, yapıştırma işleminden önce onclick etkinlik işleyicisi özellikleri hâlâ mevcuttur ancak yapıştırıldıktan sonra kaldırılır.

macOS&#39;teki Clipboard Görüntüleyici uygulaması, pano içeriklerini inceliyor. Bu sonuçta SVG&#39;deki tıklama etkinlik işleyici özelliklerinin hâlâ mevcut olduğunu belirtmek isteriz.
macOS'teki Pano Görüntüleyici uygulaması pano içeriklerini inceliyor. Bu sonuçta SVG'deki "click etkinlik işleyici özelliklerinin" hâlâ mevcut olduğunu belirtmek isteriz.

Demo

SVG'leri kopyalayıp yapıştırmayı Glitch'te demo olduğundan emin olun. Görüntüleyin kaynak kod nasıl çalıştığını görmek için. Önceki ve sonraki çevrelerden herhangi birini tıklamayı mutlaka deneyin kolayca uygulayabilirsiniz. Tehlikeli olabilecek onclick etkinliği yapıştırıldıktan sonra işleyici özellikleri kaldırılır.

Teşekkür

Chromium'daki Eş zamansız Clipboard API'si için SVG desteği ekibinde çalışıyorum. Bu gönderi Rachel Andrew ve Anupam Snigdha tarafından incelendi.