当前位置：首页 > news >正文

js （bom）

news 2025/11/11 16:05:25

为什么要了解 BOM？

BOM 的核心对象（通俗易懂版）

1. 浏览器窗口的“总管家” - window

管家手下几个“得力助手”（重要属性/方法）

2. document：当前网页内容

3. location：地址栏相关

4. history：浏览历史记录

5. navigator：浏览器自身信息

6. screen：用户屏幕信息

7. cookie：存储在浏览器的小数据

基础概念：

核心作用：

4种通过iframe跨域与其他页面通信的方式

1、location.hash

2、window.name

3、postMessage

4、document.domain 降域

名词解释：js名词解释-CSDN博客

又是渗透小白的一天，慢就是快，少就是多。

主要看js中的bom、dom还有opp中的对象（object）和原型（prototype）。建议用大模型进行解析，通俗易懂。

BOM（Browser Object Model，浏览器对象模型），它可以简单理解为JS 操作浏览器各种功能的 “工具箱”。浏览器的地址栏、弹窗、窗口大小、历史记录等，都能通过 BOM 提供的对象来控制。

为什么要了解 BOM？

在渗透测试中，很多前端交互、漏洞利用（比如 XSS 跨站脚本攻击）都会用到 BOM 的功能。比如通过 BOM 获取用户的浏览器信息、操作页面跳转，甚至结合 XSS 窃取 cookie 等。

BOM 的核心对象（通俗易懂版）

BOM 的核心是一系列 “对象”，每个对象对应浏览器的一个功能模块，常用的有以下几个：

1. 浏览器窗口的“总管家” - `window`

想象你打开一个浏览器标签页，这就是一个窗口。window 对象就是这个窗口的 “总管家”，管着这个窗口里的一切：

窗口大小、位置：管家能调整窗口多大（innerWidth/innerHeight），放在屏幕哪里（screenX/screenY）。
网页内容：管家手里拿着当前网页的“说明书”（document，也就是DOM）。
地址栏信息：管家知道当前网址是啥，还能改（location.href - 这个超重要！）。
浏览器功能：管家能弹出警告框（alert）、输入框（prompt），能开新窗口（open），能关自己（close）。
存储小仓库：管家有俩小本本（localStorage 和 sessionStorage），网站可以往里面存点用户数据（比如登录状态、购物车）。

关键点： 在这个窗口里写的任何变量，如果没声明是谁家的（比如直接写 a = 10;），默认就变成管家 (window) 口袋里的东西 (window.a = 10)。这是个早期的设计小失误。

管家手下几个“得力助手”（重要属性/方法）

.location (地址栏小助手)
- 干嘛的： 专门管浏览器顶上的地址栏。
- 渗透看点： 这是黑客最喜欢的！ 因为一段恶意代码（比如XSS漏洞）就能命令小助手：window.location.href = 'https://黑客的钓鱼网站.com';，神不知鬼不觉把你带到假网站去！ 也能偷看当前网址里的敏感参数。
.open() / .close() (开窗关窗小能手)
- 干嘛的： open() 能开新窗口（比如弹广告），close() 能关自己（只能关自己打开的）。
- 渗透看点： 恶意脚本可以用 open() 静悄悄开个钓鱼网站窗口，或者搞“弹窗轰炸”烦死你（拒绝服务）。close() 可以用来关掉自己开的恶意窗口。
.alert() / .prompt() / .confirm() (弹窗三兄弟)
- 干嘛的： 弹出系统自带的对话框（警告、让你输入、让你确认）。
- 渗透看点： 黑客可以用它们伪装成系统提示！比如弹个假登录框 (prompt) 骗你输密码，或者弹个警告 (alert) 吓唬你说“电脑中毒了，快下载杀毒软件”（其实是病毒）。
.localStorage / .sessionStorage (小本本管家)
- 干嘛的： 让网站能在你浏览器里存点数据。localStorage 长期存（除非你删），sessionStorage 关标签页就丢。
- 渗透看点： 如果网站傻乎乎地把登录令牌、身份证号这种敏感东西存在这里，黑客一旦在网站找到漏洞（比如XSS），就能把你的小本本偷看光！
.postMessage() (跨窗口传纸条)
- 干嘛的： 这是不同窗口（比如网页里的iframe广告）之间安全通信的正规方法。需要双方对暗号（验证来源）。
- 渗透看点： 如果接收纸条的窗口没好好检查纸条是谁发的、内容可不可信，黑客就能伪造纸条，把恶意代码或数据偷偷塞进来（跨域攻击）。
.opener (谁开的我？)
- 干嘛的： 如果这个窗口是另一个窗口用 open() 打开的，那么 .opener 就指向那个“爸爸”窗口。
- 渗透看点： 有点危险！ 恶意网站如果被你用 open() 打开了（比如点了恶意链接开了新标签），这个新标签里的恶意代码能反过来控制你的原标签页！比如把你的银行页面偷偷换成钓鱼页面。所以，好网站开新窗时都会加个 rel="noopener" 或者 newWin.opener = null 切断这个联系。

