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

目录#

知识点
JS原生开发-DOM树-用户交互
JS导入库开发-编码加密-逆向调试
- Base64
- MD5
- SHA1
- HMAC
- AES
- DES
- RSA
- 逆向调试
- 断点调试
相关参考链接

Untitled

知识点#

JS技术-DOM树操作及安全隐患
JS技术-加密编码及数据安全调试

演示案例：

JS原生开发-DOM树-用户交互
JS导入库开发-编码加密-逆向调试
两则案例分析-解析安全&登录调试

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

DOM（文档对象模型）是浏览器提供的一套专门用来操作网页代码内容的功能，可实现自主或用户交互动作反馈。

在Web开发中，浏览器将HTML文档解析为DOM树结构。DOM树由节点（Nodes）组成，节点可以是元素节点、文本节点、注释节点等。每个节点都有与之相关联的属性、方法和事件。通过DOM，可使用JavaScript等支持DOM的编程语言访问和操作HTML文档的内容、结构和样式，如选择元素、修改元素属性和内容、添加或删除元素及响应用户交互等。

1、获取对象#

标签：直接写标签名
Class：加上符号 .
id：加上符号 #

document 是代表整个文档的对象，querySelector() 是在文档中查找与指定选择器匹配的第一个元素的方法。

1
<!-- 简单举例 -->
2

3
<!-- 这是标题 -->
4
<h1 id="myHeader">这是标题</h1>
5

6
<!-- 选择第一个 h1 元素 -->
7
document.querySelector('h1')
8

9
<!-- 选择所有具有 'id' 类的元素 -->
10
document.querySelector('.id')
11

12
<!-- 选择具有 'myHeader' id 的元素 -->
13
document.querySelector('#myHeader')

2、获取对象属性#

console.log()：浏览器或JavaScript运行环境提供的调试工具，用于在控制台输出信息（如消息、变量值、调试信息等），方便开发过程中的调试和测试。

1
// 示例
2
console.log("Hello, world!");
3
// 这行代码将在控制台输出字符串 "Hello, world!"

const：JavaScript中的关键字，用于声明只读的常量变量。使用const声明的变量一旦被赋值，其值就不能再被重新修改。

1
// 示例
2
const PI = 3.14159;
3
// 声明了常量 PI，值为 3.14159，后续无法修改

总结：console.log() 是输出信息到控制台的方法，const 是声明只读常量的关键字，二者功能和用途不同。

1
<!-- HTML代码 -->
2
<h1 id="myHeader" onclick="getValue()">这是标题</h1>
3

4
<!-- JavaScript代码 -->
5
<script>
6
  // 选择第一个 h1 元素
7
  const h1 = document.querySelector('h1');
8

9
  // 获取 h1 元素的 id 属性
10
  const id = h1.id;
11

12
  // 输出 id 到控制台
13
  console.log(id);
14
</script>

实现案例：

1
<img src="iphone.jpg" width="300" height="300"><br>
2
<button onclick="update()">刷新</button>
3

4
<script>
5
    function update(){
6
    const s=document.querySelector('img')
7
    console.log(s.src);
8
    }
9
</script>

3、操作元素数据#

innerHTML：会解析后续代码

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

innerText：不解析后续代码

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

实现案例：innerHTML（点击标题后改变文字并解析<hr>横线）

1
<h1 id="myHeader" onclick="update1()">这是标题</h1>
2
<script>
3
    function update1(){
4
        const h1=document.querySelector('h1')
5
        h1.innerHTML="这是小迪<Hr>"
6
        console.log(str)
7
    }
8
</script>

实现案例：innerText

1
<h1 id="myHeader" onclick="update1()">这是标题</h1>
2
<script>
3
    function update1(){
4
        const h1=document.querySelector('h1')
5
        h1.innerText="这是小迪<Hr>"
6
        console.log(str)
7
    }
8
</script>

4、操作元素属性#

可实现强制转换图片，示例如下：

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

安全问题#

前端代码通过DOM技术实现代码的更新修改时，若修改的数据可由用户指定，就可能造成DOM-XSS攻击！

update1 函数通过 innerHTML 插入带有 onerror 事件的 img 元素，可能导致XSS（跨站脚本攻击）漏洞。实际应用中需谨慎处理用户提供的内容，防止安全漏洞。

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

有道翻译案例（现已无法复现）：曾可利用带外DNS造成数据库IP泄露。左侧输入框有实体化保护，但鼠标移动到右侧时触发某事件导致左侧内容变为图片，且左到右有过滤，右到左无过滤。

Untitled

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

Base64#

Base64是一种基于64个可打印字符来表示二进制数据的编码方式，常用于在URL、Cookie、网页中传输少量二进制数据。在JavaScript中可通过原生atob()和btoa()方法或引入库实现编码解码（示例略，可参考MDN文档）。

MD5#

1
<!-- 引入 md5.js 脚本 -->
2
<script src="js/md5.js"></script>
3

