前端安全之初识XSS

文章首发于我的博客：查看原文
文章是学习了慕课网老师视频整理，视频地址：Web安全-XSS

文末有惊喜哦

一、什么是XSS？

二、XSS的攻击方式

2.1 反射型

这里要注意的有几个点：

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

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

2.2 存储型

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

2.2.1 插入html片段：

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

当你在评论中插入了一个 标签，由于图片路径找不到，所以就会执行方法，这样，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>

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

由此得出一点，慎用

三、XSS的防范措施

3.1 编码

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

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标签

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

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

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

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