比如：
- 弹出提示框：window.alert("你好")（平时弹的 “确定” 框）。
- 关闭当前窗口：window.close()（有些浏览器会限制，不是所有情况都能关）。
- 打开新窗口：window.open("https://xxx.com")（渗透中可能被用来诱导用户打开恶意链接）。

2. document（DOM）

1） `document` 是啥？

想象你打开浏览器看一个网页（比如淘宝、知乎）。

window 是管整个浏览器窗口的“大管家”（管窗口大小、地址栏、开新窗口等）。
document 就是大管家手里拿着的“当前网页的详细说明书”！它只管你眼前看到的这个网页内容本身。

关键点： document 是 window 的一个最重要的“小弟”（属性），你可以通过 window.document 拿到它，但通常直接写 document 就行。

2）`document` 说明书里都有啥？（核心作用）

这份“说明书”详细记录了：

网页里所有看得见的东西： 文字、图片、按钮、输入框、链接、表格、视频... 统统都在里面。
这些东西怎么排版的： 哪个是标题，哪个是段落，哪个在左边，哪个在右边。
这些东西的属性： 比如图片的网址 (src)，输入框里填了什么 (value)，链接指向哪里 (href)。

简单说：document 就是 JavaScript 用来操作和修改你眼前这个网页内容的“万能遥控器”！

3）`document` 的常用“查东西”属性（渗透重点看这些！）

这些属性就像是说明书里的“目录”或“索引”，帮你快速找到网页里的元素

document.documentElement：
- 是啥？ 指向整个网页的根元素，也就是 <html> 标签。相当于整本说明书的“封面”。
- 渗透看点： 拿到它就能操作整个网页结构（虽然不常用，但知道它是根）。
document.head：
- 是啥？ 指向网页的 <head> 标签部分。这里面通常放网页的“幕后信息”：标题、引用的CSS/JS文件、meta标签（比如描述、关键词）。
- 渗透看点： 黑客可能在这里找敏感信息（如注释里的路径、测试用的API key），或者偷偷往这里插入恶意JS脚本（比如通过XSS漏洞）来控制整个页面！
document.body：
- 是啥？ 指向网页的 <body> 标签部分。这就是你眼睛直接看到的所有内容！ 文字、图片、按钮都在这里面。
- 渗透看点： 最最最重要的攻击目标！ 黑客找到漏洞（如XSS），就能用JS修改 document.body 的内容，比如：插入假登录框、显示恐吓信息、甚至把整个页面替换成钓鱼内容！
document.cookie：
- 是啥？ 这是存放网站给你发的“小饼干”(Cookies) 的地方！ 字符串类型，里面包含了一堆 key=value 对（比如你的登录会话ID sessionid=xxxxx）。
- 渗透看点： 黑客的超级目标！ 如果网站没设置好安全标志 (HttpOnly, Secure)，黑客一旦在网页上找到漏洞（比如XSS），就能用 document.cookie 把你的登录凭证（小饼干）偷走！ 偷到后就能冒充你登录。防御：关键Cookie一定要设 HttpOnly（不让JS读）。
document.URL / document.location：
- 是啥？ 告诉你当前网页的完整网址。和 window.location.href 基本一样。
- 渗透看点： 黑客脚本可以读这个网址，如果网址里包含敏感参数（如 ?token=secret 或 ?user_id=admin），就能偷走。也能用来判断用户当前在哪个页面。
document.forms：
- 是啥？ 一个集合（像列表），包含了网页里所有的 <form> 表单。你可以通过索引 document.forms[0] 或表单的 name 属性 document.forms['loginForm'] 拿到具体的表单。
- 渗透看点： 黑客找到漏洞后，可以通过这个属性：
  - 自动填写并提交表单（比如自动发垃圾帖、薅羊毛）。
  - 修改表单提交的目标地址，把数据发到黑客服务器（而不是原本的网站）。
  - 窃取表单内容（如果能在提交前读取到用户输入）。
document.links：
- 是啥？ 一个集合，包含了网页里所有的 <a> 超链接。
- 渗透看点： 恶意脚本可以扫描页面上的所有链接，分析结构，或者把正常链接偷偷替换成恶意链接（比如下载病毒或钓鱼网站）。

3. `history`：浏览历史记录

控制浏览器的 “前进”“后退” 功能。
比如：
- 后退一页：history.back()（相当于点浏览器的 “←” 按钮）。
- 前进一页：history.forward()（相当于点 “→” 按钮）。
注意：它只能操作当前窗口的历史记录，不能获取具体的 URL（出于安全限制）。

`4. navigator`：浏览器自身信息

