web 页面阻止用户F12篡改页面元素和数据

最新推荐文章于 2023-09-25 00:47:46 发布
最新推荐文章于 2023-09-25 00:47:46 发布
阅读量1.3k 收藏 3
点赞数
文章标签： html
原文链接：https://blog.csdn.net/zhihui1017/article/details/62886185/
版权
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title></title>  
  6. <style type="text/css">  
  7. /*禁止选中文字*/  
  8. body{  
  9. -moz-user-select: none; /*火狐*/  
  10. -webkit-user-select: none; /*webkit浏览器*/  
  11. -ms-user-select: none; /*IE10*/  
  12. -khtml-user-select: none; /*早期浏览器*/  
  13. user-select: none;  
  14. }  
  15. </style>  
  16.   
  17. </head>  
  18.   
  19. <body>  
  20.   
  21.   
  22. <p>Test</p>  
  23. <script type='text/javascript'>  
  24. //这段js要放在页面最下方  
  25. var h = window.innerHeight,w=window.innerWidth;  
  26. //禁用右键 （防止右键查看源代码）  
  27. window.οncοntextmenu=function(){return false;}  
  28. //在本网页的任何键盘敲击事件都是无效操作 （防止F12和shift+ctrl+i调起开发者工具）  
  29. window.onkeydown = window.onkeyup = window.onkeypress = function () {  
  30.     window.event.returnValue = false;  
  31.     return false;  
  32. }  
  33. //如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面  
  34. window.onresize = function () {  
  35.     if (h != window.innerHeight||w!=window.innerWidth){  
  36.         window.close();  
  37.         window.location = "about:blank";  
  38.     }  
  39. }  
  40. /*好吧，你的开发者工具是单独的窗口显示，不会改变原来网页的高度和宽度， 
  41. 但是你只要修改页面元素我就重新加载一次数据,让你无法修改页面元素（不支持IE9以下浏览器）*/  
  42. if(window.addEventListener){  
  43. window.addEventListener("DOMCharacterDataModified", function(){window.location.reload();}, true);  
  44. window.addEventListener("DOMAttributeNameChanged", function(){window.location.reload();}, true);  
  45. window.addEventListener("DOMCharacterDataModified", function(){window.location.reload();}, true);  
  46. window.addEventListener("DOMElementNameChanged", function(){window.location.reload();}, true);  
  47. window.addEventListener("DOMNodeInserted", function(){window.location.reload();}, true);  
  48. window.addEventListener("DOMNodeInsertedIntoDocument", function(){window.location.reload();}, true);  
  49. window.addEventListener("DOMNodeRemoved", function(){window.location.reload();}, true);  
  50. window.addEventListener("DOMNodeRemovedFromDocument", function(){window.location.reload();}, true);  
  51. window.addEventListener("DOMSubtreeModified", function(){window.location.reload();}, true);  
  52. }  
  53.    
  54. //压缩后的代码  
  55. //var h=window.innerHeight,w=window.innerWidth;window.οncοntextmenu=function(){return!1},window.οnkeydοwn=window.οnkeyup=window.οnkeypress=function(){return window.event.returnValue=!1,!1},window.οnresize=function(){(h!=window.innerHeight||w!=window.innerWidth)&&(window.close(),window.location="about:blank")},window.addEventListener&&(window.addEventListener("DOMCharacterDataModified",function(){window.location.reload()},!0),window.addEventListener("DOMAttributeNameChanged",function(){window.location.reload()},!0),window.addEventListener("DOMCharacterDataModified",function(){window.location.reload()},!0),window.addEventListener("DOMElementNameChanged",function(){window.location.reload()},!0),window.addEventListener("DOMNodeInserted",function(){window.location.reload()},!0),window.addEventListener("DOMNodeInsertedIntoDocument",function(){window.location.reload()},!0),window.addEventListener("DOMNodeRemoved",function(){window.location.reload()},!0),window.addEventListener("DOMNodeRemovedFromDocument",function(){window.location.reload()},!0),window.addEventListener("DOMSubtreeModified",function(){window.location.reload()},!0))  
  56.   
  57. </script>  
  58. </body>  
  59. </html>  

    不完美的地方在于不支持IE9以下浏览器，还有就是只适用于展示数据，如果和用户有交互的页面使用不了，因为用户每次修改数据都会导致重新加载页面。

