Async Clipboard API를 위한 SVG 지원

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Async Clipboard API의 Clipboard 인터페이스는 시스템 클립보드의 콘텐츠에 관한 읽기 및 쓰기 액세스 권한을 제공합니다. 이를 통해 웹 애플리케이션에서 잘라내기, 복사, 붙여넣기 기능을 구현할 수 있습니다. read() 메서드를 호출하여 클립보드에서 애플리케이션에 데이터를 붙여넣고 write() 메서드를 호출하여 클립보드에 데이터를 복사할 수 있습니다. 텍스트, 휴대용 네트워크 그래픽 (PNG) 형식의 이미지, 정리 및 삭제되지 않은 HTML, 웹 맞춤 형식 외에도 Async Clipboard API는 이제 SVG 이미지 복사 및 붙여넣기를 지원합니다. 즉, 최종적으로 SVG 이미지 대신 SVG 이미지를 복사해 붙여넣는 대신 이미지 편집 소프트웨어를 더 자연스럽게 처리할 수 있습니다.

특성 감지 SVG 지원

정적 ClipboardItem.supports() 메서드를 호출하고 원하는 MIME 유형에 전달하여 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의 온클릭 이벤트 리스너 속성이 여전히 존재함을 보여줍니다.
macOS의 클립보드 뷰어 앱에서 클립보드 콘텐츠를 검사합니다. SVG의 온클릭 이벤트 리스너 속성이 여전히 존재함을 보여줍니다.

데모

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

감사의 말씀

Chromium의 Async Clipboard API를 위한 SVG 지원은 Microsoft Edge팀에서 구현했습니다. 이 게시물은 Rachel Andrew와 Anupam Snigdha가 검토했습니다.