九亭做网站公司郑州营销型网站建设
案例1：dom树
一、什么是DOM？
DOM 概述 - Web API | MDN
DOM运行机制：顾客（JS）去餐厅（浏览器）用餐，餐厅提供各类的餐食（api），顾客想要吃什么，就找服务员（Dom）点餐，服务员去后厨（浏览器引擎）端菜上菜。
关键点：顾客必须通过服务员上菜，自己不能去后厨（js必须通过dom进行交互操作）
总结：JavaScript 是顾客，DOM 是服务员，浏览器是餐厅，API 是菜品——想吃菜（操作网页），必须通过服务员（DOM），而厨房（浏览器引擎）对顾客不可见。
二、 DOM操作
我们先创建一个img标签，导入iPhone.png，然后给标签一些属性，id & class & width & height
再给一个按钮，负责刷新。
<img src=iphone.jpg id="iphone" class="pic" width="300" height="300">
<button οnclick="update()">刷新</button>
然后在定义一个function功能名为update，根据返回类型的不同分为获取对象和获取
1、获取对象
<!-- 查找对象 类比mysql条件查询 -->
<h1 id="myHeader" class="title" οnclick="getValue()">这是标题</h1>
document.querySelector('h1')
document.querySelector('.title')
document.querySelector('#myHeader')
<img src=iphone.jpg id="iphone" class="pic" width="300" height="300">
<button οnclick="update()">刷新</button>
<script>
function update(){
const img = document.querySelector('img')
const width = document.querySelector('.pic')
const src = document.querySelector('#iphone')
console.log(src);
}
</script>
2、获取对象属性
js如何获取dom元素属性值 | PingCode智库
<button οnclick="update1()">刷新</button>
<h1 id="myHeader" class="title" οnclick="getValue()">这是标题</h1>
<script>
function update1(){
const h1 = document.querySelector('h1')
const id= h1.id
console.log(id);
}
</script>
3、标签内部内容（针对可视化文本） 及 dom-xss的触发
2种方法主要是代码执行能力上的差别
innerHTML：可以执行代码，可能存在xss-dom漏洞。
innerTEXT：将代码直接转为字符串，更安全。
1）innerHTML ---不安全
首先，将内部内容利用innerHTML提取
然后我们将内部内容替换为img标签，触发一个onerror进行弹窗
document.getElementById('myHeader').innerHTML = '<img src=x οnerrοr=alert("XSS")>';
2）innerTEXT --安全
document.getElementById('myHeader').innerTEXT = '<img src=x οnerrοr=alert("XSS")>';
按照刚刚上面innerHTML，进行img内部内容替换
三、DOM引发的安全问题
payload：><img src=x οnerrοr="alert('XSS攻击成功！')">
1、成因/原理
攻击者通过客户端途径（如 URL 参数、用户输入）将恶意代码注入到 DOM 中，浏览器在解析渲染 DOM 时将其当作合法代码执行。这种攻击完全依赖客户端处理，恶意代码无需经过服务器端存储或反射
2、易出现xss-dom的位置
测试 URL 参数（最常出现！）、 测试表单输入（搜索框、评论框等）
✅ 输入点：URL、表单、API、存储、WebSocket
✅ 触发方式：innerHTML、eval、location、动态脚本
✅ Payload 技巧：
-
用
<img onerror=alert(1)>测试 HTML 解析 -
用
javascript:alert(1)测试 URL 跳转 -
用
" onclick=alert(1) x="测试属性注入
--------------------------------------------
案例2：JS简单调试 （逆向）
一、js实现数据加密
利用第三方库实现
开启调试，查看调试控制台，分别对应四种不同的加密
二、简单的js逆向
为什么要做js逆向：由于可能对我们传入的信息进行加密，我们要进行payload测试等时候，如果传入明文，那么是根本没有用的，要按照他的加密逻辑将我们的测试语句加密，测试语句才可能会被识别 。
思路：提交错表单，查看网络数据包，找关键参数，全局搜索关键参数名，找到关键参数所在的关键代码，打上断点，控制台去测试。
由于xiaosedi给的是申通的实例，但是申通现在修改了当时的页面登录逻辑
pwd：123456
加密后的：e10adc3949ba59abbe56e057f20f883e
我们又看到有md5.js 就去全局搜索md5关键词
全局搜索：ctrl + shift + f
一个个去看，找到关键代码
打上断点
由于看到的是hex_md5()所以说，我们用hex_md5()传入字符串进行测试
由此可以直接在控制台将我们的测试语句利用hex_md5进行加密。