Java防止Xss注入json_【知识点】6个XSS的防御小技巧

XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。

作者：laobo

文章出处：WEB前端安全——XSS和CSRF

目录

• XSS的类型
• XSS的注入点
• XSS的防御
• 关于在vue中的xss防御

一 XSS

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

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

1 XSS的类型

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

2 XSS的注入点

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

3 XSS的防御

3.1 浏览器的防御

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

3.2 防御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, '&lt;').replace(/>/g, '&gt;')
    }
    username = escape("<script>alert('xss')</script>")
</script>

3.3 防御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, '&#39;').replace(/ /g, '&#32;')
    }
    image = escape('www.a.com/c.png" onload="alert(1)')
</script>

3.4 防御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)
}

3.5 防御富文本

风险代码：

<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。

3.6 CSP 内容安全策略

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

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

4 关于在vue中的xss防御

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

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