场景

2025年01月17日

柏拉文

越努力，越幸运

一、竞态请求

1.1 认识

前端同一个接口频繁调用, 在网络不好的情况下, 会发生一下场景:

场景一: 当我们在请求列表数据的时候，在翻页的时候出现上次请求的时长大于最新请求的时长，出现了覆盖最新请求的数据的问题
场景二: 在做项目时候发现，一个页面中有多个Tab，每个Tab对应的数据调用的是同一个接口，参数不同，在快送切换Tab时，展示的是前一个请求返回的数据

造成了数据覆盖、混乱的问题, 所以我们的做法是: 前端同一个接口频繁调用，只处理最后一次返回

1.2 方案

1. 中断请求

2. 交互限制: 一旦调用接口之后, 立马展示 Loading , 不让用户继续点击

3. 请求记录(请求标记): 利用函数作用域的特点, 为请求函数传入全局状态标记。之后在我们每一次调用请求函数的同时, 更新全局状态标记, 此时, 请求函数中还是维持着各自调用时传入的状态。

<template>
  <div>
    <button @click="handleRequest">按钮</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const currentTime = ref(0);

function requestFun(){
  return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve("接口数据");
    },2000);
  });
}

function test(time){
  requestFun().then(res=>{
    if(currentTime.value === time){
      console.log(res)
    }
  });
}

const handleRequest = ()=>{
  currentTime.value = +new Date();
  test(currentTime.value);
}
</script>

二、Iframe 嵌入

2.1 认识

1. Iframe 可以嵌入百度首页吗? 为什么?

2. 如何防止 Iframe 被其他网站嵌入？

2.2 原因

iframe 嵌入百度首页会出现 Refused to frame 'https://www.baidu.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' 拒绝访问。

遇到的错误消息是由 Content Security Policy (CSP) 引起的，CSP 是一种浏览器安全机制，旨在防止恶意攻击，特别是跨站脚本攻击 (XSS)。这个错误消息表明，在嵌套 www.baidu.com 的页面中，存在一个祖先页面违反了 CSP 指令。这段 CSP 指令的含义是，只有在当前页面的祖先是本身（self）或指定的一组特定域名下，才允许通过 iframe 嵌入。如果嵌入的页面不满足这些条件，浏览器就会拒绝加载这个 iframe，并抛出类似于你提供的错误消息。

2.3 方案

1. 配置 CSP 指令: Content Security Policy (CSP) 是一个更为强大的网页安全策略，它不仅可以防止页面被嵌套，还可以帮助预防各种类型的攻击，例如XSS攻击。你可以通过设置 frame-ancestors 指令来指定哪些页面可以嵌套当前页面。请注意: 前端配置 Content-Security-Policy: frame-ancestors 是无效的。必须在 Nginx 或者服务端配置。如果你有权限修改当前页面的 CSP 指令, 你可以将需要允许的域名添加到 frame-ancestors 指令中。在你的例子中，添加你的 web 应用域名到 CSP 中可能是解决问题的一种方法。 Content Security Policy (CSP) 与 X-Frame-Options 相比, 有更高的控制和配置能力。

Content-Security-Policy: frame-ancestors 'self' https://chat.baidu.com http://mirror-chat.baidu.com https://fj-chat.baidu.com https://hba-chat.baidu.com https://hbe-chat.baidu.com https://njjs-chat.baidu.com https://nj-chat.baidu.com https://hna-chat.baidu.com https://hnb-chat.baidu.com http://debug.baidu-int.com https://example.com;

2. 配置 X-Frame-Options 响应头: X-Frame-Options 响应头是用来给浏览器指示允许一个页面可否在 <frame>、<iframe>、<embed> 或者 <object> 中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面，从而避免点击劫持攻击。X-Frame-Options 是一个 HTTP 响应头，用于控制网页是否允许被嵌套在 iframe 中。可以设置以下三个值之一:

DENY: 表示页面不能被任何 iframe 嵌套。
SAMEORIGIN: 表示只能由同源域名下的页面嵌套。
ALLOW-FROM uri: 表示页面可以被指定的源 uri 嵌套。

3. 通过 JavaScript 检查: 你可以使用 JavaScript 来检查当前页面是否在 iframe 中加载。如果页面被嵌套在不允许的环境中，可以通过脚本跳转或显示警告。

if (window.top !== window.self) {
    // 页面被嵌入在 iframe 中
    // 可以跳转到一个安全的页面，或显示警告
    window.top.location = window.location;
}

4. 通过 HTTP Referer 检测: 通过检查 HTTP 请求头中的 Referer 字段，你可以判断请求当前页面的来源。如果来源不是预期的域名，可以拒绝加载内容。

if (document.referrer.indexOf('https://trusted-site.com') !== 0) {
    // 如果 referrer 不属于信任的域名，进行跳转或其他处理
    window.location = "https://www.example.com";
}

三、浏览器 Tab 通信

一、竞态请求​

1.1 认识​

1.2 方案​

二、Iframe 嵌入​

2.1 认识​

2.2 原因​

2.3 方案​

三、浏览器 Tab 通信​

3.1 WebSocket​

3.2 SharedWorker​

3.3 ServiceWorker​

3.4 BroadcastChannel​

3.5 LocalStorage Storage​

3.2​

一、竞态请求

1.1 认识

1.2 方案

二、Iframe 嵌入

2.1 认识

2.2 原因

2.3 方案

三、浏览器 Tab 通信

3.1 WebSocket

3.2 SharedWorker

3.3 ServiceWorker

3.4 BroadcastChannel

3.5 LocalStorage Storage

3.2