분류 javascript

navigator.clipboard API

컨텐츠 정보

  • 조회 262 (작성일 )

본문

사용자의 호스트 클립 보드와 상호 작용하는 것은 웹 개발자가 선과 악의 목적을 위해 원했던 것입니다.

좋은 점은 사용자가 지갑 주소나 지점 이름과 같은 텍스트를 쉽게 복사 할 수 있다는 점입니다. 악의적인 경우 사용자가 실수로 양식에 붙여 넣고 자금을 도난 당할 수 있는 악성 텍스트를 복사하는 것입니다.


이 작업을 수행하기 위해 document.execCommand( 'copy')를 사용했지만 신뢰할 수 없었습니다. navigator.clipboard API는 클립 보드 데이터 관리를 위한 비동기 readText 및 writeText 메소드를 제공합니다. 어떻게 작동하는지 살펴 보겠습니다!


// Write to clipboard
document.body.addEventListener(
    "click", 
    (e) => {
        await navigator.clipboard.writeText("Yo")
    }
)

// Read from clipboard
document.body.addEventListener(
    "click", 
    (e) => {
        const text = await navigator.clipboard.readText()
    }
)

readText 및 writeText 메서드는 사용하기에 충분히 쉽지만 브라우저 보안 프로토콜로 인해 원할 때마다 이 코드를 실행할 수 없습니다.

사용자가 수행 한 작업의 결과로 이벤트 리스너 내부에서 이 코드를 사용해야 하는 경우가 많습니다.


나는 이제 우리가 예전의 총체적인 execCommand 해킹보다 비동기적이고 더 안정적인 API를 갖게 되어 기쁩니다. 그럼에도 불구하고 나는 때때로 이것이 어떻게 악용 될 수 있는지 궁금합니다. 왜냐하면 결국 거기에 텍스트를 넣을 수 있기 때문입니다.


그래도 모두 서로를 견고하게 합시다-이 API를 악이 아닌 선을 위해 사용합시다!


https://davidwalsh.name/navigator-clipboard-api 



API