Vue - vue 前端安全
vue应用自身安全的机制
-
HTML插值
利用原生Dom api Node.textContent 对输入变量进行HTML转义。 -
Attribute 绑定
利用原生DOM api， Element.setAttribute 方法自动转义属性值的设置。
vue应用可能存在的风险点
- HTML注入
风险： 如果html内容由用户提供，在未进行html转义时就在代码中使用，则面临攻击风险。
解决方案： 在插入到页面之前进行html转义处理。
- v-html 指令
<div v-html="userProvidedHtml"></div>
- 使用渲染函数
h('div', {
innerHTML: this.userProvidedHtml
})
- 以jsx的方式注入
<div innerHTML={this.userProvidedHtml}></div>
- URL注入
风险: 如果这个 URL 允许通过 javascript: 执行 JavaScript，即没有进行无害化处理，那么就会有一些潜在的安全问题。
解决方案： 利用sanitize-url类似的库对url做无害化处理.
<a :href="userProvidedUrl">
click me
</a>
- 样式注入
风险: 由于 userProvidedStyles 的存在，恶意用户仍然能利用 CSS 进行“点击劫持”攻击，例如，可以在“登录”按钮上方覆盖一个透明的链接。
解决方案： 利用对象值的形式传递样式，并控制可以传递的安全属性。
<a
:href="sanitizedUrl"
:style="userProvidedStyles"
>
click me
</a>
- javascript 注入
- 在vue中渲染
- 在事件属性中(onclick, onmouseenter等)注入用户输入而未进行过滤的内容
- 将用户提供未经无害化处理的内容作为vue模版渲染
- 将vue挂载到包含服务端渲染，或用户提供内容的DOM节点。
前端安全最佳实践
- 只在客户端使用vue的情况下，主要面临的攻击就是基于Dom的xss攻击，解决基于Dom的xss攻击的方式就是，对待有风险的用户输入根据输出的场景（HTML注入， URL注入， CSS注入， javascript注入）进行有针对性的过滤和转义，也就是进行无害化处理。
- 如果将这些不可信的输入发送到服务端存储，服务端则要做好数据的过滤和转义，否则会面临存储性xss的攻击。
- 在提交表单时要注意防范csrf攻击, 通过csrf令牌进行防范。
- 防范应用被iframe嵌套进行点击劫持攻击。[web安全-点击劫持] (https://www.cnblogs.com/xiaodi-js/p/16718859.html)
