防止浏览器控制台修改网页数据与函数的方法

        最近,解决了一个网络视频学习的两个问题:过10分钟就暂停并显示提示窗口、不能自动跳到下个章节,思路是:在控制台上运行一段编写的脚本代码,重定义该网页上一个函数(解决人工确认问题);加挂链接click事件获取打开网页的window对象,然后定时播放未完成的章节(解决连续播放问题)。在此同时,发现该网站前端网页的数据与函数(脚本代码)等缺乏基本保护措施,能够被轻松地在浏览器控制台上重定义或修改。(呵呵,自己做的若干网站系统同样存在这类问题。)

        网页数据和函数总是某个对象的属性或方法(const声明的全局变量也是某个全局对象的属性,只是不能访问该全局对象),ECMA-262给出的Object.defineProperty()函数可以定义数据或函数可配置、枚举和修改的一组属性,从而有效解决浏览器控制台修改数据和重定义函数两个问题。

        一、使用const申明函数

        ES6新增的块级申明const可以有效解决全局(指<script></script>)或某个对象中的函数成员被重定义的问题,代码举例如:const show = function(){...}。如果在控制台重定义全局或某个对象的show函数将报错误。

        该方法存在一个较大问题是,全局申明的函数不能做到跨框架(frames)调用,因为它不是window的函数,而是某个未公开的全局对象的函数。当然,可以将该方法赋值给window,如window.show = show,然后再调用。但此时的window.show还是面临控制台重定义的问题。

        二、设定数据或函数的configurable、enumerable和writable属性

        window或某个对象的数据或函数,可以使用Object.defineProperty()函数设定其内置boolean属性configurable、enumerable和writable为true/false(其中,enumerable为true,可枚举到当前属性),从而有效保护数据或函数被修改或重定义。代码举例如下:

var show = function(){console.log('show.')};
show();  // 显示 show.
Object.defineProperty(window, 'show', {configurable: false, enumerable: true, writable: false});
show = function(){console.log('show...');};
show(); // 仍然显示 show.上述重定义无效,虽然未报异常。

        全局数据、某个对象的数据或函数均可类似处理。

        关于Object.defineProperty()及相关函数可以看参看红宝书《Javascript高级程序设计》(第4版),下面给出一段直接定义的、不可重定义的函数代码:

Object.defineProperty(window, 'show', {enumerable: true, configurable: false, writable: false, value: function(){console.log('show.');
}});show();  // 显示 show.
show = function(){console.log('show...');};
show();  // 仍然显示 show.,重定义函数无效。Object.defineProperty(window, 'show', {writable: true});  // 再次修改为可改写的将报异常,因为configurable为false。

        上述代码中,value可以是一个数据值,也可以是function。 注意,configurable要设置成false,此时不能再次修改configurable等属性值,而writable如果初次设置成true,则还可以修改为false,再改将报异常。

        三、保护网页元素<input>的value值 

        网页元素<input>常用于保存一些脚本代码可以读写的值,如:<input id="hNo" type="hidden", value="1" />。显然,该值可以在浏览器控制台上编程修改,保护方法为:读取值到window中,然后remove该元素(非必须)。代码举例如:

var  v = document.getElementById('hNo');
var hNo = v.value;
Object.defineProperty(window, 'hNo', {configurable: false, enumerable: true, writable: false});  // 设置值修改无效
v.remove();  // 在DOM中删除该元素

         结语:前端网页需要保护的,除脚本函数和数据之外还有很多,比如BOM和DOM模型中对象的属性和方法(常见如XMLHttpRequest的属性和方法),笔者将在后续文章中继续探讨该类问题。

        后记:Object.freeze()方法可以冻结一个类型或对象中的全部属性和方法,使得该类型的属性和方法不可再修改或删除等,效果类似本文前述的操作。如果需要保护整个类型或对象的数据和方法,使用freeze()即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/63212.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Wordpress设置固定链接形式后出现404错误

比如固定连接设置为 /archives/%post_id%.html 这种形式&#xff0c;看起来比较舒服。对搜索引擎也友好。 出现404需要设置伪静态

