WEB前端安全——XSS

XSS（Cross-site scripting），指的是跨站脚本攻击，攻击者通过向页面A注入代码，达到窃取信息等目的。XSS危害是很大的，一般XSS可以做到以下的事情：

• 获取页面的数据，包括dom、cookies、localStorage等
• 劫持前端逻辑
• 发送请求
• ...

XSS的类型

• 反射型（非持久）：通过URL参数直接注入
• 存储型（持久）：存储到数据库后读取时注入
• 基于DOM：被执行的恶意脚本会修改页面脚本结构

XSS的注入点

• HTML的节点内容或属性
• javascript代码
• 富文本

XSS的防御

浏览器的防御

防御和“X-XSS-Protection”有关，默认值为1，即默认打开XSS防御，可以防御反射型的XSS，不过作用有限，只能防御注入到HTML的节点内容或属性的XSS，例如URL参数中包含script标签。不建议只依赖此防御手段。

防御HTML节点内容

存在风险的代码：

<template>
    <p>{{username}}</p>
</template>

<script>
    username = "<script>alert('xss')</script>"
</script>

复制代码

编译后的代码：

<p>
    <script>alert('xss')</script>
</p>
复制代码

以上例子是采用vue语法，但其实在vue这样的框架中，{{username}}中的内容是经过字符串化的，所以是不会被浏览器执行的，若换其他模板语言例如jade，则可能存在风险。下同。

防御代码：

通过转义 < 为 &lt 以及 > 为 &gt 来实现防御HTML节点内容。

<template>
    <p>{{username}}</p>
</template>
<script>
    escape = function(str){
        return str.replace(/</g, '<').replace(/>/g, '>')
    }
    username = escape("<script>alert('xss')</script>")
</script>
复制代码

防御HTML属性

<template>
    <img :src="image" />
</template>
<script>
    image = 'www.a.com/c.png" onload="alert(1)'
</script>
复制代码

编译后代码：

<img src="www.a.com/c.png" onload="alert(1)" />
复制代码

防御代码：

通过转义 " 为 &quto; 、 ' 为 ' 来实现防御，一般不转义空格，但是这要求属性必须带引号！

<template>
    <img :src="image" />
</template>
<script>
    escape = function(str){
        return str.replace(/"/g, '&quto;').replace(/'/g, ' ').replace(/ /g, ' ')
    }
    image = escape('www.a.com/c.png" onload="alert(1)')
</script>
复制代码

防御javaScript代码

假设访问页面地址为 www.a.com?id=1";alert(1);"

风险代码：

var id = getQuery('id')
复制代码

编译后代码：

var id = "1";alert(1);""
复制代码

防御代码：

通过将数据进行JSON序列化

escape = function(str){
    return JSON.stringify(str)
}
复制代码

防御富文本

风险代码：

<template>
    <p v-html="richTxt"></p>
</template>

<script>
    richTxt = '<a onmouseover=alert(document.cookie)>点击</a>'
</script>
复制代码

上面的这段代码中，当鼠标移动到“点击”上面时，就会触发alert弹窗！这在vue中是会发生的。

防御富文本是比较复杂的工程，因为富文本可以包含HTML和script，这些难以预测与防御，建议是通过白名单的方式来过滤允许的HTML标签和标签的属性来进行防御，大概的实现方式是：

• 将HTML代码段转成树级结构的数据
• 遍历树的每一个节点，过滤节点的类型和属性，或进行特殊处理
• 处理完成后，将树级结构转化成HTML代码

当然，也可以通过开源的第三方库来实现，类似的有 js-xss 。

CSP 内容安全策略

CSP(content security policy)，是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。

CSP可以通过HTTP头部（Content-Security-Policy）或 <meta> 元素配置页面的内容安全策略，以控制浏览器可以为该页面获取哪些资源。比如一个可以上传文件和显示图片页面，应该允许图片来自任何地方，但限制表单的action属性只可以赋值为指定的端点。一个经过恰当设计的内容安全策略应该可以有效的保护页面免受跨站脚本攻击。

具体的配置描述可以移步MDN

关于在vue中的xss防御

vue已经在框架中进行了一些xss防御了，我们对于一些外来的内容(例如接口或URL参数)，尽量用{{ }}表达式来显示，因为{{ }}中的内容经过字符串化，浏览器不会对其中的内容进行执行操作。

尽量少用v-hmtl指令，或者先对内容进行xss过滤。虽然 HTML 5 中指定不执行由 innerHTML 插入的 "script" 标签。 但是其中的标签是可以有执行javascript的监听函数的，例如onload、onerror、onmouseover等等。