このページは Cloud Translation API によって翻訳されました。

Async Clipboard API 向け SVG サポート

Taylore Givens

Thomas Steiner

「次の Clipboard インターフェース: Async Clipboard API により、クリックします。これにより、ウェブアプリケーションでカット、コピー、貼り付けます。クリップボードのデータをアプリケーションに貼り付けるには、呼び出し read() メソッドクリップボードにデータをコピーするには、 write() メソッドを使用します。テキストのほかに、ポータブルネットワークの images 画像（PNG）形式、サニタイズ、サニタイズされていない HTML ウェブカスタムフォーマット、 Async Clipboard API で、SVG 画像のコピーと貼り付けもサポートされるようになりました。 SVG に対応した画像編集ソフトウェアを SVG 画像をテキストや画像としてコピー&ペーストすることで、ハッキングの回避方法を使用する。

SVG 機能検出のサポート

次のように呼び出して、SVG 画像（およびその他の MIME タイプ）のサポートを検出します。静的 ClipboardItem.supports() メソッドを呼び出し、必要な MIME タイプを渡します。

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

SVG 画像をコピーする

SVG 画像をコピーするには、 ClipboardItem と作成します。SVG 画像データを含む blob は値と blob の型です（この場合は '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);
  }
});

SVG 画像を貼り付ける

SVG 画像を貼り付けるには、クリップボードから ClipboardItem を再度読み込みます。必要なタイプ（この場合は 'image/svg+xml'）を getType() メソッドを使用します。これは blob を返します。blob URL に変換されると、 <img> の src 属性に割り当てることができます。

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

サニタイズ

SVG は強力な形式であり、たとえば埋め込みスクリプトが可能です。これは次のいずれかです。ユーザーが提供元不明のコンテンツを貼り付けると危険であるため、サニタイズステップが実行されます。データがコピーされると、Async Clipboard API は、整形式の SVG ドキュメントを生成し、クリップボードに書き込みます。日時データが貼り付けられると、厳密に処理された SVG フラグメントがフラグメントによって生成される使用します。したがって、貼り付けオペレーションの前に、onclick イベントハンドラは属性は引き続き残りますが、貼り付け時に削除されます。

クリップボードの内容を検査している、macOS のクリップボードビューアアプリ。内容
SVG の click イベントリスナー属性がまだ残っていることを確かめます。 — macOS のクリップボードビューアアプリでクリップボードの内容を調べている。内容 SVG の click イベントリスナー属性がまだ残っていることを確認してください。

デモ

SVG のコピーと貼り付けについて詳しくは、 Glitch のデモをご覧ください。詳しくは、ソースコードでその仕組みを見てみましょう。その前後の円のいずれかをクリックしてみてくださいコピー&ペーストも可能です。貼り付け後、危険性のある onclick イベントハンドラ属性が削除されます。

謝辞

Chromium での Async Clipboard API の SVG サポートは、 Microsoft Edge チームが担当します。この投稿は Rachel Andrew と Anupam Snigdha によってレビューされました。

Async Clipboard API 向け SVG サポート

SVG 機能検出のサポート

SVG 画像をコピーする

SVG 画像を貼り付ける

サニタイズ

デモ

関連リンク

謝辞