前端安全之初识XSS

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

前端安全

文章是学习了慕课网老师视频整理,视频地址: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片段:

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

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

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

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

1
2
<iframe> <iframe>

向页面中插入一个iframe(或者frame),来插入一些小广告?~:smiling_imp:。

2.2.2 插入CSS

1
2
3
4
5
<style>
html,body{
display:none!important;
}
</style>
1
<link href= "">

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

2.2.3 插入js代码

1
2
3
4
5
<script>
window.onload = function (){
alert('你被攻击了哦!')
}
</script>

如果向你的页面中插入上面的代码,同样也被攻击了~:smiling_imp:。

由此得出一点,慎用innerHTML****

三、XSS的防范措施

3.1 编码

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

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

Character Entity
& &amp;
< &lt;

| &gt;
“ | &quot;
空格 | &nbsp;

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

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

感谢你的阅读,欢迎留言探讨~