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

        最近,解决了一个网络视频学习的两个问题:过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.xdnf.cn/news/35141.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

18、IO流:

18、IO流&#xff1a; 这一章很枯燥无聊~ 文件&#xff1a; 什么是文件&#xff1a; 文件&#xff0c;对我们并不陌生&#xff0c;文件时保存数据的地方&#xff0c;比如我们经常使用的word文档&#xff0c;txt文档&#xff0c;excel文档…都是文件。它既可以保存一张图片&…

24.两两交换链表中的节点 python

两两交换链表中的节点 题目题目描述示例 1&#xff1a;示例 2&#xff1a;示例 3&#xff1a;提示&#xff1a;题目链接 题解解题思路python实现代码解读提交结果 题目 题目描述 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须…

解决 git 报错 “fatal: unable to access ‘https://github.com/.../.git‘: Recv failure Connection was rese

目录 前言 方法一&#xff1a;取消代理设置 方法二&#xff1a;设置系统代理&#xff08;推荐&#xff09; 方法三 方法四&#xff1a;不挂梯子时 前言 在使用 Git/Git小乌龟 进行代码管理的过程中&#xff0c;经常会遇到各种各样的问题&#xff0c;其中之一就是在执行 g…

推荐8款自动化软件测试必备工具

在现代软件测试开发领域&#xff0c;自动化测试工具的使用已经变得至关重要。 这些工具不仅提高了测试效率&#xff0c;还确保了软件质量和稳定性。 本文将向您介绍8款自动化软件测试必备工具&#xff0c;它们涵盖了各个层面的测试需求&#xff0c;从而助力测试团队更好地应对…

MySQL聚合函数查询

【图书推荐】《MySQL 9从入门到性能优化&#xff08;视频教学版&#xff09;》-CSDN博客 《MySQL 9从入门到性能优化&#xff08;视频教学版&#xff09;&#xff08;数据库技术丛书&#xff09;》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) MySQL9数据库技术_夏天又到了…

Vue3 完结

组合式API - setup选项 组合式API可理解为一系列函数&#xff0c;通常需要调用这些函数去编写将来的组件逻辑&#xff1b; 而setup为组合式API的入口&#xff08;只有先写了setup才能往里写组合式API的函数&#xff09; setup选项的写法及执行时机 执行时机在beforeCreate之前…

简洁的移动端登录注册界面

非常简洁的登录、注册界面模板&#xff0c;使用uni-app编写&#xff0c;直接复制粘贴即可&#xff0c;无任何引用&#xff0c;全部公开。 废话不多说&#xff0c;代码如下&#xff1a; login.vue文件 <template><view class"content"><view class&quo…

2024NIPS | 在目标引导下利用强化学习范式进行图像冲印调优

文章标题&#xff1a;Goal Conditioned Reinforcement Learning for Photo Finishing Tuning 原文链接&#xff1a;RLPixTuner 本文是上海AI Lab联合香港中文大学&#xff08;薛天帆等人&#xff09;发表在2024NIPS上的论文。 1. Abstract 图像冲印调优旨在自动化对图像冲印管…

【Spring】Cookie与Session

一、Cookie是什么&#xff1f; Cookie的存在主要是为了解决HTTP协议的无状态性问题&#xff0c;即协议本身无法记住用户之前的操作。 “状态” 的含义指的是: 默认情况下 HTTP 协议的客端和服务器之间的这次通信&#xff0c;和下次通信之间没有直接的联系 但是实际开发中&…

【最新】linux安装docker并配置加速源

我这边之前本地创建了个虚拟机&#xff0c;linux系统的&#xff0c;用于部署服务器。有时安装一些常用工具或者中间件&#xff0c;还是用docker安装方便&#xff0c;而且docker还有编排服务等功能&#xff0c;实际使用中还是会省不少事的&#xff0c;这里记录下安装docker的过程…

SpringBoot动态配置Nacos

重要知识点 Nacos属性的简单使用将SpringBoot中的所有配置全部放入到Nacos中开发人创建单独的命名空间,修改互不影响Nacos经常变动的配置抽离到外部文件中 将项目中的所有配置全部放到到 1. 首先引入包 <!-- nacos 接入--><!-- https://mvnrepository.com/artifact…

【每天一篇深度学习论文】轻量化自适应提取模块LAE

目录 论文介绍题目&#xff1a;论文地址&#xff1a; 创新点方法模型总体架构核心模块描述1. 轻量级自适应提取&#xff08;LAE&#xff09;模块&#xff1a;2. 多路径旁路特征匹配&#xff08;MSFM&#xff09;模块&#xff1a;3. RFABlock&#xff08;感受野注意力卷积&#…

Linux中文件操作

文件由文件内容和文件属性构成&#xff0c;因此对文件的操作就是对文件内容或文件属性的操作。所谓的“打开一个文件”就是将文件的属性或内容加载到内存中&#xff0c;而没有被打开的文件存在于磁盘上。打开的文件称作“内存文件”&#xff0c;未被打开的文件称作“磁盘文件”…

hhdb数据库介绍(10-42)

安全 SQL防火墙 管理平台提供的SQL防火墙功能可为用户拦截高危SQL、误操作SQL等&#xff0c;提升系统安全性。 同时防火墙提供观测功能&#xff0c;可在开启新规则前&#xff0c;通过开启观测状态&#xff0c;判断新规则对业务的影响程度。开启观测状态后&#xff0c;计算节…

白嫖VMware ESXi 8.0 U3新功能Live Patch、无需重启零中断修复漏洞

哈喽大家好&#xff0c;欢迎来到虚拟化时代君&#xff08;XNHCYL&#xff09;&#xff0c;收不到通知请将我点击星标&#xff01;“ 大家好&#xff0c;我是虚拟化时代君&#xff0c;一位潜心于互联网的技术宅男。这里每天为你分享各种你感兴趣的技术、教程、软件、资源、福利…

JavaSE学习心得(API与算法篇)

常用API和常见算法 前言 常用API Math System Runtime Object ​编辑浅克隆 深克隆 Objects Biginteger 构造方法 成员方法 底层存储方式 Bigdecimal 构造方法 Bigdecimal的使用 底层存储方式 ​编辑正则表达式 两个判断练习 两个爬取练习 贪婪爬取和非贪…

如何开发高效的企业内训APP?教育培训系统源码搭建实战详解

本篇文章&#xff0c;小编将从教育培训系统的源码搭建、功能设计以及技术实现等方面&#xff0c;详细探讨如何开发一款高效的企业内训APP。 一、企业内训APP的需求分析 在开发企业内训APP之前&#xff0c;首先需要明确其基本需求。一个高效的企业内训APP应该具备以下几个核心…

解释器模式的理解和实践

引言 解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为型设计模式&#xff0c;它在软件工程中用得相对较少&#xff0c;但在某些特定场景下非常有用。解释器模式提供了一种解释语言的语法或表达式的方式&#xff0c;它定义了一个表达式接口&#xff0c;并通过…

Z029 PHP+MYSQL+LW+饭店预订管理系统的设计与实现 源代码 配置 文档

饭店预订管理系统 1.项目描述2. 开发背景与意义3.项目功能结构4.界面展示5.源码获取 1.项目描述 近几年来&#xff0c;我国计算机信息技术发展迅速&#xff0c;各种各样的信息管理系统层出不穷。互联网电子商务的热潮&#xff0c;改变了人们生活习惯&#xff0c;而作为城市经济…

【力扣热题100】—— Day5.回文链表

正视自己的懦弱和无能&#xff0c;克服自己的嫉妒与不甘 —— 24.12.3 234. 回文链表 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为 回文链表 。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a…