初探 XSS

西南_张家辉
990 阅读4分钟

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

XSS

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

1、分类

  • 反射型(非持久型)

    • Url 形成一个攻击的链接。

  • 储存型(持久型)

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

2、看一个栗子🌰

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

iamge

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

2.2 demo2(Google 翻译)

  • 进入我们常用的 google 翻译
  1. 进入网站 输入两个 哈哈 进行翻译

image

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

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

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

  • 看看情况

image

  • 可以看到参数 q 没错，但是浏览器做了 xss 的筛选

image

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

4.我们用 firefox 重新试试上面的 demo(当然你可以在 MDN 直接输入x-xss-protection)

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

image

  • 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 ?

    • 1、http 头信息 的 Content Security Policy

    • 2、用 另外一种是通过网页的 标签

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

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

3、搭建一个简单的 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 的放射型攻击。第一个效果如下图：

image

  • 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 图片）
avatar
文章
阅读
粉丝