获取用户浏览器的 “身份信息”。
比如：
- 浏览器类型：navigator.userAgent（返回类似Mozilla/5.0 (Windows NT 10.0; ...)的字符串，包含浏览器版本、操作系统等，渗透中可用来判断目标环境）。
- 是否是手机浏览器：navigator.userAgent.includes("Mobile")（可用来区分 PC / 移动端，针对性构造攻击）。

6. `screen`：用户屏幕信息

获取用户显示器的尺寸，比如屏幕分辨率：screen.width（返回宽度像素，比如 1920）。
渗透中用途：了解目标设备信息，辅助构造适配的钓鱼页面。

7. `cookie`：存储在浏览器的小数据

虽然属于document对象（document.cookie），但非常重要，单独拎出来说。

基础概念：
- Cookie 是网站存放在你浏览器里的一张小纸条（大小不超过 4KB）
- 每次你访问这个网站，浏览器都会自动把这张纸条给网站看
- 比如你登录了淘宝，淘宝就会给你一个 Cookie 写着"这是张三"，这样你浏览商品时淘宝就知道你是谁
核心作用：
- 身份证明：让网站记住你是谁（登录状态）
- 记忆功能：保存你的偏好（比如语言设置、夜间模式）
- 购物车：记录你选了哪些商品（即使你还没登录）
- 追踪：网站分析你的浏览习惯（这个有时会涉及隐私问题）

这些属性决定了 Cookie 的安全性，也是渗透测试中要重点检查的：

属性	通俗解释	渗透意义
`HttpOnly`	禁止 JavaScript 读取这个 Cookie（像锁在保险箱里）	防 XSS 攻击：黑客无法用 JS 脚本偷走你的登录 Cookie
`Secure`	只能通过 HTTPS 加密连接传输（像用防弹车运送）	防窃听：避免在公共 WiFi 被黑客截获 Cookie
`SameSite`	控制是否允许其他网站携带这个 Cookie（像门禁系统）	防 CSRF 攻击：阻止黑客在钓鱼网站冒充你操作银行账户
`Expires`	Cookie 的有效期（像食品保质期）	测试会话超时：检查过期后是否真的需要重新登

BOM 就是 JS 操作浏览器功能的工具集，核心是window、location、document这些对象。对于渗透新手来说，重点记住location.href（跳转）、document.cookie（获取 cookie）这两个，很多前端漏洞利用都会用到。后续学习 XSS 时，会更频繁地和它们打交道

4种通过iframe跨域与其他页面通信的方式

1、location.hash

原理：在 URL 里有个#后面的部分就是location.hash，改变这个部分不会让页面刷新，所以可以利用它来传数据。不过能传的数据量有限。
举例：假如有两个不同域名（localhost:8080和localhost:8081）下的页面cs1.html和cs2.html要通信。cs1.html先创建一个隐藏的iframe，把它的src地址设成localhost:8081/cs2.html，并且带上要传的数据作为hash值。cs2.html收到消息后，想给cs1.html回数据，就通过修改parent.location.hash来实现。但因为两个页面域名不同，直接修改会被浏览器阻止，所以得借助一个在localhost:8080域名下的代理页面cs3.html来完成。
缺点：数据会直接显示在 URL 里，别人一看 URL 就知道你传啥数据了；而且能传的数据量和类型都不多。

2、window.name

原理：window.name是当前窗口的名字，每个iframe都有自己的window，也就有window.name属性。神奇的是，不管页面怎么跳转，哪怕跳到不同域名的页面，只要不修改，window.name的值就不会变，并且它能存的数据量很大（大概 2MB）。
举例：有a.html和b.html两个页面，a.html想从b.html拿数据。a.html先创建一个iframe，把src设成b.html的地址。b.html把要传的数据放到window.name里。但因为a.html和iframe里的b.html域名不同，直接拿iframe的window.name会报错，所以b.html加载完后，把iframe的src改成和a.html同源的c.html，这样a.html就能顺利拿到window.name里的数据了。

3、postMessage

原理：这是 HTML5 新增的功能，很多浏览器都支持。通过它可以在不同文档之间传消息。
举例：有a.html和b.html两个页面，a.html里创建一个iframe，src指向b.html。a.html用iframe的postMessage方法给b.html发消息，同时监听message事件，等收到b.html回的消息就进行处理。b.html也监听message事件，收到a.html的消息后，用parent.postMessage给a.html回消息。

4、document.domain 降域

原理：当两个页面主域相同但子域不同时，可以通过设置document.domain为相同的主域，让它们能相互操作和访问。
举例：有http://www.example.com/a.html和http://sub.example.com/b.html两个页面，在这两个页面里都设置document.domain = "example.com"。然后a.html创建一个iframe，src指向b.html。等iframe加载完，a.html就能控制iframe的window来获取数据了。不过要测试这个方法比较麻烦，得安装nginx做域名映射，还得修改hosts文件，把域名映射到本地服务器。