Async Clipboard API를 위한 웹 맞춤 형식

Thomas Steiner

지금까지 Async Clipboard API는 시스템 클립보드에 복사하고 클립보드에서 붙여넣을 수 있는 제한된 MIME 유형(특히 text/plain, text/html, image/png)을 지원했습니다. 브라우저는 일반적으로 이를 정리하여 예를 들어 HTML 문자열에서 삽입된 script 요소 또는 javascript: 링크를 삭제하거나 PNG 압축 해제 폭탄 공격을 방지합니다.

하지만 경우에 따라 클립보드에서 정리되지 않은 콘텐츠를 지원하는 것이 바람직할 수 있습니다.

• 애플리케이션에서 정리 작업을 직접 처리하는 상황
• 복사된 데이터가 붙여넣은 데이터와 동일해야 하는 중요한 상황

이러한 경우 이제 Async Clipboard API에서 개발자가 임의의 데이터를 클립보드에 쓸 수 있는 웹 맞춤 형식을 지원합니다.

브라우저 지원

이미지 지원이 포함된 Async Clipboard API 자체는 Chromium 76부터 지원됩니다. Async Clipboard API의 웹 맞춤 형식은 버전 104부터 데스크톱 및 모바일 Chromium에서 지원됩니다.

클립보드에 웹 맞춤 형식 쓰기

클립보드에 웹 맞춤 형식을 작성하는 것은 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의 스크린샷에서 볼 수 있듯이 다양한 형식이 소비할 준비가 되어 있습니다.

데모

데모를 사용해 보고 소스 코드를 확인하여 데모의 작동 방식을 알아볼 수 있습니다.

감사의 말씀

이 문서는 Joe Medley와 François Beaufort가 검토했습니다.