Async Clipboard API のウェブ カスタム フォーマット

これまで、Async Clipboard API では、 システム クリップボードとコピーして貼り付ける MIME タイプ。具体的には text/plaintext/htmlimage/png。通常、ブラウザはこれをサニタイズします。たとえば、HTML 文字列から埋め込まれた script 要素や javascript: リンクを削除したり、PNG の圧縮ボム攻撃を防いだりします。

ただし、クリップボードに未処理のコンテンツをサポートすることが望ましい場合もあります。

  • アプリケーションがサニタイズそのものを処理する状況。
  • コピーしたデータが貼り付けるデータと同じであることが重要な状況。

そのような場合に備えて、Async Clipboard API で、ウェブ カスタム形式がサポートされるようになりました。これにより、 任意のデータをクリップボードにコピーできます。

ブラウザ サポート

画像をサポートする Async Clipboard API 自体は、Chromium 76 以降でサポートされています。ウェブカスタム Async Clipboard API のフォーマットは、 バージョン 104 になります。

ウェブのカスタム フォーマットをクリップボードに書き込む

ウェブのカスタム形式をクリップボードに書き込む方法は、 サニタイズされた書式の記述(ただし、 を使用して、blob の MIME タイプの先頭に文字列 "web "(末尾のスペースを含む)を付加します。

// Fetch remote JPEG and GIF images and obtain their blob representations.
const [jpegBlob, gifBlob] = await Promise.all([
  fetch('image.jpg').then((response) => response.blob()),
  fetch('image.gif').then((response) => response.blob()),
]);

try {
  // Write the image data to the clipboard, prepending the blobs' actual
  // types (`"image/jpeg"` and "image/gif") with the string `"web "`, so
  // they become `"web image/jpeg"` and `"web image/gif"` respectively.
  // The code elegantly makes use of computed property names:
  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names.
  const clipboardItem = new ClipboardItem({
    [`web ${jpegBlob.type}`]: jpegBlob,
    [`web ${gifBlob.type}`]: gifBlob,
  });
  await navigator.clipboard.write([clipboardItem]);
} catch (err) {
  console.error(err.name, err.message);
}

クリップボードからウェブのカスタム形式を読み取っています

文書作成と同様に、クリップボードからカスタムのウェブ形式を読み込むのは、 サニタイズされた形式を読み取る。唯一の違いは、アプリが "web " で始まるタイプのクリップボード アイテムを探す必要がある点です。

try {
  // Iterate over all clipboard items.
  const clipboardItems = await navigator.clipboard.read();
  for (const clipboardItem of clipboardItems) {
    for (const type of clipboardItem.types) {
      // Discard any types that are not web custom formats.
      if (!type.startsWith('web ')) {
        continue;
      }
      const blob = await clipboardItem.getType(type);
      // Sanitize the blob if you need to, then process it in your app.
    }
  }
} catch (err) {
  console.error(err.name, err.message);
}

プラットフォーム固有のアプリとの相互運用性

web image/jpeg のようなウェブのカスタム形式は、一般的なプラットフォーム固有の形式ではありません。 (image/jpeg を想定しているため)。時間の経過とともに、 デベロッパーがウェブ向けのサポートを考慮した場合、オプトインなど、そうした形式のサポートを追加することが期待される ユーザーとの関連性が高いカスタム フォーマットを作成します。オペレーティング システムのクリップボードには、 フォーマットは複数のフォーマットで用意されており、すぐに利用できる macOS のスクリーンショットを以下に示します。

2 つのウェブカスタム フォーマットをリストするカスタム フォーマット マップが表示されている macOS のクリップボード エクストラクタ。

デモ

以下のデモをお試しください。 ソースコードを表示して、デモの動作を確認してください。

謝辞

この記事は Joe Medley によってレビューされました。 François Beaufort Neon Tommy によるヒーロー画像( CC BY-SA 2.0 ライセンスが必要です。