本文正在参加「金石方案 . 瓜分6万现金大奖」

关于阅读器安全首要分为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进犯？

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端口发动');
})

阅读器安全：什么是XSS进犯？

当咱们在拜访3000端口时在后面直接接一段script代码，看看会是什么作用呢？

阅读器安全：什么是XSS进犯？

能够看到，咱们直接被弹出的提示框，这便是反射型XSS进犯。

  1. 基于DOM的XSS进犯 — 网络绑架，修改页面后，再让用户看到。

XSS防护方法

  1. 在服务端将script标签转义掉,( 服务器对输入的脚本进行过滤或转码);
function changeCode(str) {
  return str.replace('<', '&lt');
}
// 在回来数据给到阅读器去渲染的时分，咱们先将数据交给转义函数处理一下数据
res.render('index', { title: 'Express', xss: changeCode(req.query.xss) })

那咱们上面的比如来看一下作用

阅读器安全：什么是XSS进犯？

阅读器安全：什么是XSS进犯？
这样就不会把它识别为一段歹意脚本代码了。

  1. 充沛运用 CSP (约束加载其他域下的资源文件、禁止向第三方提交数据)

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

  1. cookie设置 – HttpOnly (设置这个特点之后cookie无法经过js去document.cookie读取)