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

文章是学习了慕课网老师视频整理，视频地址：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》
打开这个链接，拖到文章最下面，，点击【显示更多评论】，有惊喜。。

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

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