小程序项目的基本组成结构

分类介绍 项目根目录下的文件及文件夹 pages文件夹 用来存放所有小程序的页面&#xff0c;其中每个页面都由4个基本文件组成&#xff0c;它们分别是&#xff1a; .js文件&#xff1a;页面的脚本文件&#xff0c;用于存放页面的数据、事件处理函数等 .json文件&#xff1a;…

什么是Bug,bug怎么提交

1 bug的定义与起源 Bug在计算机科学中通常指的是程序或系统中的错误或缺陷&#xff0c;导致其无法按预期执行。这种错误可能源于代码中的逻辑错误、输入输出的意外处理、资源分配不当等问题。Bug的产生与多方面因素有关&#xff0c;包括程序员未能正确实现软件的特定规格或设定…

Agent AI: Surveying the Horizons of Multimodal Interaction---摘要、引言、代理 AI 集成

题目 智能体AI:多模态交互视野的考察 论文地址&#xff1a;https://arxiv.org/abs/2401.03568 图1&#xff1a;可以在不同领域和应用程序中感知和行动的Agent AI系统概述。Agent AI是正在成为通用人工智能&#xff08;AGI&#xff09;的一个有前途的途径。Agent AI培训已经证…

前端开发入门指南Day 17:TypeScript高级类型(泛型,类型守卫,Partial<T>和 Required<T>等)

泛型&#xff1a;代码的"变色龙" &#x1f98e; 为什么需要泛型&#xff1f; 想象一个快递员&#xff0c;每天要处理不同类型的包裹。如果为每种类型的包裹都写一套处理程序&#xff0c;那会很麻烦。泛型就像是一个"通用的包裹处理系统"&#xff0c;它能…

LRU Cache替换算法

目录 1.什么是LRU Cache&#xff1f; 2.LRU Cache 的底层结构 3.LRU Cache的实现 LRUCache类中的接口总览 构造函数 get操作 put操作 打印 4.LRU Cache的测试 5.LRU Cache相关OJ题 6.LRU Cache类代码附录 1.什么是LRU Cache&#xff1f; 首先我想解释一下什么是cach…

小米二面:JVM 触发类加载的条件有哪些?

类加载生命周期 类加载的生命周期包括&#xff1a;加载&#xff08;Loading&#xff09;、链接&#xff08;Linking&#xff09; 和 初始化&#xff08;Initialization&#xff09;。而其中&#xff0c;初始化阶段是决定类是否被真正加载的关键。 JVM 在什么时候启动类加载过…

数字孪生与大型模型强强联合,共塑工业制造崭新前景

随着新一代信息技术与实体经济的加速融合&#xff0c;工业领域的数字化、智能化转型趋势愈发显著&#xff0c;孕育出一系列制造业数字化转型的新模式与新业态。在此背景下&#xff0c;数字孪生技术作为关键支撑力量&#xff0c;正在全球范围内迅速崛起并得到广泛应用&#xff0…

【笔记2-5】ESP32:freertos消息队列

主要参考b站宸芯IOT老师的视频&#xff0c;记录自己的笔记&#xff0c;老师讲的主要是linux环境&#xff0c;但配置过程实在太多问题&#xff0c;就直接用windows环境了&#xff0c;老师也有讲一些windows的操作&#xff0c;只要代码会写&#xff0c;操作都还好&#xff0c;开发…

Qt Chart 模块化封装曲线图

一 版本说明 二 完成示例 此文章包含:曲线轴设置,曲线切换,单条曲线显示,坐标轴。。。 三 曲线图UI创建 在UI界面拖放一个QWidget,然后在 Widget里面放一个 graphicsView 四 代码介绍 1 头文件 #include <QString> #include <QTimer> #include <QMessa…

a7678 食品添加剂健康小助手系统微信小程序的的设计与实现 后台php+mysql+layui+thinkphp 源码 配置 文档 全套资料

