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 元素渲染成不同的样子。

scss 复制代码
// 获取 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 属性操作了。

示例:

xml 复制代码
<style>
  .red {
    color: red; 
  }
  .blue {
    color: blue;
  }
  [data-type="bold"] {
    font-weight: bold;
  }
  [data-type="italic"] {
    font-style: italic;
  }
</style>

<div id="test">公众号:前端路引</div>
<img id="img">

<script>
  const test = document.getElementById('test');
  const img = document.getElementById('img');
  
  // 设置属性
  test.setAttribute('data-type', 'bold')

  // 获取属性值
  const type = test.getAttribute('data-type')
  console.log('🚀 ~ type:', type);

  // 移除属性
  test.removeAttribute('data-type')

  // 添加新的属性
  test.setAttribute('data-type', 'italic')

  // 判断是否存在Class
  const hasRed = test.classList.contains('red')
  console.log('🚀 ~ hasRed:', hasRed);

  // 添加Class
  test.classList.add('red')

  // 移除Class
  test.classList.remove('red')

  // 如果不存在则添加 blue,存在 blue 则移除
  test.classList.toggle('blue')

  
  // 给图片设置地址
  img.src = 'https://developer.mozilla.org/static/media/firefox.1eabb4da07c095ca04fa.svg'
  // 获取图片地址
  console.log('🚀 ~ img.src:', img.src);
  
  // 换个 ID 属性
  img.id = 'img-1'
  // 获取 ID 属性
  console.log('🚀 ~ img.id:', img.id);

  // 设置图片的 class
  img.className = 'img-1'
  // 获取图片的 class
  console.log('🚀 ~ img.className:', img.className);

  // 设置图片边框
  img.style.border = '1px solid red'
  img.style.borderWidth = '4px'
  img.style['border-color'] = 'blue'
  // 设置图片宽度
  img.style.width = '100px'
  // 获取图片的样式
  console.log('🚀 ~ img.style:', img.style['border-width']);
</script>

在使用 style 属性设置样式的时候,如果使用的是 . 语法赋值,那么必须要改为 小驼峰命名,原因是 JS 中的 . 语法不支持短横线,比如 borderWidth,不能使用 border-width

在使用数组取值语法的时候,可以直接使用 css 的属性赋值,比如 img.style['border-color'] = 'blue'

运行结果:

DOM 内容操作

DOM 属性操作一般不会触发安全问题, XSS 注入都是发生在 DOM 内容操作的时候,所以在使用 JS 进行 DOM 内容操作时需特别小心。

常用的两个方法:

ini 复制代码
// 设置 DOM HTML 内容
element.innerHTML = htmlString;
// 设置 DOM 文本内容
element.textContent = textString;

实例:

xml 复制代码
<div id="test1">公众号:前端路引</div>
<div id="test2">公众号:前端路引</div>

<script>
const test1 = document.getElementById('test1');
const test2 = document.getElementById('test2');
// 写入 HTML 内容
test1.innerHTML = '<strong>警告</strong>:用户输入内容'; 

// 写入文本内容
test2.textContent = '<strong>安全文本</strong>'; // 直接显示文本,不解析 HTML

// 区别对比
console.log(test2.innerHTML); // 输出: &lt;strong&gt;安全文本&lt;/strong&gt;
console.log(test2.textContent); // 输出: <strong>安全文本</strong>
</script>

运行结果:

XSS 注入

在使用 innerHTML 设置 HTML 内容时,如果用户输入的内容中包含 JS 脚本,那么就会导致 XSS 注入。

比如这样:

ini 复制代码
<div id="test1">公众号:前端路引</div>
<div id="test2">公众号:前端路引</div>

<script>
  const test1 = document.getElementById('test1');
  const h1 = `<script>alert("XSS");<\/script>`;
  // 直接插入 script 标签被浏览器拦截了,不会引发 XSS 注入
  test1.innerHTML = h1;

  const test2 = document.getElementById('test2');
  // 但可以换一种变体,使用 img 标签也可以做到 XSS 注入
  const h2 = `<img src=x onerror="alert('XSS')">`;
  test2.innerHTML = h2;
</script>

HTML5 规范规定:通过 innerHTML 动态插入的 <script> 标签不会执行其中的 JavaScript 代码。

这是浏览器的一种安全机制,目的是防止开发者无意或恶意插入可执行脚本。

XSS 注入可能导致的问题:非法用户直接在网站中运行 JS 代码,可以获取用户信息,从而伪造一些请求,达到非法目的。

写在最后

在使用 JS 操作 DOM 内容的时候,需特别防范 XSS 注入问题,尤其是用户输入的内容更加要加强防范,可以把任何用户当做一个潜在的攻击者,他们所有的输入都是不可信的,这样可以避免很多的安全问题。

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js