NodeJS 防止xss攻击 🎨

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

本文简介

点赞 + 关注 + 收藏 = 学会了

xss 是常见的攻击方式之一，不管是前端还是后端都要对此有所防范才行。

本文主要讲解使用 NodeJS 开发的后端程序应该如何防范 xss 攻击。

xss演示

xss 攻击方式主要是在在页面展示内容中掺杂 js代码，以获取网页信息。

常见的攻击地方有：

1. 电商产品评价区：某用户提交的评价带有 可执行的js代码，其他用户查看该评论时就会执行那段 js代码。
2. 博客网站：某用户在博客的标题或者内容中带有 可执行的JS代码 ，其他用户查看该博客时那段 js代码 就会被执行。

比如在输入框输入

<script>alert(1234)</script>
复制代码

别的用户在自己页面要展示上面这段内容个，页面有可能会弹出一个弹窗。

这个例子只是弹出一个对话框，如果人家有恶意，获取 cookie 等信息，然后传给自己的服务器，那后果真的很严重。

xss防御

预防措施：转义特殊字符

特殊符号转换

& -> &
< -> &lt;
> -> &gt;
" -> &quot;
' -> &#x27;
/ -> &#x2F;
复制代码

上面我罗列了几个常见的特殊字符。从上面的例子可以看出，输入了 <script> 标签后，里面的内容有可能会被执行。

如果我们把 <script> 改成 <script> 那么浏览器就不把这段内容看成是可执行代码。

在日常开发中，我们不需要自己编写转义功能的代码，只需要下载 xss 的依赖包就行。

安装 xss 依赖包

npm install xss --save
复制代码

使用 xss 。xss 其实是一个方法，只需要把要转义的内容传入 xss 方法即可。

const xss = require('xss')

const content = xss('<script>alert(1234)</script>')
console.log(content)
复制代码

最后输出

<script>alert(1234)</script>
复制代码

以上就是 xss攻击 在后端的防御方法。

如果严谨一点的话，在前端也可以把文本域的内容里的特殊字符转义一遍再传给后端。

后端传给前端的内容有可能会在页面展示成 <script>alert(1234)</script> ，这部分需要前端自己去处理。

插则花边新闻

之前看到有则新闻说 Vue 不安全，某些ZF项目中使用 Vue 受到了 xss 攻击。后端甩锅给前端，前端甩锅给了 Vue 。

后来听说是前端胡乱使用 v-html 渲染内容导致的，而 v-html 这东西官方文档也提示了有可能受到 xss 攻击。

尤雨溪：很多人就是不看文档

01.png