XSS

XSS（Cross Site Scripting）攻击全称跨站脚本攻击。

它与 CSS（Cascading Style Sheets）没什么关系，避免缩写混淆。

XSS 是一种在 web 应用中的常见的安全漏洞，恶意将代码植入到提供给其它用户使用的页面。

XSS 漏洞和著名的 SQL 注入漏洞一样，都是利用了 Web 页面的编写不完善，向后端发起了脚本请求。

XSS 攻击在前端部分只能预防，实际需要后端同步配合处理。

不能以单一特征来概括所有XSS攻击。

常见的防御 XSS 攻击是通过前后台校验的方式禁止不合法的攻击脚本传入产生攻击行为。

前端界面一般通过字段校验来限制用户输入特殊符号。

但实际上我们有些字段是支持特殊符号的传入，那么单纯通过校验规则无法避免这类攻击。

攻击认定

如何判定你的界面是会受到XSS攻击呢？

当你定义某个字段值为一段JS脚本的时候，当这个字段在界面上展示的时候，如果能够被触发则说明你的界面能够被 XSS 攻击。

攻击实例

界面有个用户名选择按钮，点击后在弹出层选择一条用户记录。

该记录的用户名为：

<script>alert('XSS');</script>

选择确认后，用户名被展示在用户名字段后面（不可编辑）。

但此时你点击这用户名的时候，发现会触发弹窗 "XSS" ，由于这个字段的 script 脚本生效了。

如果用户通过注入其他的 script 脚本，比如 ajax 请求向服务端发数据。

XSS前端防御

前端防御XSS攻击只需要关注一个点。

1. 禁止脚本直接输出到界面。

所以我们需要定义公共的字段编解码方法。

// 编码，用于展示界面或编码向后端传递
function htmlEncode(HtmlString)
{
    var str = HtmlString;
    if(HtmlString != null && typeof (HtmlString) === "string")
    {
        HtmlString.replace(/&/g,"&");
        str = str.replace(/</g,"&lt;");
        str = str.replace(/>/g,"&gt;");
        str = str.replace(/"/g,"&quot;");
        str = str.replace(/'/g,"&#39;");
        str = str.replace(/(/g,"&#40;");
        str = str.replace(/)/g,"&#41;");
        str = str.replace(/%/g,"&#37;");
        str = str.replace(/+/g,"&#43;");
        str = str.replace(/,/g,"&#44;");
    }
    return str;
}
// 解码，用于获取字段真实值放入input框等
function htmlDecode(HtmlString)
{
    var str = HtmlString;
    if(HtmlString != null && typeof (HtmlString) === "string")
    {
        str = HtmlString.replace(/&amp;/g,"&");
        str = str.replace(/&lt;/g,"<");
        str = str.replace(/&gt;/g,">");
        str = str.replace(/&quot/g,""");
        str = str.replace(/&#39;/g,"'");
        str = str.replace(/&#40;/g,"(");
        str = str.replace(/&#41;/g,")");
        str = str.replace(/&#37;/g,"%");
        str = str.replace(/&#43;/g,"+");
        str = str.replace(/&#44;/g,",");
    }
    return str;
}
//实际使用直接调用即可
//如上文攻击实例过程中，我们可以对用户名进行编码展示htmlEncode(userName)

小结

实际上，防御 XSS 最好的方式是后端处理。

1. 返回数据的时候直接进行HTML编码。
2. 收到数据时也进行HTML编码，避免后期返回时直接被抛出来。