Async Clipboard API를 위한 SVG 지원

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

이 Clipboard 인터페이스/ Async Clipboard API는 시스템 클립보드입니다. 따라서 웹 애플리케이션이 잘라내기, 복사 및 특성을 붙여넣을 수 있습니다. 다음을 수행하여 클립보드의 데이터를 애플리케이션에 붙여넣을 수 있습니다. 호출 read() 메서드 를 호출하여 데이터를 클립보드에 복사할 수 있습니다. write() 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다. 텍스트 외에도 휴대용 네트워크의 이미지 그래픽 (PNG) 형식으로 정리되지 않은 HTML 웹 맞춤 형식, Async Clipboard API는 이제 SVG 이미지 복사 및 붙여넣기도 지원합니다. SVG를 처리하는 이미지 편집 소프트웨어와 상호작용할 수 있습니다. SVG 이미지를 텍스트나 이미지가 아닌 이미지로 복사하여 붙여넣는 방식으로 해킹 해결 방법을 사용합니다.

특성 감지 SVG 지원

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

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

SVG 이미지 복사

다음을 채워 SVG 이미지를 복사합니다. ClipboardItem 및 객체입니다. 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를 다시 읽습니다. 원하는 유형 (이 경우 'image/svg+xml')을 가져옵니다. getType() 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다. 그러면 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 이벤트 핸들러가 속성은 여전히 존재하지만 붙여넣으면 삭제됩니다.

<ph type="x-smartling-placeholder">
</ph> 클립보드 콘텐츠를 검사하는 macOS의 클립보드 뷰어 앱 표시 SVG의 온클릭 이벤트 리스너 속성이 여전히 존재합니다.
클립보드 콘텐츠를 검사하는 macOS의 클립보드 뷰어 앱 표시 SVG의 온클릭 이벤트 리스너 속성이 여전히 존재합니다.

데모

다음에서 SVG 복사 및 붙여넣기 방법을 demo를 살펴봅니다. 보기: 소스 코드 방법을 알아보겠습니다. 클릭하기 앞뒤에 있는 원을 클릭해 보세요. 복사 및 붙여넣기입니다. 붙여넣기 후 잠재적으로 위험한 onclick 이벤트 핸들러 속성이 삭제됩니다.

감사의 말씀

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