前端安全之初识XSS

文章首发于个人博客：查看原文

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

文末有惊喜哦

1、什么是XSS？

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

2、XSS的攻击方式

攻击有什么用？？=> 一、盗用cookie等，获取敏感信息；二、 破坏页面结构；三、其余～

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

3、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》
打开这个连接，拖到文章最下面，，点击【显示更多评论】，有惊喜。。

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

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