4
<!-- JavaScript 代码 -->
5
<script>
6
    // 定义字符串变量
7
    var str1 = 'xiaodi jichu No1';
8

9
    // 使用 md5.js 中的 md5 函数对字符串进行加密
10
    var str_encode = md5(str1);
11

12
    // 输出加密后的字符串到控制台
13
    console.log(str_encode);
14
</script>

输出：afe5119ec0ab46b55432fc5e24f1dc62

SHA1#

1
<!-- 引入 crypto-js.js 脚本 -->
2
<script src="js/crypto-js.js"></script>
3

4
<!-- JavaScript 代码 -->
5
<script>
6
    // 定义字符串变量
7
    var str1 = 'xiaodisec';
8

9
    // 使用 CryptoJS.SHA1 函数对字符串进行 SHA-1 加密，并将结果转为字符串
10
    var str_encode = CryptoJS.SHA1(str1).toString();
11

12
    // 输出加密后的字符串到控制台
13
    console.log(str_encode);
14
</script>

输出：ce22eaa1c5ebd3dfb3f4474b66f6d3612d4cb3e

HMAC#

1
<!-- 引入 crypto-js.js 脚本 -->
2
<script src="js/crypto-js.js"></script>
3

4
<!-- JavaScript 代码 -->
5
<script>
6
    // 定义密钥和字符串变量
7
    var key = 'key';
8
    var str1 = 'xiaodisec';
9

10
    // 使用 CryptoJS.HmacSHA256 函数生成 HMAC-SHA256 散列
11
    var hash = CryptoJS.HmacSHA256(key, str1);
12

13
    // 将散列结果转为十六进制字符串
14
    var str_encode = CryptoJS.enc.Hex.stringify(hash);
15

16
    // 输出加密后的字符串到控制台
17
    console.log(str_encode);
18
    // 输出示例：'11a7960cd583ee2c3f1ed910dbc3b6c3991207cbc527d122f69e84d13cc5ce5c'
19
</script>

输出：08ac6dc8773bd34dcadeffb2b90a8b8f5be9453a9dce7cf09d4da2fcb363d9e7

AES#

1
<script src="js/crypto-js.js"></script>
2
<script type="text/javascript">
3
    var aseKey = "12345678"     // 定制秘钥，长度通常为8/16/32位
4
    var message = "xiaodisec";  // 需要加密的内容
5
    // 加密（DES/AES切换只需修改 CryptoJS.AES 为 CryptoJS.DES）
6
    var encrypt = CryptoJS.AES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey),  // 参数1=密钥, 参数2=加密内容
7
        {
8
            mode: CryptoJS.mode.ECB, // 工作模式
9
            padding: CryptoJS.pad.Pkcs7  // 填充方式（当密文长度不足指定整数倍时填充）
10
        }
11
    ).toString(); // 转字符串类型
12

13
    console.log(encrypt);
14
    var decrypt = CryptoJS.AES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aseKey), // 参数1=密钥, 参数2=解密内容
15
        {
16
            mode: CryptoJS.mode.ECB,
17
            padding: CryptoJS.pad.Pkcs7
18
        }
19
    ).toString(CryptoJS.enc.Utf8); // 转字符串类型并指定编码
20
    console.log(decrypt); // "xiaodisec"
21
</script>

输出：g4ohopaiYA34XXLsV92Udw== xiaodisec

DES#

1
<script src="js/crypto-js.js"></script>
2
<script type="text/javascript">
3
    var aseKey = "12345678"     // 定制秘钥，长度通常为8/16/32位
4
    var message = "xiaodisec";  // 需要加密的内容
5
    // 加密（DES/AES切换只需修改 CryptoJS.AES 为 CryptoJS.DES）
6
    var encrypt = CryptoJS.DES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey),  // 参数1=密钥, 参数2=加密内容
7
        {
8
            mode: CryptoJS.mode.ECB, // 工作模式
9
            padding: CryptoJS.pad.Pkcs7  // 填充方式
10
        }
11
    ).toString(); // 转字符串类型
12

13
    console.log(encrypt); // 控制台打印 WVSwdlodMcV2n1FH72uXgw==
14

15
    //解密
16
    var decrypt = CryptoJS.DES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aseKey), // 参数1=密钥, 参数2=解密内容
17
        {
18
            mode: CryptoJS.mode.ECB,
19
            padding: CryptoJS.pad.Pkcs7
20
        }
21
    ).toString(CryptoJS.enc.Utf8); // 转字符串类型并指定编码
22
    console.log(decrypt); // 控制台打印 "xiaodisec"
23

24
</script>

输出：WVSwdlodMcV2n1FH72uXgw== xiaodisec

RSA#

1
<script src="js/jsencrypt.js"></script>
2
<script type="text/javascript">
3
    // 公钥（私钥由公钥计算生成，不可随意设置）
4
    var PUBLIC_KEY = '-----BEGIN PUBLIC KEY-----MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBALyBJ6kZ/VFJYTV3vOC07jqWIqgyvHulv6us/8wzlSBqQ2+eOTX7s5zKfXY40yZWDoCaIGk+tP/sc0D6dQzjaxECAwEAAQ==-----END PUBLIC KEY-----';
