初探 XSS

前言：最近因为阮老师blog 被攻击，对前端安全起了兴趣，还有迫于小组分享，就认(大)真(概)的研究了下 Xss

XSS

• xss表示Cross Site Scripting(跨站脚本攻击)，它与SQL注入攻击相似， SQL注入攻击中以SQL语句做为用户输入，从而达到查询/修改/删除数据 的目的，而在xss攻击中，经过插入恶意脚本，实现对用户游览器的控制。

一、分类

• 反射型(非持久型)

  • Url 造成一个攻击的连接。

• 储存型(持久型)

  • 存储为服务器端，论坛留言(等等)

二、看一个栗子🌰

2.1 demo1

• http://www.insecurelabs.org/
• 进入上面的网站，这是一个有缺陷的没有进行 xss 筛选的页面。

1. 进入网页，选中 Agenda 看到有 serach
2. 而后咱们在搜索框中输入具备攻击的信息

测试一下网站的安全

• https://translate.google.cn/#zh-CN/en/
• google 翻译是咱们经常使用的一个网站，咱们来试试

<script>alert(123)</script>

复制代码

看看网页的反应。弹出了 123

这就是一个简单的 XSS 攻击。

2.2 demo2(Google 翻译)

• 进入咱们经常使用的 google 翻译

1. 进入网站 输入两个 哈哈 进行翻译

2.咱们能够看到 url 上面显示了咱们输入的 哈哈，说明这里能够注入内容。 那咱们来注入一些友(坏)善(坏)的脚本吧。

https://translate.google.cn/#zh-CN/en/哈哈
//替代为
https://translate.google.cn/#zh-CN/en/<script>alert(123)</script>
复制代码

3.回车肯定后，会发现浏览器帮我作了处理，

• 看看状况

• 能够看到参数 q 没错，可是浏览器作了 xss 的筛选

咱们看到这个，X-XSS-Protection 这个就是咱们今天的主题了。

4.咱们用 firefox 从新试试上面的 demo(固然你能够在 MDN 直接输入x-xss-protection)

• 如图点击这个 ? 号，进入 MDN 看看状况

• MDN 这么解释

HTTP X-XSS-Protection响应头是Internet Explorer，Chrome和Safari的一个功能，当检测到跨站脚本攻击 (XSS)时，浏览器将中止加载页面。虽然这些保护在现代浏览器中基本上是没必要要的，当网站实施一个强大的Content-Security-Policy来禁用内联的JavaScript ('unsafe-inline')时, 他们仍然能够为尚不支持 CSP 的旧版浏览器的用户提供保护。

• 其中 xss 语法能够看到
• 语法

X-XSS-Protection: 0
// 这一条表明关闭 XSS 保护
X-XSS-Protection: 1
X-XSS-Protection: 1; mode=block
// 这一条是咱们看到的，表明启用了 xss 保护
X-XSS-Protection: 1; report=<reporting-uri>
复制代码

• 其中涉及一个重要的概念就是 CSP
• MDN 是这么解释的

HTTP 响应头 Content-Security-Policy 容许站点管理者在指定的页面控制用户代理的资源。除了少数例外，这条政策将极大地指定服务源 以及脚本端点。这将帮助防止跨站脚本攻击（Cross-Site Script） (XSS).

• 固然上面都是九牛一毛，须要你们本身详细的看看 MDN 的解释

• 怎么启用 CSP ?

  • 一、http 头信息 的 Content Security Policy

  • 二、用 另一种是经过网页的 标签

// header
Content-Security-Policy: default-src https:

// meta tag
<meta 
http-equiv="Content-Security-Policy" 
content="default-src https:">
复制代码

三、搭建一个简单的 node-express 环境

3.1 搭建环境

• 1/搭建环境：(固然咱们默认你安装了 node express npm )

mkdir demo 
// 新建一个 demo 文件夹
cd demo 
express -e ./ 
// 搭建 express 脚手架，ejs 和模板引擎
npm install
// 安装依赖包
复制代码

3.2 修改代码

• 2/设置路由 routes/index.js

router.get("/", function(req, res, next) {
    res.set("X-XSS-Protection", 0);
    //关掉浏览器对XSS的检测
    res.render("index", {title: "Express", xss: req.query.xss});
}); //query是express获取search的字段
复制代码

• 3/在 view/index.ejs 中添加

<div class="">
	<%- xss %><!--'-'表示容许输入html，不须要转义--> </div>
复制代码

• 4/看下路由设置一些端口 在 bin/www

//找到这一行
var port = normalizePort(process.env.PORT || "3000");
app.set("port", port);

// 咱们改为
var port = normalizePort(process.env.PORT || "6060");
console.log("listen on port:6060");
app.set("port", port);
复制代码

固然这个端口号无所谓，将来不冲突，因此选个吉利的数字，console 是为了在控制台看到本身成功 start 了

• 5/ 开启服务

npm start
复制代码

• 6/ 在http://localhost:6060/后输入

?xss=<iframe src="//baidu.com/h.html"></iframe>或者?xss=<img src="null" onerror="alert("1")">或者?xss=<p onclick="alert("1")">点我点我</p>

• 进行模仿 XSS 的放射型攻击。第一个效果以下图：

• 7/打开你的浏览器的控制台，咱们来看看状况,看到 ELments 中，查看在 url 中输入的连接是否成功的入侵到咱们的 div 中了。

---

其实 XSS 虽然咱们平时在开发的时候没有特别注意，

下一篇文章

• 我会搭建一个存储型的 node-express-xss 环境

• 此次咱们建立一个复杂的 demo
• 经过构建 Node 服务和创建一个评论功能，使用 ajax 实例演示 XSS 的攻击和预防

主要由服务器端转义，客户端反转义，再DomParse，再过滤,使用encode.js和 domparse.js第三方库对文本进行解码和DOM parse操做

参考

• imooc (https://www.imooc.com/)
• MDN (https://developer.mozilla.org)
• CSP 图解（google 图片）