浏览器安全：什么是XSS攻击？

 本文正在参加「 . 」 

关于浏览器安全主要分为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中注入恶意脚本，从而用户在浏览页面时注入的脚本对用户实施攻击）

XSS攻击影响

1. 修改DOM,伪造页面，欺骗用户，获取账号密码等私密信息;
2. 在内面内生成浮窗广告;
3. 可以监听用户的行为,比如addEventListener('keydown') // 监听用户的键盘敲击事件
4. 窃取cookie信息
5. 获取页面数据等
6. ...

XSS攻击方式

1. 存储型XSS攻击：存储到DB后读取时注入恶意脚本，比如在一些评论区或者个性签名等可以自由编写的地方，在评论的时候写一段script脚本，这样数据就会被保存到数据库，当别人访问时，加载这段评论时，浏览器就会识别为一段javascript脚本代码来执行，并且只要不删除，就一直在，危害较大。
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端口启动');
})

当我们在访问3000端口时在后面直接接一段script代码，看看会是什么效果呢？

可以看到，我们直接被弹出的提示框，这就是反射型XSS攻击。

3. 基于DOM的XSS攻击 --- 网络劫持，修改页面后，再让用户看到。

XSS防御方式

1. 在服务端将script标签转义掉,( 服务器对输入的脚本进行过滤或转码);

function changeCode(str) {
  return str.replace('<', '&lt');
}
// 在返回数据给到浏览器去渲染的时候，我们先将数据交给转义函数处理一下数据

res.render('index', { title: 'Express', xss: changeCode(req.query.xss) })

那我们上面的例子来看一下效果

这样就不会把它识别为一段恶意脚本代码了。

2. 充分使用 CSP (限制加载其他域下的资源文件、禁止向第三方提交数据)

内容安全策略 (CSP) 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。

3. cookie设置 - HttpOnly (设置这个属性之后cookie无法通过js去document.cookie读取)