关于浏览器安全主要分为web页面安全
、浏览器网络安全
和浏览器系统安全
,今天我们主要聊一聊web页面安全
里面的XSS(Cross Site Scripting)跨站脚本攻击
同源策略
协议号 - 域名 - 端口号
,只有当这三个条件同时满足相同时,我们就称之为符合同源策略,同源策略也可以看做是一个协议。
https://www.baidu.com :8080/test
协议号 域名端口号路径
复制代码
通常我们导航的url都是由这四部分组成的。
如果两个 URL 的协议、域名和端口都相同,我们就称这两个 URL 同源
https://www.baidu.com:8080/test1
https://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中注入恶意脚本,从而用户在浏览页面时注入的脚本对用户实施攻击)
![](https://i-blog.csdnimg.cn/blog_migrate/48f015f83971e43d480a0a78569f045a.png)
XSS攻击影响
1.修改DOM,伪造页面,欺骗用户,获取账号密码等私密信息;
2.在内面内生成浮窗广告;
3.可以监听用户的行为,比如addEventListener(‘keydown’) // 监听用户的键盘敲击事件
4.窃取cookie信息
5.获取页面数据等
6…
XSS攻击方式
1.存储型XSS攻击
:存储到DB后读取时注入恶意脚本,比如在一些评论区或者个性签名等可以自由编写的地方,在评论的时候写一段script
脚本,这样数据就会被保存到数据库,当别人访问时,加载这段评论时,浏览器就会识别为一段javascrip
t脚本代码来执行,并且只要不删除,就一直在,危害较大。
2.反射型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端口启动');
})
![](https://i-blog.csdnimg.cn/blog_migrate/1bab7f52f88b8b4307fd26776a710d1c.png)
当我们在访问3000端口时在后面直接接一段script代码,看看会是什么效果呢?
![](https://i-blog.csdnimg.cn/blog_migrate/4ee2b7338c4d079035cf6a84ff9da127.png)
可以看到,我们直接被弹出的提示框,这就是反射型XSS攻击
。
3.基于DOM的XSS攻击
— 网络劫持,修改页面后,再让用户看到。
XSS防御方式
1.在服务端将script标签转义掉,( 服务器对输入的脚本进行过滤或转码
);
function changeCode(str) {return str.replace('<', '<');
}
// 在返回数据给到浏览器去渲染的时候,我们先将数据交给转义函数处理一下数据
res.render('index', { title: 'Express', xss: changeCode(req.query.xss) })
那我们上面的例子来看一下效果
![](https://i-blog.csdnimg.cn/blog_migrate/4bd5835cb64fc9ade0976a1222d440cc.png)
2.充分使用 CSP
(限制加载其他域下的资源文件、禁止向第三方提交数据)
内容安全策略 (CSP) 是一个额外的安全层,用于检测并削弱某些特定类型的攻击,包括跨站脚本 (XSS) 和数据注入攻击等。
3.cookie设置 - HttpOnly (设置这个属性之后cookie
无法通过js去document._cookie_读取)
最后
最近还整理一份JavaScript与ES的笔记,一共25个重要的知识点,对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识,提升工作效率。
有需要的小伙伴,可以点击下方卡片领取,无偿分享