JavaScript realiza proteção de conteúdo da web
0. Cenário de negócios
Se você precisar proteger o conteúdo exibido no site, por exemplo:
1. Anticópia de conteúdo de texto;
2. Impedindo o download de imagens;
3. Anticópia de vídeos;
aqui usamos js para proteger o conteúdo da página da Web e adotarei as 3 soluções abaixo. Proteja o conteúdo de nossas páginas da web do mais superficial ao mais profundo.
1. É proibido selecionar o conteúdo do texto da página da web
Defina o estilo css para proibir os usuários de selecionar conteúdo de texto. Portanto, resolve-se que os usuários não podem copiar e colar diretamente o conteúdo do nosso site.
<style type="text/css">
/*禁止在网页中选中文字*/
body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
</style>
2. Desative o botão direito (para evitar a visualização do código-fonte da página da web)
Proibir o botão direito do mouse em uma página da web impede que os usuários vejam o código-fonte da página da web e revisem os elementos.
<script type='text/javascript'>
//禁用右键（防止右键查看源代码）
window.oncontextmenu=function(){
return false;}
</script>
3. Impedir o início de ferramentas de depuração de desenvolvedor
3.1 Proibir qualquer evento de toque do teclado
Impedir que os usuários de lançar desenvolvedor ferramentas de depuração através de tecla de atalho F12
Impedir que os usuários lançar ferramentas de atalho através de ctrl + shift + i
<script type='text/javascript'>
//禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具）
window.onkeydown = window.onkeyup = window.onkeypress = function () {
window.event.returnValue = false;
return false;
}
</script>
3.2 Impedir que as configurações do navegador iniciem as ferramentas do desenvolvedor
O usuário pode abrir a ferramenta de depuração do desenvolvedor na barra de ferramentas do navegador. Veja o Google Chrome como exemplo: clique em "Configurações" - "Mais ferramentas" -Ferramentas do desenvolvedor.
<script type='text/javascript'>
//如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面
var h = window.innerHeight,w=window.innerWidth;
window.onresize = function () {
if (h!= window.innerHeight||w!=window.innerWidth){
window.close();
}
}
</script>
Se as ferramentas do desenvolvedor estiverem configuradas para se separarem do navegador atual, ou seja, para serem exibidas independentemente, adicione o seguinte código:
<script type='text/javascript'>
/*如果设置开发者工具独立窗口显示，则不会改变原来网页的高度和宽度，
* 当你通过浏览器设置—打开开发者工具，则直接关闭当前窗口，让你无法查看网页元素。（不支持IE9以下浏览器）*/
if(window.addEventListener){
window.addEventListener("DOMCharacterDataModified", function(){
window.close(); }, true);
window.addEventListener("DOMAttributeNameChanged", function(){
window.close(); }, true);
window.addEventListener("DOMCharacterDataModified", function(){
window.close(); }, true);
window.addEventListener("DOMElementNameChanged", function(){
window.close(); }, true);
window.addEventListener("DOMNodeInserted", function(){
window.close(); }, true);
window.addEventListener("DOMNodeInsertedIntoDocument", function(){
window.close(); }, true);
window.addEventListener("DOMNodeRemoved", function(){
window.close(); }, true);
window.addEventListener("DOMNodeRemovedFromDocument", function(){
window.close(); }, true);
window.addEventListener("DOMSubtreeModified", function(){
window.close(); }, true);
}
</script>
4. O código completo é o seguinte:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*禁止在网页中选中文字*/
body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
</style>
<script type='text/javascript'>
//1.禁用右键（防止右键查看源代码）
window.oncontextmenu=function(){
return false;}
//2.禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具）
window.onkeydown = window.onkeyup = window.onkeypress = function () {
window.event.returnValue = false;
return false;
}
//3.当用户在工具栏调起开发者工具，判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面
var h = window.innerHeight,w=window.innerWidth;
window.onresize = function () {
if (h!= window.innerHeight||w!=window.innerWidth){
window.close(); //关闭浏览器
}
}
/*4.当开发者工具独立窗口显示，则不会改变原来网页的高度和宽度，
* 因此，当通过浏览器设置—打开开发者工具，则直接关闭当前窗口，让你无法查看网页元素。（不支持IE9以下浏览器）*/
if(window.addEventListener){
window.addEventListener("DOMCharacterDataModified", function(){
window.close(); }, true);
window.addEventListener("DOMAttributeNameChanged", function(){
window.close(); }, true);
window.addEventListener("DOMCharacterDataModified", function(){
window.close(); }, true);
window.addEventListener("DOMElementNameChanged", function(){
window.close(); }, true);
window.addEventListener("DOMNodeInserted", function(){
window.close(); }, true);
window.addEventListener("DOMNodeInsertedIntoDocument", function(){
window.close(); }, true);
window.addEventListener("DOMNodeRemoved", function(){
window.close(); }, true);
window.addEventListener("DOMNodeRemovedFromDocument", function(){
window.close(); }, true);
window.addEventListener("DOMSubtreeModified", function(){
window.close(); }, true);
}
</script>
</head>
<body>
这是一段文本内容,这是一段文本内容,这是一段文本内容,
<br />
这是一段文本内容,这是一段文本内容,这是一段文本内容,
<br />
<video autoplay="autoplay"
controls="controls"
src="video/1实验一：Python安装与开发环境搭建.mp4"
width="500px">
</video>
</body>
</html>
5. Perceba o efeito