5
    // 私钥
6
    var PRIVATE_KEY = '-----BEGIN PRIVATE KEY-----MIIBVQIBADANBgkqhkiG9w0BAQEFAASCAT8wggE7AgEAAkEAvIEnqRn9UUlhNXe84LTuOpYiqDK8e6W/q6z/zDOVIGpDb545NfuznMp9djjTJlYOgJogaT60/+xzQPp1DONrEQIDAQABAkEAu7DFsqQEDDnKJpiwYfUE9ySiIWNTNLJWZDN/Bu2dYIV4DO2A5aHZfMe48rga5BkoWq2LALlY3tqsOFTe3M6yoQIhAOSfSAU3H6jIOnlEiZabUrVGqiFLCb5Ut3Jz9NN+5p59AiEA0xQDMrxWBBJ9BYq6RRY4pXwa/MthX/8Hy+3GnvNw/yUCIG/3Ee578KVYakq5pih8KSVeVjO37C2qj60d3Ok3XPqBAiEAqGPvxTsAuBDz0kcBIPqASGzArumljkrLsoHHkakOfU0CIDuhxKQwHlXFDO79ppYAPcVO3bph672qGD84YUaHF+pQ-----END PRIVATE KEY-----';
7
    // 使用公钥加密
8
    var encrypt = new JSEncrypt();// 实例化加密对象
9
    encrypt.setPublicKey(PUBLIC_KEY);// 设置公钥
10
    var message = 'xiaodisec' // 需要加密的数据
11
    var encrypted = encrypt.encrypt(message);// 对指定数据进行加密
12
    console.log(encrypted)  // 'JQ83h8tmJpsSZcb4BJ3eQvuqIAs3ejepcUUnoFhQEvum8fA8bf1Y/fG+DO1bSIVNJF6EOZKe4wa0njv6aOar9w=='
13
    // 使用私钥解密
14
    var decrypt = new JSEncrypt(); // 创建解密对象
15
    decrypt.setPrivateKey(PRIVATE_KEY); // 设置私钥
16
    var uncrypted = decrypt.decrypt(encrypted); // 解密 'xiaodisec'
17
    console.log(uncrypted);
18
</script>

输出：Fw1H5KoC6zZnwAzLee8z5ubmQYSqaVqu711VI+NBavYT9bkWpzxUtZHmbSUvLbuCblPO96NdfoQHtPe9TURo6A== xiaodisec

逆向调试#

浏览器控制台比对：若加密格式未显示，如何判断密码加密方式？

以小迪渗透吧登录页（小迪渗透吧-登录）为例：

打开页面，右键密码框选择“检查”，找到相关id值edtPassWord，搜索$("#btnPost").click(function()（#表示取id值）。
找到密码加密方式：$("#password").val(MD5(strPassWord));，确定为MD5加密。
传递数据时，提交的表单中密码确实为加密值（如btnPost=%E7%99%BB%E5%BD%95&username=admin&password=e10adc3949ba59abbe56e057f20f883e&savedate=1）。

Untitled

分析过程：若加密格式未明文显示，可在控制台输入代码获取加密后的值，与表单提交的加密值比对，一致则可识别加密方式（注：安全防护较强的系统可能不会加载所有运行内容到浏览器）。

1
MD5('xiaodi')
2
// 输出 'bb1be44c4f8e615aeba54e9d233c23b6'

Untitled

断点调试#

安全防护较强的系统不会将所有运行内容加载到浏览器，需通过断点调试获取执行文件并修改返回密文。

以申通快递会员中心登录页（申通快递会员中心-登录）为例：

打开页面，右键密码框选择“检查”，找到相关id值numPassword并搜索。
未发现明文加密格式，在控制台输入encodeURI(encrypt.encrypt(numPassword))报错encrypt is not defined（部分文件仅在服务器本地执行，不加载到浏览器）。

在对应位置打断点，点击登录进入调试，再次在控制台输入encodeURI(encrypt.encrypt(numPassword))，成功回显加密后的密码。
可将其修改为SQL注入payload语句，返回加密内容后发送。

admin' OR 1=1 -- '的含义
在MySQL中，'admin'是字符串常量，OR是逻辑或运算符，1=1是恒真条件，-- 是注释符（使后续内容不被解析）。该语句可绕过条件验证，例如：

原SQL语句：

1
SELECT * FROM users WHERE username = 'admin' OR 1=1 -- ' AND password = '123456'

由于'admin' OR 1=1 -- '恒为真，实际会返回所有记录，而非仅admin账户。

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

目录#

知识点#

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

1、获取对象#

2、获取对象属性#

3、操作元素数据#

4、操作元素属性#

安全问题#

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

Base64#

MD5#

SHA1#

HMAC#

AES#

DES#

RSA#

逆向调试#

断点调试#

相关参考链接#