浏览器安全:什么是XSS攻击?
theme: nico
本文正在参加「金石计划 . 瓜分6万现金大奖」
关于浏览器安全主要分为web页面安全
、浏览器网络安全
和浏览器系统安全
,今天我们主要聊一聊web页面安全
里面的XSS(Cross Site Scripting)跨站脚本攻击
同源策略
协议号 - 域名 - 端口号
,只有当这三个条件同时满足相同时,我们就称之为符合同源策略,同源策略也可以看做是一个协议。
http:// www.baidu.com :8080 /test
协议号 域名 端口号 路径
复制代码
通常我们导航的url都是由这四部分组成的。
如果两个 URL 的协议、域名和端口都相同,我们就称这两个 URL 同源
http://www.baidu.com:8080/test1
http://www.baidu.com:8080/test2
浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM
的。两个不同的源之间若想要相互访问资源或者操作 DOM
,那么会有一套基础的安全策略的制约,我们把这称为同源策略
。
同源策略主要表现在三个方面: 1) DOM、 2) Web数据、 3) 网络
DOM
同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作。
Web数据
同源策略限制了不同源的站点读取当前站点的 Cookie
、IndexDB
、LocalStorage
等数据。
网络
同源策略限制了通过 XMLHttpRequest
等方式将站点的数据发送给不同源的站点。
我们了解了同源策略会隔离不同源的 DOM
、页面数据和网络通信,进而实现 Web
页面的安全性。
不过安全性和便利性是相互对立的,让不同的源之间绝对隔离,无疑是最安全的措施,但这也会使得 Web 项目难以开发和使用
。因此我们就要在这之间做出权衡,让出一些安全性来满足灵活性;而出让安全性又带来了很多安全问题,最典型的是 XSS
攻击和 CSRF
攻击,这篇文章我们主要聊一聊 XSS
攻击
XSS(Cross Site Scripting)
跨站脚本攻击指的是自己的网站运行了别的网站里面的代码,攻击原理是原本需要接受数据但是一段脚本放置在了数据中: (黑客向html文件中或者DOM中注入恶意脚本,从而用户在浏览页面时注入的脚本对用户实施攻击)
XSS攻击影响
- 修改DOM,伪造页面,欺骗用户,获取账号密码等私密信息;
- 在内面内生成浮窗广告;
- 可以监听用户的行为,比如addEventListener('keydown') // 监听用户的键盘敲击事件
- 窃取cookie信息
- 获取页面数据等
- ...
#### XSS攻击方式
存储型XSS攻击
:存储到DB后读取时注入恶意脚本,比如在一些评论区或者个性签名等可以自由编写的地方,在评论的时候写一段script
脚本,这样数据就会被保存到数据库,当别人访问时,加载这段评论时,浏览器就会识别为一段javascrip
t脚本代码来执行,并且只要不删除,就一直在,危害较大。反射型XSS攻击
:是通过URL
参数直接注入,一般是使用alert
来探测站点是否防御,直接攻击的使用src
来引入自己的脚本。
我们来看一下效果,使用node
借助express
开启一个后端服务,模拟
一个服务器端
index.js
``` const express = require('express') const path = require('path') const app = express()
app.set('views', path.join(__dirname, 'views')); app.engine('html', require('ejs').renderFile); app.set('view engine', 'html');
app.get('/', function(req, res, next) { res.render('index', { title: 'Express', xss: req.query.xss }) })
app.listen(3000,() => { console.log('服务已在3000端口启动'); })
```
当我们在访问3000端口时在后面直接接一段script代码,看看会是什么效果呢?
可以看到,我们直接被弹出的提示框,这就是反射型XSS攻击
。
基于DOM的XSS攻击
--- 网络劫持,修改页面后,再让用户看到。
XSS防御方式
- 在服务端将script标签转义掉,(
服务器对输入的脚本进行过滤或转码
);
``` function changeCode(str) { return str.replace('<', '<'); } // 在返回数据给到浏览器去渲染的时候,我们先将数据交给转义函数处理一下数据
res.render('index', { title: 'Express', xss: changeCode(req.query.xss) }) ```
那我们上面的例子来看一下效果
这样就不会把它识别为一段恶意脚本代码了。
- 充分使用
CSP
(限制加载其他域下的资源文件、禁止向第三方提交数据)
内容安全策略 (CSP) 是一个额外的安全层,用于检测并削弱某些特定类型的攻击,包括跨站脚本 (XSS) 和数据注入攻击等。
- cookie设置 - HttpOnly (设置这个属性之后
cookie
无法通过js去document.cookie读取)