API navigator.clipboard

Interagir com a área de transferência do host de um usuário é algo que os desenvolvedores da Web desejam tanto para fins positivos quanto negativos. Para o bem, é bom permitir que os usuários copiem facilmente textos como endereços de carteiras ou nomes de agências; para o mal, copiar textos maliciosos que o usuário pode colar por engano em um formulário e ter seus fundos roubados – e provavelmente há mais motivos maliciosos.

Costumávamos usar o document.execCommand('copy') para realizar essa tarefa, mas ele não era confiável. O navigator.clipboard API fornece async readText e writeText para gerenciar os dados da área de transferência. Vamos dar uma olhada em como isso funciona!

// 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()
    }
)

O readText e writeText são bastante fáceis de usar, mas o senhor não pode executar esse código sempre que quiser, devido aos protocolos de segurança do navegador. Muitas vezes, é necessário usar esse código dentro de um ouvinte de eventos, como resultado de uma ação tomada pelos usuários.

Estou feliz por termos agora uma API que é assíncrona e mais confiável do que a grosseira execCommand dos velhos tempos. Ainda assim, às vezes me pergunto como isso poderia ser explorado, porque, afinal, o senhor ainda pode colocar qualquer texto lá. Mas vamos nos ajudar mutuamente: vamos usar essa API para o bem, não para o mal!