Início > Programação > Bloqueando Cópia de Conteúdo de Página com jQuery

Bloqueando Cópia de Conteúdo de Página com jQuery

Precisei impedir que o usuário copiasse o conteúdo de uma página. Abaixo, segue um script que faz o bloqueio de:

  • CRTL+A (selecionar tudo)
  • Menu de contexto do clique com o botão direito
  • Selecionar texto com o mouse

function block() {
	jQuery.fn.extend({
		disableSelection : function() {
			return this.each(function() {
				this.onselectstart = function() {
					return false;
				};
				this.unselectable = "on";
				jQuery(this).css('user-select', 'none');
				jQuery(this).css('-o-user-select', 'none');
				jQuery(this).css('-moz-user-select', 'none');
				jQuery(this).css('-khtml-user-select', 'none');
				jQuery(this).css('-webkit-user-select', 'none');
			});
		},
		disableSelectedAll : function() {
			return this.each(function() {
				this.onkeydown = function(event) {
					if( event.ctrlKey \\&\\& (event.keyCode == 65 || event.keyCode == 97) ){
						event.preventDefault();
					}
				};
			});
		}
	});
	
	$(document).disableSelection();

	$(document).disableSelectedAll();

	$(document).bind('contextmenu', function(event) {
		event.preventDefault();
	});
}


A solução anterior bloqueia a cópia de conteúdo em todo o documento. Se você quiser bloquear apenas o que estiver abaixo de uma “div” por exemplo, dê um ID ou crie uma css class para ela. Você poderia utilizar exatamente o script anterior trocando “document” pelo ID ou pela class do seu componente, mas vamos fazer algo mais específico para bloquear:

  • Copiar, Recortar e Colar
  • Menu de contexto do clique com o botão direito
  • Foco
  • Seleção de texto

function block() {
	$('#component').bind('contextmenu', function(event) {
		event.preventDefault();
	});

	$('#component').bind('selectstart dragstart', function(event) {
		event.preventDefault();
		return false;
	});

	$("#component").bind("cut copy paste", function() {
		return false;
	});

	$('#component').focus(function() {
		$(this).blur();
	});
}


Importante: Se você estiver fazendo chamadas ajax para renderizar dinamicamente parte da página, é necessário recarregar o script.


Problemas


O resultado do código parece atender a todas as expectativas do cliente, mas na verdade ele é apenas um placebo. Lembre-se que não é possível impedir o usuário de fazer algo errado. Podemos sim limitar suas macro ações. Citando um grande colega meu:

Quanto mais esperto a gente tenta ser, mais burro a gente fica!


Dentre as saídas pela esquerda que um usuário, dependendo do nível dele, pode utilizar, cito:

  • Menu Salvar Como: o usuário pode utilizar a browser para salvar uma cópia do html com todo o conteúdo;
  • Firebug: pode-se utilizá-lo para inspecionar um elemento e capturar seu conteúdo;
  • Print Screen: pode-se copiar uma tela inteira como imagem. Nem valeria a pena tentar bloquear a tecla de atalho pelo jQuery, pois só funcionaria se a página estivesse com o foco;
  • Tirar foto com o celular: sem comentários :D.

Anúncios
  1. 14/10/2013 às 8:54 AM

    Pode-se utilizar o Jsbin para testar o script:

    http://jsbin.com/

  1. No trackbacks yet.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: