第29天：安全开发-JS应用DOM树加密编码库断点调试逆向分析元素属性操作

embedded/2024/10/21 11:39:06/

第二十九天

在这里插入图片描述
在这里插入图片描述

一、JS技术-DOM树操作及安全隐患

1.DOM：文档操作对象

  • 获取HTML代码中函数的值，可以操作网页代码内容，实现自主或用户交互动作反馈

  • 安全问题：本身的前端代码通过DOM技术实现代码的更新修改，但是更新修改如果修改的数据可以由用户来指定，就会造成DOM-XSS攻击！

javascript"><h1 id="myHeader" onclick="update1()">这是标题</h1>
<script>
function update1(){const h1=document.querySelector('h1')**h1.innerHTML='<img src=# οnerrοr="alert(1)">'**console.log(str)}
</script>

2.获取对象

标签：直接写

Class：加上符号.

id：加上符号#

javascript"><!-- 这是标题 -->
<h1 id="myHeader" onclick="getValue()">这是标题</h1><!-- 选择第一个 h1 元素 -->
document.querySelector('h1')<!-- 选择所有具有 'id' 类的元素 -->
document.querySelector('.id')<!-- 选择具有 'myHeader' id 的元素 -->
document.querySelector('#myHeader')

3.获取对象属性

console.log() 是一个用于输出信息到控制台的方法，而 const 是一个关键字，用于声明只读的常量变量。它们在功能和用途上是完全不同的

javascript"><!-- HTML代码 -->
<h1 id="myHeader" onclick="getValue()">这是标题</h1><!-- JavaScript代码 -->
<script>// 选择第一个 h1 元素const h1 = document.querySelector('h1');**// 获取 h1 元素的 id 属性const id = h1.id;// 输出 id 到控制台console.log(id);**
</script>

3.操作元素数据

innerHTML 解析后续代码

javascript">var element = document.getElementById("myElement");
var htmlContent = element.innerHTML; // 获取元素的内容（包括 HTML 标记）
**element.innerHTML = "<b>New Content</b>"; // 设置元素的内容，并解析 HTML 标记**

innerText 不解析后续代码

javascript">var element = document.getElementById("myElement");
var textContent = element.innerText; // 获取元素的纯文本内容
**element.innerText = "New Text Content"; // 设置元素的纯文本内容**

4.操作元素属性

