Clipboard

Clipboard API

브라우저에서 클립보드를 조작하기 위해 사용되는 API 집합

• 클립보드에서 데이터를 읽어서 복사, 붙여넣기 등의 기능을 수행할 수 있다.

• 텍스트, 이미지 및 기타 데이터를 클립보드에 복사할 수 있다.

• API는 사용자의 개인정보를 존중하도록 설계되었기 때문에 클립보드에서의 읽는 등의 작업에는 사용자의 승인이 필요한 경우가 많다.

const clipBoard = navigator.clipboard;

이전에는 자바스크립트에서 document.exeCommand 를 사용해 OS Clipboard에 액세스했지만, 다양한 보안 및 성능 문제로 Clipboard API로 대체되었다.

Interface

클립보드의 두 가지 주요 인터페이스

• 클립보드 인터페이스는 운영 체제(Window, macOS) 클립보드에 사용됨

• writeText(text: string): Promise<void> -> 텍스트를 클립보드에 복사 (비동기)

  • 클립보드에 쓰는 작업의 경우, 버튼 클릭과 같은 사용자 제스처의 결과인 경우 브라우저는 일반적으로 명시적인 메시지 없이 권한을 부여한다.

  • 하지만 잠재적인 오류나 권한 문제를 인식하고 처리하는 것이 좋다.

• readText(): Promise<T> -> 클립보드의 데이터를 읽기

  • 클립보드가 비어 있거나, 텍스트가 포함되어 있지 않거나, 클립보드의 내용을 나타내는 객체 중 텍스트 표현이 포함되어 있지 않은 경우 빈 문자열을 반환한다.

  • 해당 메서드를 호출하면 브라우저는 사용자가 앱에 클립보드에서 읽을 수 있는 권한을 부여했는지 확인한다.

  • 읽을 수 있는 권한을 부여했는지 확인이 필요하기에 명시적으로 에러처리를 해주어야 한다.

write() vs writeText(), read() vs readText()

• write(data: ClipboardItem): ClipboardItem 객체를 받아 클립보드에 쓰이는 데사용된다.

  • 다양한 형식의 데이터를 클립보드에 복사 가능

• writeText(data: string): 단순 텍스트를 클립보드에 쓰는 경우 해당 메서드를 사용

• read(): Promise<ClipboardItem> : ClipboardItem 객체를 반환하며, ClipboardItem 객체는 클립보드에 있는 데이터와 해당 형식의 대한 정보를 제공

• readText() Promise<string>: 클립보드에서 텍스트를 읽어온다.

장점

• 브라우저에서 클립보드 조작을 지원하여 복사, 잘라내기, 붙혀넣기를 쉽게 할 수 있다.

• 다양한 유형의 데이터를 클립보드에 복사할 수 있다.

• 다양한 유형의 데이터를 읽기 지원한다.

단점

• 호환성 문제로 일부 사용자는 관련 기능을 사용하지 못할 수 있다.

• 클립보드를 작동하기 위해 사용자의 승인을 얻어야 하는 경우 불필요한 간섭이 발생(팝업)

• 악성 웹사이트가 사용자의 클립보드에 복사한 민감한 정보에 액세스할 수 있는 등 보안의 문제가 되는 경우도 존재

주의사항

• 클립보드 인터페이스를 사용할 때는 사용자의 승인을 먼저 받아야 한다.

• 클립보드 데이터를 처리할 때 예기치 않은 오류가 발생하지 않도록 데이터 유형의 주의 필요

• 사용자 모르게 또는 동의 없이 클립보드에서 읽거나 쓰는 것은 심각한 보안 위험이 될 수 있으므로 항상 클립보드에 액세스할 수 있는 권한과 정당사유가 있는지 확인이 필요하다.

제한사항

• 클릭 이벤트 외부에서는 해당 메서드를 호출할 수 없다.

• 악성 프로그램이 사용자 몰래 스크립트나 기타 악성 코드를 사용자의 클립보드에 복사하지 못하도록 하기 위한 보안 조치

  • Failed to copy! DOMException: Document is not focused

ClipboardItem

Clipboard API에서 사용되는 객체로, 클립보드에 쓰거나 읽을 데이터를 나타낸다.

• 클립보드에 일반 텍스트가 아닌 다른 것을 넣으려면 ClipboardItem을 사용하여 일치하는 MIME 유형을 정의해야 한다

• type: 클립보드 아이템의 유형을 설명하는 문자열의 배열

  • 클립보드의 아이템이 어떤 종류의 데이터를 포함하고 있는지를 나타낸다.

  • Text의 경우 ["text/plain"] 과 같은 값을 갖음

• getType(): 특정 데이터 유형에 대한 데이터를 비동기적으로 가져오는 메서드

• getTypeAsString(): getType과 비슷하지만 데이터를 문자열로 받는다.

const clipboardItem = new ClipboardItem({
  [MIME_TYPE]: new Blob([stream], { type: MIME_TYPE }),
})

Custom Format

• Clipboard API 이전에는 클립보드에 복사 붙여넣을 수 있는 MIME 유형으로 text/plain, text/html, image/png 만 지원했다.

• 브라우저에 내장된 스크립트 구성요소나 자바스크립트를 제거하거나 PNG decompression bomb assaults을 막기 위해 처리 작업을 수행하는 경우가 많앗다.

• 클립보드 API는 이제 웹 사용자 지정 형식을 지원하므로 개발자가 모든 데이터를 복사할 수 있다.

• 웹 사용자 정의 타입을 사용하면 JSON.stringify() 와 함께 사용하여 웹에서 새로운 데이터 형식을 정의할 수 있다.

• 기본적으로 텍스트 형식으로 변환하지 않고 다른 애플리케이션으로 직접 복사할 수 있다.

정의하기

• 클립보드에 웹 사용자 정의 형식을 사용하려면 Blob의 MIM 유형의 접두사로 'web' 을 작성해야 한다.

데이터 읽기

• 사용자 정의 형식의 데이터를 읽으려면 web 으로 시작하는 클립보드 개체를 검색해야 한다.

try {
  const clipboardItems = await navigator.clipboard.read();
  for (const clipboardItem of clipboardItems) {
    for (const type of clipboardItem.types) {
      if (!type.startsWith('web ')) {
        continue;
      }
      const blob = await clipboardItem.getType(type);
    }
  }
} catch (err) {
  console.error(err.name, err.message);
}

웹 사용자 정의 형식은 표준이다.

클립보드 API의 목적은 사용자가 파일 형식을 만드는 것이 아니라 한 소스의 콘텐츠를 다른 소스의 임시 저장 공간에 직접 복사하는 것, 즉 붙여넣기라고 하는 프로세스를 지원하는 것

If you're using MIME types other than text, it's good to provide a text/plain fallback if your target doesn't understand a particular MIME type.

지원하지 않는 환경에서 처리

try {
  const permission = await navigator.permissions.query({ name: 'clipboard-read' });
  if (permission.state === 'denied') {
    throw new Error('Not allowed to read clipboard.');
  }
  const clipboardContents = await navigator.clipboard.read();
  for (const item of clipboardContents) {
    // do things with the clipboard entries
  }
} catch (error) {
  console.error(error.message);
}