前端安全之初识XSS

jiezi

5 年前

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

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

文末有惊喜哦

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

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

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

这里要注意的有几个点：

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

存储型 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==

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

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

Character	Entity
&	`&`
<	`<`

| >
” | "
空格 |  

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

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

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

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

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

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

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

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

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

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

一、什么是 XSS？