Clipboard
Clipboard API
브라우저에서 클립보드를 조작하기 위해 사용되는 API 집합
클립보드에서 데이터를 읽어서 복사, 붙여넣기 등의 기능을 수행할 수 있다.
텍스트, 이미지 및 기타 데이터를 클립보드에 복사할 수 있다.
API는 사용자의 개인정보를 존중하도록 설계되었기 때문에 클립보드에서의 읽는 등의 작업에는 사용자의 승인이 필요한 경우가 많다.
const clipBoard = navigator.clipboard;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 }),
})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);
}지원하지 않는 환경에서 처리
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);
}Last updated