Nesta série de três artigos intitulada Como Proteger o Conteúdo de Páginas Web, vamos ver como proteger, ou melhor, dificultar a cópia do conteúdo de uma página web.
Javascript para proteção de conteúdo
Neste primeiro artigo, veremos como desabilitar as teclas CTRL, ALT e SHIFT, impedindo assim a combinação de teclas Ctrl+C, Ctrl+V. Também veremos com desabilitar as teclas de funções. Além disso, vamos desabilitar o menu de contexto do navegador e a seleção de textos na página. Tudo isso utilizando o Javascript.
Calma! Eu sei que o Javascript pode ser desabilitado no navegador. Por isso veremos nos próximos artigos como forçar a execução do Javascript e impedir o acesso ao site ou a uma página caso o Javascript não esteja habilitado.
Desabilitando as teclas Ctrl, Shift e Alt
Antes de mais nada, vamos criar um arquivo Javascript. O nome do arquivo não importa, você pode usar qualquer nome mas neste artigo vou usar o nome script.js.
Nesta arquivo, teremos um bloco de comando que será executado quando a página for totalmente carregada, ou seja, quando todos os elementos do DOM da página estiverem carregados, e para isso vamos usar o evento onload do objeto window. Então o nosso script, neste ponto fica assim:
window.onload = function() {
}
O segundo passo, é criar uma função que irá manipular todos os eventos de teclado e mouse. Vou chamar esta função de eventHandler() e o nosso script fica assim:
window.onload = function() {
function eventHandler() {
if (window.event.shiftKey == true) {
console.log("A tecla foi Shift pressionada");
return false;
} else if (window.event.ctrlKey == true) {
console.log("A tecla CTRL pressionada.");
return false;
} else if (window.event.altKey == true) {
console.log("A tecla ALT foi pressionada.");
return false;
} else {
console.log("Você não pressionou CTRL, Shift ou Alt!");
}
}
}
Na função verificamos a chamada aos eventos shiftKey, ctrlKey e altKey, que são os eventos disparados quando as teclas Shift, Ctrl e Alt são pressionadas. Quando algum desses eventos é disparado, simplesmente retornamos false na função o que, a grosso modo, cancela a execução do evento. Também exibimos um mensagem no console indicando qual tecla foi pressionada. Mas isso é apenas para depuração e essas linhas podem ser removidos do script no final.
Com a função já definida, agora vamos fazer com que ela seja executada toda vez que um tecla for pressionada. Para isso basta inserir uma linha logo no início do script, abaixo da linha que define o evento onload do objeto window.
window.onload = function() {
document.onkeydown = eventHandler;
…
Essa linha define o evento onkeydown do objeto document, fazendo com que toda tecla pressionada será tratada pala função eventHandler.
Agora basta incluir o arquivo script.js na página para impedir que as combinações de teclas Crtl+C, Crtl+V e outras possam ser usadas para copiar o conteúdo da página.
Desabilitando o menu de contexto e seleção de textos
Pois bem, não adianta de nada impedir que o visitante use as combinações de teclas Crtl+C e Ctrl+V se ele ainda puder selecionar o texto da página com o mouse e depois abrir o menu de contexto e clicar em copiar.
Sem problema. Vamos desabilitar a seleção de textos e o menu de contextos. Para isso basta acrescentar algumas poucas linhas ao nosso script. Essas linhas devem ficar logo no início no script, abaixo da linha que incluímos antes, com a função eventHandler. Assim:
window.onload = function() {
document.onkeydown = eventHandler;
document.oncontextmenu = function() { return false; }
document.onselectionchange = function() { return false; }
document.onselectstart = function() {return false;}
…
O que fazemos nestas linhas é atribuir aos eventos oncontextomenu, onselectionchange e onselectstart, funções que apenas retornam false em qualquer circunstância, o que desabilita os respectivos eventos.
Desabilitando as teclas de funções
Agora vamos desabilitar as teclas de funções do navegador. Isso irá dificultar o acesso do visitante do site aos recursos de desenvolvimento do navegador acessados quando a tecla F12 é pressionada. Claro que esses recursos podem ser acessados pelo menu, mais como eu disse no início do artigo, o objetivo é dificultar as coisas.
Nesta etapa vamos desabilitar as teclas de função do navegador exceto as teclas F3, F5 e F11. Respectivamente, a pesquisa na página, a atualização de página e a visualização em tela cheia.
Voltando à função eventHandler, no bloco else do if principal da função, vamos incluir mais algumas linhas que vão pegar o código numérico da tecla pressionada e retornar false se o código for de uma das teclas de função, exceto se for o código das teclas F3, F5 ou F11. E o else fica assim:
...
} else {
console.log("Você não pressionou CTRL, Shift ou Alt!");
var key = e.keyCode || e.which;
if(key>=112 && key<=123 && !(key==114 || key==116 || key==122)) {
return false;
}
}
...
Com isso, terminamos e o nosso arquivo script.js que fica assim:
window.onload = function() {
document.onkeydown = eventHandler;
document.oncontextmenu = function() { return false; }
document.onselectionchange = function() { return false; }
document.onselectstart = function() {return false;}
function eventHandler() {
if (window.event.shiftKey == true) {
console.log("A tecla foi Shift pressionada");
return false;
} else if (window.event.ctrlKey == true) {
console.log("A tecla CTRL pressionada.");
return false;
} else if (window.event.altKey == true) {
console.log("A tecla ALT foi pressionada.");
return false;
} else {
console.log("Você não pressionou CTRL, Shift ou Alt!");
var key = e.keyCode || e.which;
if(key>=112 && key<=123 && !(key==114 || key==116 || key==122)) {
return false;
}
}
}
}
Com esse pequeno e simples script, dificultamos a cópia de conteúdo da página onde o script estiver em execução.
Certo, certo. O Javascript pode estar desabilitado e tudo isso não valerá de nada. Por isso que no próximo artigo da série vamos forçar a habilitação do Javascript para que a página seja visualizada. Então não perca o próximo artigo. Curta a nossa página no Facebook para ficar informado sobre a publicação de novos arquivos.
