前端安全之初识XSS

文章首发于我的博客：查看原文

文章是学习了慕课网老师视频整理，视频地址：Web安全-XSS

文末有惊喜哦

一、什么是XSS？

XSS（Cross-site scripting），跨站脚本，一种在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。这类攻击通常包含了HTML以及用户端脚本语言。

二、XSS的攻击方式

攻击有什么用？？=> 1、盗用cookie等，获取敏感信息；2、 破坏页面结构；3、其他～

2.1 反射型

发出请求时，XSS代码出现在URL中，作为输入提交到服务器，服务器端解析后响应，XSS代码随响应内容一起返回给浏览器，最后浏览器解析响应XSS代码。这个过程像一次反射，所以称为反射型XSS。

这里要注意的有几个点：

1. XSS代码出现在URL中；
2. 服务端解析响应
3. 浏览器解析代码

这里的XSS代码通常是CSS，javascript或者HTML片段。

2.2 存储型

存储型XSS和反射型XSS的差别在于提交的代码会存储在服务端（数据库、内存、文件系统等），下次请求目标页面时，无需再次提交XSS代码。

比如，当你访问一个人的博客时(不要搞我！)，你去他的文章下面添加一些评论，这些评论一般都会存下来，如果他的博客没有作什么处理，那么，一个简单的XSS攻击就算生效了：

2.2.1 插入html片段：

<img src="null" onerror="alert(“你被攻击了哦！”)" >

当你在评论中插入了一个 ==img== 标签，由于图片路径找不到，所以就会执行==onerror==方法，这样，onerror中的js脚本就被触发了，每次当用户访问到这篇文章，加载到这条评论时，都会触发这个弹窗。这样，一次简单的XSS就算生效了。

<button onclick="alert('你被攻击了哦！')">点我呀</button>  

向页面中插入一个按钮，诱导用户进行操作，进而被攻击了～

<iframe> <iframe>

向页面中插入一个iframe(或者frame)，来插入一些小广告？～。

2.2.2 插入CSS

<style>
    html,body{
        display:none!important;
    }
</style>

<link href= "">

如果向你的页面中插入上面的代码，当别人访问你的页面时，将会什么也看不到.

2.2.3 插入js代码

<script>
window.onload = function (){
    alert('你被攻击了哦！')
}
</script>

如果向你的页面中插入上面的代码，同样也被攻击了～。

由此得出一点，慎用==innerHTML==

三、XSS的防范措施

3.1 编码

对用户输入的内容进行HTML Entity编码（字符转义），不能进行原样输出。

在编写HTML页面时，需要用到"<"、">"、"空格"、"&"、"引号"直接输入这些符号时，会错误的把它们与标记混在一起，非常不利于编码。所以 需要对这些字符进行转义。

Character	Entity
&	&
<	&lt;

| >
" | "
空格 |  

3.2 过滤

过滤掉用户输入的一些不安全的内容

3.2.1 移除用户上传的DOM属性，入onclick，onerror等

3.2.2 移除用户上传的style节点，script节点，iframe节点等。

3.3 校正

3.3.1 避免直接对HTML Entity进行解码

3.3.2 使用DOM Parse转换，校正不配对的DOM标签

DOMParser: 可以将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM Document。

我的博客使用了第三方库htmlparser2进行过滤和校正

segmentfault上，这篇文章似乎被人成功攻击了，哈哈:
《用大白话谈谈XSS与CSRF》
打开这个链接，拖到文章最下面，，点击【显示更多评论】，有惊喜。。

道路千万条，安全第一条，作为前端开发的你对前端开发有一点认识了吗？

感谢你的阅读，欢迎留言探讨～