食品添加剂健康小助手 1.摘要2.开发目的和意义3.系统功能设计4.系统界面截图5.源码获取 1.摘要 食品添加剂健康小助手系统是一个能够帮助消费者更好地了解食品添加剂相关信息的智能系统。在现代食品生产过程中&#xff0c;许多食品添加剂被广泛使用&#xff0c;以提高食品的质…

HTTP(超文本传输协议)

HTTP是万维网通信的基础构成&#xff0c;是一个简单的请求相应协议&#xff0c;基于TCP之上80号端口 通信原理 DNS解析 将域名甩个DNS服务器解析&#xff0c;将域名化为IP访问 建立TCP连接 如图&#xff0c;客户端先发送一个sys置位seq为x&#xff08;任意值&#xff09;的…

如何设置合理的爬取频率避免被网站封锁?

要合理设置爬取频率以避免被网站封锁&#xff0c;可以采取以下几种策略&#xff1a; 遵守robots.txt规范&#xff1a;确保爬虫程序遵守目标网站的robots.txt文件中定义的爬取规则&#xff0c;避免爬取被网站禁止的内容。 设置请求头信息&#xff1a;在爬取时&#xff0c;设置合…

LeetCode Hot100 51~60

图论51. 岛屿问题52. 腐烂的橘子53. 课程表54. 前缀树55. 全排列56. 子集57. 电话号码58. 组合总和59. 括号生成60. 单词搜索 图论 51. 岛屿问题 经典洪水问题算法 class Solution { public:int numIslands(vector<vector<char>>& grid) {int nr grid.size…

SpringBoot的validation参数校验

文章目录 前言一、引入validation 依赖二、validation中的注解说明 &#xff08;1&#xff09;Validated&#xff08;2&#xff09;Valid&#xff08;3&#xff09;NotNull&#xff08;4&#xff09;NotBlank&#xff08;5&#xff09;NotEmpty&#xff08;6&#xff09;Patte…

SSH克隆github项目

1、生成密钥 ssh-keygen -t rsa -C "你的邮箱xxx.com" 全程回车即可&#xff08;不用输入ras文件名及密码&#xff09;、为了方便下面的公钥查看 2、配置公钥 查看公钥内容 cat c:\Users\xxx\.ssh\id_rsa.pub(修改为自己的路径及名字) 将公钥内容复制并粘贴至…

CASAIM与中国航天携手合作,CASAIM IS全自动化光学测量系统交付中国航天山西工厂,助力航空航天零部件全自动化3D测量

近日&#xff0c;CASAIM与中国航天达成全自动化光学测量技术合作&#xff0c;并将CASAIM IS全自动化光学测量系统交付给中国航天科技集团山西工厂&#xff0c;这一合作标志着双方在智能制造和精密测量领域迈出了重要一步。 中国航天科技&#xff0c;是在中国战略高技术领域拥有…

基于Springboot+Vue的电子博物馆系统

基于SpringbootVue的电子博物馆系统 前言&#xff1a;随着信息技术的不断发展&#xff0c;传统博物馆的参观方式逐渐向数字化、在线化转型。电子博物馆作为这一转型的重要组成部分&#xff0c;能够通过信息化手段为用户提供更丰富、更便捷的博物馆参观体验。本文基于Spring Boo…

【软考速通笔记】系统架构设计师⑭——面向服务架构设计理论与实践

文章目录 一、前言二、基础知识2.1 介绍2.2 作用 三、参考架构四、主要协议五、设计原则六、设计模式6.1 服务注册模式6.2 企业服务总线模式6.3 微服务模式6.4 微服务架构模式方案 七、注意事项 一、前言 笔记目录大纲请查阅&#xff1a;【软考速通笔记】系统架构设计师——导读…

K8S的资源配置

资源配额 当多个用户或团队共享具有固定节点数目的集群时&#xff0c;人们会担心有人使用超过其基于公平原则所分配到的资源量。资源配额是帮助管理员解决这一问题的工具。资源配额&#xff0c;通过 ResourceQuota 对象来定义&#xff0c;对每个命名空间的资源消耗总量提供限制…