【浏览器内多个标签页之间的通讯、XSS和CSRF】

本题主要考察多页应用中 各个页签之间数据交互的技术手段。

Redux vuex 这个是单页面应用里跨页面状态管理 多页应用 跨页面数据传递

实现多页通讯主要有利用

• 浏览器数据存储方式：浏览器数据存储的方式主要用本地存储方式解决，即调用localStorage、Cookie等本地存储方式。
• 服务器方式：主要使用websocket技术使多页签都监听服务器推送事件来获得其他页签发送的数据。 haredWorker

一、浏览器内多个标签页之间的通讯

1. 浏览器存储方式

1.1 localStorage

1. 在一个标签页里面使用localStorage.setItem(key,value)添加(修改、删除)内容;
2. 在另一个标签页里面监听storage事件。即可得到localstorge存储的值，实现不同标签页之间的通信。

// 在第一个页面中 添加
localStorage.setItem(key,value) 
// 删除
localStorage.removeItem(key,value) 

// 添加监听 storage 的变化
window.onload = function () {
    window.addEventListener('storage', function (event) {
      // event 事件对象包含 domain newValue oldValue key
        console.log(event.key + '=' + event.newValue);
    })
}
1
2
3
4
5
6
7
8
9
10
11
12

1.2 cookie+setInterval

将要传递的信息存储在cookie中，每隔一定时间读取cookie信息， 即可随时获取要传递的信息。

1. 在A页面将需要传递的消息存储在cookie当中

2. 在B页面设置setInterval,以一定的时间间隔去读取cookie的值。(不停地问cookie)

// 设置 cookie
document.cookie = "name=" + name;