javascript"><img src="iphone.jpg" width="300" height="300"><br>
<script>function update(){**const s=document.querySelector('img')s.src='huawei.png'console.log(s.src)//如果这里huawei.png为一个变量由用户传递决定，那么就会造成DOM XSS**}
</script>

二、JS技术-加密编码及数据安全调试

  • 分析代码过程：发出疑问如果加密格式不显示出来，怎样判断加密的方式是什么
  • 可以借助检查的控制台，尝试输入获取加密后的密码值，再和提交表单的加密值进行比对，若一致则证明识别出。（一般安全防护比较强的，不会把运行的所以东西全加载到浏览器上）

三、环境复现

1.JS原生开发-DOM树-用户交互

javascript"><h1 id="myHeader" onclick="update1()">这是标题</h1>
<script>
function update1(){const h1=document.querySelector('h1')**h1.innerHTML='<img src=# οnerrοr="alert(1)">'**console.log(str)}
</script>

javascript"><!-- 这是标题 -->
<h1 id="myHeader" onclick="getValue()">这是标题</h1><!-- 选择第一个 h1 元素 -->
document.querySelector('h1')<!-- 选择所有具有 'id' 类的元素 -->
document.querySelector('.id')<!-- 选择具有 'myHeader' id 的元素 -->
document.querySelector('#myHeader')

javascript"><!-- HTML代码 -->
<h1 id="myHeader" onclick="getValue()">这是标题</h1><!-- JavaScript代码 -->
<script>// 选择第一个 h1 元素const h1 = document.querySelector('h1');**// 获取 h1 元素的 id 属性const id = h1.id;// 输出 id 到控制台console.log(id);**
</script>

2.JS导入库开发-编码加密-逆向调试

1.MD5
<!-- 引入 md5.js 脚本 -->
<script src="js/md5.js"></script><!-- JavaScript 代码 -->
<script>javascript">// 定义字符串变量var str1 = 'xiaodi jichu No1';// 使用 md5.js 中的 md5 函数对字符串进行加密var str_encode = md5(str1);// 输出加密后的字符串到控制台console.log(str_encode);
</script>
  • afe5119ec0ab46b55432fc5e24f1dc62
2.SHA1
<!-- 引入 crypto-js.js 脚本 -->
<script src="js/crypto-js.js"></script><!-- JavaScript 代码 -->
<script>javascript">// 定义字符串变量var str1 = 'xiaodisec';// 使用 CryptoJS.SHA1 函数对字符串进行 SHA-1 加密，并将结果转为字符串var str_encode = CryptoJS.SHA1(str1).toString();// 输出加密后的字符串到控制台console.log(str_encode);
</script>
1234567891011121314
  • ce22eaa1c5ebd3dfb3f4474b66f6d3612d4cb3ee
3.HMAC
<!-- 引入 crypto-js.js 脚本 -->
<script src="js/crypto-js.js"></script><!-- JavaScript 代码 -->
<script>javascript">// 定义密钥和字符串变量var key = 'key';var str1 = 'xiaodisec';// 使用 CryptoJS.HmacSHA256 函数生成 HMAC-SHA256 散列var hash = CryptoJS.HmacSHA256(key, str1);// 将散列结果转为十六进制字符串var str_encode = CryptoJS.enc.Hex.stringify(hash);// 输出加密后的字符串到控制台console.log(str_encode);// 输出示例：'11a7960cd583ee2c3f1ed910dbc3b6c3991207cbc527d122f69e84d13cc5ce5c'
</script>
12345678910111213141516171819
  • 08ac6dc8773bd34dcadeffb2b90a8b8f5be9453a9dce7cf09d4da2fcb363d9e7
4.AES
<script src="js/crypto-js.js"></script>
<script type="text/javascript">javascript">var aseKey = "12345678"     // 定制秘钥，长度必须为：8/16/32位, 长度不一致也没问题var message = "xiaodisec";  // 需要加密的内容// 加密 DES/AES切换只需要修改 CryptoJS.AES <=> CryptoJS.DESvar encrypt = CryptoJS.AES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey),  // 参数1=密钥, 参数2=加密内容{mode: CryptoJS.mode.ECB, // 为DES的工作方式padding: CryptoJS.pad.Pkcs7  // 当加密后密文长度达不到指定整数倍(8个字节、16个字节)则填充对应字符}).toString(); // toString=转字符串类型console.log(encrypt);var decrypt = CryptoJS.AES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aseKey), // 参数1=密钥, 参数2=解密内容{mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7}).toString(CryptoJS.enc.Utf8); // toString=转字符串类型,并指定编码console.log(decrypt); // "xiaodisec"
</script>
123456789101112131415161718192021
  • g4ohopaiYA34XXLsV92Udw== xiaodisec
5.DES
<script src="js/crypto-js.js"></script>
<script type="text/javascript">javascript">var aseKey = "12345678"     // 定制秘钥，长度必须为：8/16/32位， 长度不一致也没问题var message = "xiaodisec";  // 需要加密的内容// 加密 DES/AES切换只需要修改 CryptoJS.AES <=> CryptoJS.DESvar encrypt = CryptoJS.DES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey),  // 参数1=密钥, 参数2=加密内容{mode: CryptoJS.mode.ECB, // 为DES的工作方式padding: CryptoJS.pad.Pkcs7  // 当加密后密文长度达不到指定整数倍(8个字节、16个字节)则填充对应字符}).toString(); // toString=转字符串类型console.log(encrypt); // 控制台打印 CDVNwmEwDRM//解密var decrypt = CryptoJS.DES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aseKey), // 参数1=密钥, 参数2=解密内容{mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7}).toString(CryptoJS.enc.Utf8); // toString=转字符串类型,并指定编码console.log(decrypt); // 控制台打印 "i am xiaozhou ?"</script>
123456789101112131415161718192021222324
  • WVSwdlodMcV2n1FH72uXgw== xiaodisec
6.RSA
<script src="js/jsencrypt.js"></script>
<script type="text/javascript">javascript">// 公钥 私匙是通过公匙计算生成的，不能盲目设置var PUBLIC_KEY = '-----BEGIN PUBLIC KEY-----MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBALyBJ6kZ/VFJYTV3vOC07jqWIqgyvHulv6us/8wzlSBqQ2+eOTX7s5zKfXY40yZWDoCaIGk+tP/sc0D6dQzjaxECAwEAAQ==-----END PUBLIC KEY-----';//私钥var PRIVATE_KEY = '-----BEGIN PRIVATE KEY-----MIIBVQIBADANBgkqhkiG9w0BAQEFAASCAT8wggE7AgEAAkEAvIEnqRn9UUlhNXe84LTuOpYiqDK8e6W/q6z/zDOVIGpDb545NfuznMp9djjTJlYOgJogaT60/+xzQPp1DONrEQIDAQABAkEAu7DFsqQEDDnKJpiwYfUE9ySiIWNTNLJWZDN/Bu2dYIV4DO2A5aHZfMe48rga5BkoWq2LALlY3tqsOFTe3M6yoQIhAOSfSAU3H6jIOnlEiZabUrVGqiFLCb5Ut3Jz9NN+5p59AiEA0xQDMrxWBBJ9BYq6RRY4pXwa/MthX/8Hy+3GnvNw/yUCIG/3Ee578KVYakq5pih8KSVeVjO37C2qj60d3Ok3XPqBAiEAqGPvxTsAuBDz0kcBIPqASGzArumljkrLsoHHkakOfU0CIDuhxKQwHlXFDO79ppYAPcVO3bph672qGD84YUaHF+pQ-----END PRIVATE KEY-----';//使用公钥加密var encrypt = new JSEncrypt();//实例化加密对象encrypt.setPublicKey(PUBLIC_KEY);//设置公钥var message = 'xiaodisec' // 需要加密的数据var encrypted = encrypt.encrypt(message);//对指定数据进行加密console.log(encrypted)  // 'JQ83h8tmJpsSZcb4BJ3eQvuqIAs3ejepcUUnoFhQEvum8fA8bf1Y/fG+DO1bSIVNJF6EOZKe4wa0njv6aOar9w=='//使用私钥解密var decrypt = new JSEncrypt(); // 创建解密对象decrypt.setPrivateKey(PRIVATE_KEY); //设置私钥var uncrypted = decrypt.decrypt(encrypted); //解密 'xiaodisec'console.log(uncrypted);
</script>
123456789101112131415161718
  • Fw1H5KoC6zZnwAzLee8z5ubmQYSqaVqu711VI+NBavYT9bkWpzxUtZHmbSUvLbuCblPO96NdfoQHtPe9TURo6A== xiaodisec

http://www.ppmy.cn/embedded/27094.html

相关文章

C# WinForm —— 11 ListBox介绍

C# WinForm —— 11 ListBox介绍

1. 简介 列表框&#xff0c;可以从中选择一项或多项 2. 常用属性 属性解释(Name)控件ID&#xff0c;在代码里引用的时候会用到,一般以 lb开头BackColor背景颜色BoderStyle边框样式&#xff1a;无、FixedSingle、Fixed3DDataSource指示此控件将用来获取其项的列表&#xff0…
阅读更多...
vsftp虚拟用户和ssl加密配置 —— 筑梦之路

vsftp虚拟用户和ssl加密配置 —— 筑梦之路

为什么要用虚拟用户&#xff1f; 1.增强安全性&#xff1a;使用虚拟用户&#xff0c;可以避免直接使用系统账户进行 FTP 访问,通过使用虚拟用户&#xff0c;可以限制 FTP 用户的访问范围和权限&#xff0c;减少潜在的安全风险。 2.隔离用户和文件&#xff1a;虚拟用户可以被隔…
阅读更多...
一文解决ArcGIS生成点和管段 含案例讲解

一文解决ArcGIS生成点和管段 含案例讲解

背景 在工作中&#xff0c;我们经常遇到要将坐标数据导入 GIS&#xff0c;生成点位&#xff0c;若是地理坐标系&#xff08;经纬度&#xff09;&#xff0c;那么直接用 arcgis或者QGIS 导入数据就行了&#xff0c;可实际中总会遇到各种问题&#xff1a; 坐标数据集为大地 200…
阅读更多...
Object 的属性描述符

Object 的属性描述符

Object 的属性描述符 在 JavaScript 中， 对象（Object）可以看作是属性（property）的集合，属性是 key:value 的形式。key 可以是字符串也可以是 Symbol，value可以是任何类型（包括其它对象）。 对象的每个属性（property）都有对应的 attributes（标志），由于 attribute…
阅读更多...
ULTIMATE VOCAL REMOVER V5 for Mac：专业人声消除软件

ULTIMATE VOCAL REMOVER V5 for Mac：专业人声消除软件

ULTIMATE VOCAL REMOVER V5 for Mac是一款专为Mac用户设计的人声消除软件&#xff0c;它凭借强大的功能和卓越的性能&#xff0c;在音乐制作和后期处理领域崭露头角。 ULTIMATE VOCAL REMOVER V5 for Mac v5.6激活版下载 这款软件基于深度神经网络&#xff0c;通过先进的训练模…
阅读更多...
数据库（MySQL）—— DML语句

数据库（MySQL）—— DML语句

数据库&#xff08;MySQL&#xff09;—— DML语句 什么是DML语句添加数据给全部字段添加数据批量添加数据 修改数据删除数据 什么是DML语句 在MySQL中&#xff0c;DML&#xff08;Data Manipulation Language&#xff0c;数据操纵语言&#xff09;语句主要用于对数据库中的数…
阅读更多...
【个人博客搭建】（15）Redis缓存使用

【个人博客搭建】（15）Redis缓存使用

1、下载nuget包&#xff1a;StackExchange.Redis; 并引用 using StackExchange.Redis; 2、配置信息 /* Redis缓存配置 */"Redis": {"Enabled": true,"ConnectionString": "127.0.0.1:6379,password123456"} 3、配置模型 public cla…
阅读更多...
PHP算命源码_最新测算塔罗源码_可以运营

PHP算命源码_最新测算塔罗源码_可以运营

众筹商城源码 众筹商品平台 商城加共识元富之路 网上商城众筹 前端是编译后的&#xff0c;后端PHP&#xff0c;带商城 运行截图 源码贡献 https://githubs.xyz/boot?app39 部分数据库表 CREATE TABLE ti_shopro_store (id int(11) NOT NULL AUTO_INCREMENT COMMENT ID,nam…
阅读更多...
最新文章

Copyright @ 2022~2023