Async Clipboard API를 위한 웹 맞춤 형식

Thomas Steiner

지금까지 Async Clipboard API는 시스템 클립보드에서 복사하여 붙여넣을 수 있는 제한된 MIME 유형 집합(특히 text/plain, text/html, image/png)을 지원했습니다. 일반적으로 브라우저는 삽입된 script 요소 또는 javascript: 링크를 HTML 문자열에서 삭제하거나 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 스크린샷과 같이).

데모

아래 데모를 실행하고 소스 코드를 확인하여 데모의 작동 방식을 확인할 수 있습니다.

감사의 말

이 문서는 조 메들리와 프랑수아 보퍼트가 검토했습니다. CC BY-SA 2.0 라이선스에 따라 사용된 Neon Tommy의 히어로 이미지입니다.