// 获取 cookie
window.onload = function () {
	function getCookie(key) {
	  if(document.cookie){
	  	return JSON.parse("{\""+document.cookie.replace(/;\s+/gim, '","').replace(/=/gim, "\":\""+"\"}")[;
	}else{
		return '';
	}
	setInterval(function(){
		console.log("name"+getCookie("name"));
	},5000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. 监听服务器事件

2.1 websocket通讯

WebSocket 是全双工（full-duplex）通信自然可以实现多个标签页之间的通信

（服务器可以主动发数据给浏览器；浏览器也可以主动发数据给服务器）。

WebSocket 是HTML 5新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道，比如说，服务器可以在任意时刻发送消息给浏览器。

为什么传统的HTTP协议不能做到WebSocket实现的功能?
这是因为HTTP协议是一一个请求-响应协议，请求必须先由浏览器发给服务器，服务器才能响应这个请求，再把数据发送给浏览器。

也有人说，HTTP协议其实也能实现啊，比如用轮询或者Comet。
这个机制的缺点一是实时性不够, 二是频繁的请求会给服务器带来极大的压力。Comet本质上也是轮询，但是在没有消息的情况下，服务器先拖一段时间， 等到有消息了再回复。这个机制暂时地解决了实时性问题，但是它带来了新的问题：以多线程模式运行的服务器会让大部分线程大部分时间都处于挂起状态，极大地浪费服务器资源。另外，一个HTTP连接在长时间没有数据传输的情况下，链路上的任何一个网关都可能关闭这个连接,而网关是我们不可控的，这就要求Comet连接必须定期发一些ping数据表示连接正常工作”。

WebSocket并不是全新的协议，而是利用了HTTP协议来建立连接。

为什么WebSocket连接可以实现全双工通信而HTTP连接不行呢?
实际上通讯协议是建立在TCP协议之上的, TCP协议本身就实现了全双工通信，但是HTTP协议的请求-应答机制限制了全双工通信。
WebSocket连接建立以后，其实只是简单规定了一下:接下来，咱们通信就不使用HTTP协议了，直接互相发数据吧。安全的WebSocket连接机制和HTTPS类似。首先，浏览器用ws://xx创建WebSocket连接时， 会先通过HTTPS创建安全的连接，然后，该HTTPS连接升级为WebSocket连接，底层通信走的仍然是安全的SSL/TLS协议。

// Create WebSocket connection.
const socket = new Websocket("ws://localhost:8080");

// Connection opened
socket.addEventListener("open", function (event) {
  socket.send("Hello Server!");
});

// Listen for messages
socket.addEventListener("message ", function (event) {
  console.log("Message from server ", event.data);
});
1
2
3
4
5
6
7
8
9
10
11
12

2.2 SharedWorker

普通的 webworker 直接使用 new Worker() 即可创建，这种 webworker 是当前页面专有的。然后还有种共享 worker(SharedWorker)，这种是可以多个标签页、iframe共同使用的。SharedWorker 可以被多个 window 共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)
首先新建一个is文件worker.js, 具体代码如下: .

// shareWorker 所要用到的js文件，不必打包到项目中，直接放到服务器即可

let data = " ";
let onconnect = function (event) {
  let port = event.ports[0];
  port.onmessage = function (e) {
    if (e.data === "get") {
      port.postMessage(data);
    } else {
      data = e.data;
    }
  };
};
1
2
3
4
5
6
7
8
9
10
11
12
13

示例代码：
try {
  var worker = new SharedWorker("worker.js");
  var getBtn = document.getElementById("get");
  var setBtn = document.getElementById("set");
  var txt = document.getElementById("txt");
  var log = document.getElementById("log");

  worker.port.addEventListener("message", function (e) {
    log.innerHTML = e.data;
    console.log(" --- 获取到数据 e.data --- ", e.data);
  });

  worker.port.start();

  setBtn.addEventListener(
    "click",
    function (e) {
      worker.port.postMessage(txt.value);//发数据
    },
    false
  );

  getBtn.addEventListener(
    "click",
    function (e) {
      worker.port.postMessage("get"); //取数据
    },
    false
  );
} catch (error) {
  console.log(" --- error --- ", error);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

答题思路---浏览器多页签通讯实现

1. 可以借助 浏览器localstorage 方式实现，cookie+setInterval实现；websocket全双工实现，shareworker实现；
2. 如果追问:
	（1）localstorage
		localstorage.setItem 传数据，
		监听window上的storage事件，就可以获得数据
	（2）cookie+setInterval 
		document.cookie发送数据
		setInterval不停地去cookie上取数据
	（3）websocket实现
		websocket是全双工通信方式，多页签可以将服务器作为桥梁来实现通信
	（4）shareworker
		html5新技术，共享worker
1
2
3
4
5
6
7
8
9
10
11
12
13
14

二、XSS和CSRF

明确考察点
明确XSS和CSRF是什么
明确XSS和CSRF攻击的特点
如何防范XSS和CSRF攻击

1 XSS(Cross Site Script) 跨站脚本攻击

XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。

攻击者对客户端网页注入的恶意脚本一般包括 JavaScript，有时也会包含 HTML 和 Flash。
有很多种方式进行 XSS 攻击，但它们的共同点为：将一些隐私数据像 cookie、session 发送给攻击者，将受害者重定向到一个由攻击者控制的网站，在受害者的机器上进行一些恶意操作。

xss 黑客攻击浏览器（恶意脚本），篡改浏览器正常展示，窃取用户信息

XSS 攻击可以分为 3 类：反射型（非持久型）、存储型（持久型）、基于 DOM。

反射型 XSS 的恶意代码存在目标网站URL里。（通过URL参数直接注入）

存储型 XSS 的恶意代码存在目标网站数据库里（网站服务器取出并拼接在html中）

DOM型由浏览器取出url中的恶意代码并执行，属于JS自身的漏洞，如eval()。（会修改页面脚本结构）

1.1 防御XSS

1. HttpOnly 防止劫取 Cookie
   HttpOnly 最早由微软提出，至今已经成为一个标准。浏览器将禁止页面的Javascript 访问带有 HttpOnly 属性的Cookie。

2. 输入过滤
   对于用户的任何输入要进行检查、过滤和转义。

3. 输出转义
   服务端的输出也可能会存在问题。一般来说，除富文本的输出外，在变量输出到 HTML 页面时，可以使用编码或转义的方式来防御 XSS 攻击。

2 CSRF 跨站请求伪造

跨站请求伪造（Cross Site Request Forgery，通常简称为：CSRF）

具体过程：

1. 用户登录a.com，验证通过后，浏览器会保留用户的登录凭证Cookie
2. 用户在没有退出登录的情况下访问恶意网站b.com
3. 然后b.com要求访问a.com，向a.com发起一个请求
4. 根据b.com的请求，浏览器会把访问a时存在本地的cookie带到请求中，然后访问被攻击网站a.com
5. 从而伪造用户请求，在并未授权的情况下执行一些自定义事件：
   • 模拟表单提交盗取用户资金。实际上就是上面所说的POST CSRF攻击
   • 篡改目标网站上的用户数据。
   • 盗取用户隐私数据

2.1 防范措施

1. 方法一：同源验证
在HTTP协议中，每一个异步请求都会携带两个Header，用于标记来源域名：

• Origin Header
• Referer Header

这两个Header在浏览器发起请求时，大多数情况会自动带上，并且不能由前端自定义内容。 服务器可以通过解析这两个Header中的域名，确定请求的来源域。

2. 方法二：token：

利用CSRF 攻击者不能获取到 Cookie 等信息，只是使用。将cookie换成token，

• 直接利用token服务器进行解密验证。
• 双token验证：服务器端比较http请求报文header中的Authorization和cookie中的token是否一致。

3. 加验证码验证

如验证码、密码、指纹等，验证码会强制用户必须与服务器进行交互，才能完成请求。但是用户体验不好。

回答思路-
1.XSS跨站脚本攻击  CSRF 跨站请求伪造
2. XSS 浏览器向服务器请求时被诸如脚本攻击
	分为三种，反射型（非持久型）、存储型（持久型）、基于DOM
	防范手段：1. 输入过滤 
			2. 输出转义
			3. 加httponly请求头 锁死cookie
3. csrf 黑客通过网站b 诱使用户去访问已经登录的网站A，进行违背用户意愿的请求，造成用户损失
  防范手段：1. 服务器验证 http请求的refer头信息
  		  2. 请求的时候传 token
  		  3. 加验证码 
1
2
3
4
5
6
7
8
9
10
11