Async Clipboard API를 위한 SVG 지원

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

비동기 클립보드 API의 Clipboard 인터페이스는 시스템 클립보드의 콘텐츠에 대한 읽기 및 쓰기 액세스를 제공합니다. 이를 통해 웹 애플리케이션에서 잘라내기, 복사, 붙여넣기 기능을 구현할 수 있습니다. read() 메서드를 호출하여 클립보드의 데이터를 애플리케이션에 붙여넣고 write() 메서드를 호출하여 데이터를 클립보드에 복사할 수 있습니다. 이제 Async Clipboard API는 텍스트, Portable Network Graphics (PNG) 형식의 이미지, 정리된 정리되지 않은 HTML, 웹 맞춤 형식 외에도 SVG 이미지의 복사 및 붙여넣기를 지원합니다. 즉, 해킹된 해결 방법을 사용하거나 텍스트로 복사 및 붙여넣는 대신 이미지로 SVG 이미지를 복사 및 붙여넣어 SVG를 처리하는 이미지 편집 소프트웨어와 더 자연스럽게 상호작용할 수 있습니다.

SVG 지원 기능 감지

원하는 MIME 유형을 전달하여 정적 ClipboardItem.supports() 메서드를 호출하여 SVG 이미지 (및 기타 MIME 유형) 지원을 감지합니다.

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

SVG 이미지 복사

객체로 ClipboardItem을 채워 SVG 이미지를 복사합니다. 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를 읽고 getType() 메서드로 원하는 유형 (이 경우 'image/svg+xml')을 가져옵니다. 이렇게 하면 blob이 반환되며, 이 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의 onclick 이벤트 리스너 속성이 여전히 있음을 보여줍니다.
macOS의 클립보드 뷰어 앱이 클립보드 콘텐츠를 검사합니다. SVG의 onclick 이벤트 리스너 속성이 여전히 있음을 보여줍니다.

데모

데모에서 SVG를 복사하여 붙여넣는 방법을 살펴보세요. 소스 코드를 확인하여 작동 방식을 알아보세요. 복사하여 붙여넣기 전후에 원을 클릭해 보세요. 붙여넣은 후 잠재적으로 위험한 onclick 이벤트 핸들러 속성이 삭제됩니다.

감사의 말씀

Chromium의 비동기 클립보드 API에 대한 SVG 지원은 Microsoft Edge팀에서 구현했습니다. 이 게시물은 Rachel Andrew와 Anupam Snigdha가 검토했습니다.