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 형식은 현재 데스크톱 및 모바일 Chromium에서 지원됩니다. 버전 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용 스크린샷입니다.

데모

아래 데모를 사용해 보고 소스 코드에서 데모 작동 방식을 확인하세요.

감사의 말씀

이 도움말은 Joe Medley가 검토했습니다. 및 François Beaufort의 음악을 살펴보세요. Neon Tommy의 히어로 이미지. CC BY-SA 2.0 라이선스.