Web前端入门第 72 问：JavaScript DOM 内容操作常用方法和 XSS 注入攻击
当项目的安全团队找上门告诉您，您开发的项目存在 XSS 安全漏洞，作为一个开发人员，就问您慌不慌？？HTML 内容写入的时候，如果稍不注意就会触发隐藏 BOSS 漏洞 XSS。
XSS 漏洞原理就是利用了网站上内容输入的地方，比如说常见的评论提交，老六 通过输入评论的地方，提交一些 包含 JS 代码的内容 到服务器，服务器没做任何操作直接写入到数据库，最后在评论查询的时候直接将数据库的内容原样返给前端，而前端拿到此内容的时候，也不做任何处理，直接将内容以 HTML 的形式渲染的页面中，这时候 老六 输入的非法内容就会被当做 JS 代码执行，这就是典型的 XSS 注入攻击。
要避免 XSS 漏洞，就需要对不可信的内容进行过滤；或者不要把这部分内容当做 HTML 处理，直接当做文本渲染也可以避免 XSS 注入。
DOM 属性操作
在了解 DOM 内容操作之前，先学习几个常用的 DOM 属性操作方法，毕竟 JS 与 CSS 联动一般都是通过 DOM 属性进行关联。
比如 JS 控制 class 属性的变化，再在 CSS 中编写不同的 class 样式，就可以让 HTML 元素渲染成不同的样子。
// 获取 DOM 属性值
element.getAttribute(name)
// 设置 DOM 属性值，已存在的属性值会被修改
element.setAttribute(name, value)
// 删除 DOM 属性
element.removeAttribute(name)
// 操作 class 方法
element.classList.add(c1, c2, c3, ...) // 添加
element.classList.remove(c1, c2, c3, ...) // 删除
// force 使用布尔值将强制只允许删除或者只允许修改
element.classList.toggle(className, force) // 如果存在则删除，不存在则添加
element.classList.contains(className) // 判断是否存在
// 其他常用属性
element.id // 设置 id
element.className // 设置 class
element.style // 直接设置样式
// 特定标签属性
img.src // 设置图片地址通过 className 可直接设置元素的 class 属性，这儿有一个问题，为什么不是直接使用 class 设置呢？
原因是：class 是 JS 中的关键字，为避免引起一些语法问题，所以就换了一个名字 className。
通过 className 控制类名的增删改虽然也不是不能做，但是始终有那么一点点麻烦，所以后来就引入了 classList 用来专门控制 class 属性。
而 Attribute 相关的几个方法，则是可以用来控制元素的所有属性，包括自定义属性和一些默认的属性 id、style、className 等。所以记住 Attribute 几个方法就已经可以打穿 DOM 属性操作了。
示例：
公众号：前端路引
<img id="img">在使用 style 属性设置样式的时候，如果使用的是 . 语法赋值，那么必须要改为 小驼峰命名，原因是 JS 中的 . 语法不支持短横线，比如 borderWidth，不能使用 border-width。
在使用数组取值语法的时候，可以直接使用 css 的属性赋值，比如 img.style['border-color'] = 'blue'。
运行结果：
DOM 内容操作
DOM 属性操作一般不会触发安全问题， XSS 注入都是发生在 DOM 内容操作的时候，所以在使用 JS 进行 DOM 内容操作时需特别小心。
常用的两个个方法：
// 设置 DOM HTML 内容
element.innerHTML = htmlString;
// 设置 DOM 文本内容
element.textContent = textString;实例：
公众号：前端路引
公众号：前端路引运行结果：
XSS 注入
在使用 innerHTML 设置 HTML 内容时，如果用户输入的内容中包含 JS 脚本，那么就会导致 XSS 注入。
比如这样：
公众号：前端路引
公众号：前端路引HTML5 规范规定：通过 innerHTML 动态插入的 <script> 标签不会执行其中的 JavaScript 代码。
这是浏览器的一种安全机制，目的是防止开发者无意或恶意插入可执行脚本。
XSS 注入可能导致的问题：非法用户直接在网站中运行 JS 代码，可以获取用户信息，从而伪造一些请求，达到非法目的。
写在最后
在使用 JS 操作 DOM 内容的时候，需特别防范 XSS 注入问题，尤其是用户输入的内容更加要加强防范，可以把任何用户当做一个潜在的攻击者，他们所有的输入都是不可信的，这样可以避免很多的安全问题。
更多内容参考 MDN：
https://developer.mozilla.org/zh-CN/docs/Web/API/DOMTokenList
https://developer.mozilla.org/zh-CN/docs/Web/API/Element
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]