Async Clipboard API를 위한 SVG 지원

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Async Clipboard API의 Clipboard 인터페이스는 시스템 클립보드의 콘텐츠에 대한 읽기 및 쓰기 액세스 권한을 제공합니다. 이를 통해 웹 애플리케이션에서 잘라내기, 복사, 붙여넣기 기능을 구현할 수 있습니다. read() 메서드를 호출하여 클립보드의 데이터를 애플리케이션에 붙여넣고 write() 메서드를 호출하여 클립보드에 데이터를 복사할 수 있습니다. 이제 Async Clipboard API는 텍스트, 휴대용 네트워크 그래픽 (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 URL로 변환된 후 <img>의 src 속성에 할당할 수 있는 blob이 반환됩니다.

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 이벤트 리스너 속성이 여전히 있음을 보여줍니다.

데모

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

감사의 말씀

Chromium의 Async Clipboard API에 대한 SVG 지원은 Microsoft Edge팀에서 구현했습니다. 이 게시물은 레이첼 앤드류와 아누팜 스니그다가 검토했습니다.