盏茶作酒
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js屏蔽F12审查元素，禁止修改页面代码等实现代码
10-14
有时候我们需要屏蔽客户端的F12，以防菜鸟也可以随意修改我们的代码，也处于源码的保护等操作，这里就为大家分享一下常见的代码
大发现：网站还可以这样用，随意修改网站内容
Wanghs0716的博客
10-10 2103
你知道吗？ 你不知道。 你肯定不知道。 你要是知道，你就不会点进来了。 回归正题。 想让百度热搜上全都是你的名字吗？ 和我一起动动手，愿望成真！ 第一步：打开百度一下，你就知道（仅以百度作为案例，其他网站也都可以） 第二步：键盘F12→选中控制台→输入：javascript:document.body.contentEditable='true';document.designMode='on'; void 0 第三步：点击enter即可完成，请随心所欲的修改你..
关于避免审查元素时，修改数据和提交数据，造成恶意审查修改的方法总结
bingcool
10-13 2万+
作为一名程序员或者用户，都知道在浏览器审查元素时，是可以修改数据的，如果修改数据，在提交就会造成不可预想的后果，特别是在数据安全的领域。一般查询数据都会返回记录的id,和一些关键的信息，虽然这些信息不是显然地在前端显示出来，但是一般会隐藏在input框或者一个data-的属性中，在修改，删除记录时，把id以get或者post的形式将数据传递给服务端，诺任意修改了id的值，就会恶意误删数据（可能是别
浏览器F12开发者工具高效使用教程
最新发布
默默测试！分享记录测试技术！
09-25 2万+
F12是浏览器自带的一个开发调试工具，因为可以用F12快捷键直接启动，所以简称为F12工具。特点:1.简单轻量级，是浏览器内置的开发者工具来提供捕获浏览器的数据报文的功能。2. F12作为浏览器的一部分，是数据收发的一端，抓取到的HTTPs报文是可以得到明文数据的......
F12开发人员工具如何使用、抓包、调试代码
热门推荐
骑猪游四方的博客
12-18 3万+
F12开发人员工具如何使用、抓包、调试代码 前言 提示：这里我给大家推荐360极速浏览器，这个版本的浏览器F12开发人员工具很强大，非常适合抓包和调试js代码，当然了其他的浏览器也是可以的，功能上基本都是一样的，差别不是很大。本篇文章适合0基础小白阅读。 提示：以下是本篇文章正文内容，下面案例可供参考 一、首先下载和安装浏览器 .下载安装完成后，打开浏览器，按快捷键F12或者FN+F12打开开发人员工具 打开后可以看到有很多的选项卡，虽然都是英文的但是不影响我们的操作，背过就好了，经常用到的是箭头标出
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
01-19
很多站长为了仿止别人仿制或扒下自己的网页，都会选择使用禁止浏览器右键查看元素或F12审查元素，一旦查看元素浏览器页面就会自动关闭，下面话不多说了，来一起看看详细的介绍吧。 注：该代码不兼容火狐浏览器，对于...
Jsoup 抓取页面的数据实例详解
08-31
在这个例子中，它连接到一个博客页面并查找具有 "postTitle" 类的元素，这些元素通常包含博客文章的标题。通过调用 `getElementsByAttributeValue("class","postTitle")`，我们可以找到所有此类元素。接着，对每个...
解决layer弹出层自适应页面大小的问题
10-16
在网页开发中，layer是一个常用的弹出层组件，它提供了丰富的功能和良好的用户体验。然而，在实际应用中，尤其是在处理不同屏幕尺寸的设备时，如何使layer弹出层自适应页面大小成为了一个常见的挑战。本文将深入探讨...
前端：页面安全问题，从前端角度使用js禁止用户修改页面代码
weixin_44146294的博客
12-16 1349
所周知，审查元素（F12或者右键检查）的情况下，大家都可以随机更改一部分页面的代码，注入恶意JS等等，这种情况避免也不难，虽然还能看到一部分H5源码，但是无法修改；所以我们可以通过一下三种方式解决问题：1、屏蔽F12 审查元素；2、屏蔽右键菜单来初步解决这些问题（也就是解决发现问题的人[偷笑]）；3、在页面引用公共脚本使其自动进行JS调试（debug）。
原生js监听dom节点属性变化
默默地博客
09-15 2711
// 选择需要观察变动的节点 const targetNode = document.getElementById('js-toc'); // 观察器的配置（需要观察什么变动） const config = { attributes: true, childList: true, subtree: true }; // 当观察到变动时执行的回调函数 const callback = function(mutationsList, observer) { // Use traditional 'for lo
网站禁用f12 禁止调试代码方法
点滴记忆
07-21 5051
正常情况下 自己的一些网站的一些代码不想被别人扒来扒去的，可以看看本方法。 可以设置复制提示,禁f12,禁止调试是很有必要的 当然这个防不了大佬，只能防防小学生 具体方法：1、首先我们需要下载web弹层组件layer2、解压上传到服务器，上js代码，修改成你的layer.js所在位置3、如果有幸等js未加载完之前按了f12，那也没关系，还可以禁止调试即使打开了开发者工具也会执行 debugger...
html f12 修改 提交表单,MP更新操作 用户新增表单
weixin_35645652的博客
06-07 891
MP 更新操作1.1 更新操作@SpringBootTestpublic class TestMP2 {@Autowiredprivate UserMapper userMapper;/**将ID=229的用户名称 改为六一儿童节*/@Testpublic void updateUser(){User user = new User();user.setId(229).setName(“六一儿童节...
使用chrome浏览器修改当前网页内容
Winfredzhang的博客
12-04 2万+
1、进入浏览器，打开需要修改的网页，按F12按钮。 2、点击图标。 3、修改内容。 4、关闭调试窗体。
防止html网页被f12抓取,HTML网站右键禁用F12代码 屏蔽审查元素 防止修改页面代码...
weixin_34315264的博客
05-30 685
//禁止右键function click(e) {if (document.all) {if (event.button==2||event.button==3) { alert("欢迎光临寒舍，有什么需要帮忙的话，请与站长联系！谢谢您的合作！！！");oncontextmenu='return false';}}if (document.layers) {if (e.which == 3) {o...
F12修改服务器数据,网页f12查看服务器
weixin_35793018的博客
08-12 2510
网页f12查看服务器 内容精选换一换本章节指导用户通过弹性云服务器和弹性公网IP接口，查询弹性云服务器关联的弹性公网IP详情。本示例场景涉及如下接口调用：查询弹性云服务器详情根据公网IP查询公网IP详情接口相关信息URI格式： GET /v1/{project_id}/cloudservers/{server_id}详情请参见“查询云服务器详情”。URI格式： GET /v如果您需要对您所拥有的H...
前端：屏蔽F12审查元素，禁止修改页面代码
qq_17355709的博客
07-21 1714
web端禁止用户审查元素、禁止剪切复制粘贴、禁止选中等操作
web页面展示部分内容，控制台元素选项中是空的
07-15
要在Web页面展示部分内容，并且隐藏控制台元素选项，可以采取以下措施： 1. 禁用右键点击：通过在页面上添加JavaScript代码，可以禁用右键点击，从而防止用户通过右键菜单查看页面源代码或检查元素。 ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值