实现跨域必须要知道的知识点

news2025/1/10 23:48:36

目录

同源策略

iframe和多窗口通信

片段识别符

window.postMessage()

LocalStorage

Storage接口：

概述

属性和方法

Storage.setItem()

Storage.getItem()

Storage.removeItem()

Storage.clear()

Storage.key()

storage 事件

同源策略

浏览器安全的基石是“同源政策”（same-origin policy）。很多开发者都知道这一点，但了解得不全面。

最初，它的含义是指，A 网页设置的 Cookie，B 网页不能打开，除非这两个网页“同源”。

所谓“同源”指的是“三个相同”。

  • 协议相同

  • 域名相同

  • 端口相同（这点可以忽略，详见下文）

注意：标准规定端口不同的网址不是同源（比如8000端口和8001端口不是同源），但是浏览器没有遵守这条规定。实际上，同一个网域的不同端口，是可以互相读取 Cookie 的。

限制范围

目前，如果非同源，共有三种行为受到限制。

（1） 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。（后面这两个都类似于存储数据的数据库）

（2） 无法接触非同源网页的 DOM。

（3） 无法向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应）。

另外，通过 JavaScript 脚本可以拿到其他窗口的window对象。

如果是非同源的网页，目前允许一个窗口可以接触其他网页的window对象的九个属性和四个方法。

- window.closed
- window.frames
- window.length
- window.location
- window.opener
- window.parent
- window.self
- window.top
- window.window
- window.blur()
- window.close()
- window.focus()
- window.postMessage()

Cookie 是服务器写入浏览器的一小段信息，只有同源的网页才能共享。

如果两个网页一级域名相同，只是次级域名不同，浏览器允许通过设置document.domain共享 Cookie。

举例来说，A 网页的网址是http://w1.example.com/a.html，B 网页的网址是http://w2.example.com/b.html，那么只要设置相同的document.domain，两个网页就可以共享 Cookie。

因为浏览器通过document.domain属性来检查是否同源。

// 两个网页都需要设置
document.domain = 'example.com';

注意，A 和 B 两个网页都需要设置document.domain属性，才能达到同源的目的。

因为设置document.domain的同时，会把端口重置为null，因此如果只设置一个网页的document.domain，会导致两个网址的端口不同，还是达不到同源的目的。

现在，A 网页通过脚本设置一个 Cookie。

document.cookie = "test1=hello";

B 网页就可以读到这个 Cookie。

var allCookie = document.cookie; 
//这里就可以读取到前面设置的cookie

注意，这种方法只适用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexedDB 无法通过这种方法，规避同源政策，而要使用 PostMessage API。

另外，服务器也可以在设置 Cookie 的时候，指定 Cookie 的所属域名为一级域名，比如example.com。

Set-Cookie: key=value; domain=example.com; path=/

这样的话，二级域名和三级域名不用做任何设置，都可以读取这个 Cookie。

iframe和多窗口通信

iframe元素可以在当前网页之中，嵌入其他网页。

每个iframe元素形成自己的窗口，即有自己的window对象。iframe`窗口之中的脚本，可以获得父窗口和子窗口。

但是，只有在同源的情况下，父窗口和子窗口才能通信；如果跨域，就无法拿到对方的 DOM。

如，父窗口运行下面的命令，如果iframe窗口不是同源，就会报错。

document
.getElementById("myIFrame")
.contentWindow
.document
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.

上面命令中，父窗口想获取子窗口的 DOM，因为跨域导致报错。

反之亦然，子窗口获取主窗口的 DOM 也会报错。

window.parent.document.body
// 报错

这种情况不仅适用于iframe窗口，还适用于window.open方法打开的窗口，即，只要跨域，父窗口与子窗口之间就无法通信。

如果两个窗口一级域名相同，只是二级域名不同，那么只要设置document.domain属性，就可以规避同源政策，拿到 DOM。

片段识别符

片段标识符（fragment identifier）指的是，URL 的#号后面的部分，比如http://example.com/x.html#fragment的#fragment。如果只是改变片段标识符，页面不会重新刷新。

父窗口可以把信息，写入子窗口的片段标识符。

var src = originURL + '#' + data;
//将要写入的信息写入片段标识符中
document.getElementById('myIFrame').src = src;
//这里再获取src

上面代码中，父窗口把所要传递的信息，写入 iframe 窗口的片段标识符。

子窗口通过监听hashchange事件得到通知。

window.onhashchange = checkMessage;
​
function checkMessage() {
  var message = window.location.hash;
  // ...
}

同样的，子窗口也可以改变父窗口的片段标识符。

parent.location.href = target + '#' + hash;

window.postMessage()

上面的这种方法属于破解，HTML5 为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。

这个 API 为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。举例来说，父窗口aaa.com向子窗口bbb.com发消息，调用postMessage方法就可以了。

// 父窗口打开一个子窗口
var popup = window.open('http://bbb.com', 'title');
// 父窗口向子窗口发消息
popup.postMessage('Hello World!', 'http://bbb.com');

postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即“协议 + 域名 + 端口”。也可以设为*，表示不限制域名，向所有窗口发送。

子窗口向父窗口发送消息的写法类似。

// 子窗口向父窗口发消息
window.opener.postMessage('Nice to see you', 'http://aaa.com');

父窗口和子窗口都可以通过message事件，监听对方的消息。

// 父窗口和子窗口都可以用下面的代码，
// 监听 message 消息
window.addEventListener('message', function (e) {
  console.log(e.data);
},false);

message事件的参数是事件对象event，提供以下三个属性。

  • event.source：发送消息的窗口

  • event.origin: 消息发向的网址

  • event.data: 消息内容

下面的例子是，子窗口通过event.source属性引用父窗口，然后发送消息。

window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
  event.source.postMessage('Nice to see you!', '*');
    //发送消息的窗口    
}

上面代码有几个地方需要注意：

首先，receiveMessage函数里面没有过滤信息的来源，任意网址发来的信息都会被处理。

其次，postMessage方法中指定的目标窗口的网址是一个星号，表示该信息可以向任意网址发送。

通常来说，这两种做法是不推荐的，因为不够安全，可能会被恶意利用。

event.origin属性可以过滤不是发给本窗口的消息。

window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
  if (event.origin !== 'http://aaa.com') return;
    //event.origin: 消息发向的网址
  if (event.data === 'Hello World') {
    //event.data: 消息内容
    event.source.postMessage('Hello', event.origin);
    //event.source：发送消息的窗口
  } else {
    console.log(event.data);
  }
}

LocalStorage

通过window.postMessage，读写其他窗口的 LocalStorage 也成为了可能。

下面是一个例子，主窗口写入 iframe 子窗口的localStorage。

window.onmessage = function(e) {
  if (e.origin !== 'http://bbb.com') {
    return;
  }
  var payload = JSON.parse(e.data);
  localStorage.setItem(payload.key, JSON.stringify(payload.data));
};

上面代码中，子窗口将父窗口发来的消息，写入自己的 LocalStorage。

父窗口发送消息的代码如下。

var win = document.getElementsByTagName('iframe')[0].contentWindow;
var obj = { name: 'Jack' };
win.postMessage(
  JSON.stringify({key: 'storage', data: obj}),
  'http://bbb.com'
);

加强版的子窗口接收消息的代码如下。

window.onmessage = function(e) {
  if (e.origin !== 'http://bbb.com') return;
  var payload = JSON.parse(e.data);
  switch (payload.method) {
    case 'set':
      localStorage.setItem(payload.key, JSON.stringify(payload.data));
      break;
    case 'get':
      var parent = window.parent;
      var data = localStorage.getItem(payload.key);
      parent.postMessage(data, 'http://aaa.com');
      break;
    case 'remove':
      localStorage.removeItem(payload.key);
      break;
  }
};

加强版的父窗口发送消息代码如下。

var win = document.getElementsByTagName('iframe')[0].contentWindow;
var obj = { name: 'Jack' };
// 存入对象
win.postMessage(
  JSON.stringify({key: 'storage', method: 'set', data: obj}),
  'http://bbb.com'
);
// 读取对象
win.postMessage(
  JSON.stringify({key: 'storage', method: "get"}),
  "*"
);
window.onmessage = function(e) {
  if (e.origin != 'http://aaa.com') return;
  console.log(JSON.parse(e.data).name);
};

Storage接口：

概述

Storage 接口用于脚本在浏览器保存数据。

两个对象部署了这个接口：window.sessionStorage和window.localStorage。

sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的其他方面都一致。

保存的数据都以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。

这个接口很像 Cookie 的强化版，能够使用大得多的存储空间。目前，每个域名的存储上限视浏览器而定，Chrome 是 2.5MB，Firefox 和 Opera 是 5MB，IE 是 10MB。其中，Firefox 的存储空间由一级域名决定，而其他浏览器没有这个限制。也就是说，Firefox 中，a.example.com和b.example.com共享 5MB 的存储空间。另外，与 Cookie 一样，它们也受同域限制。某个网页存入的数据，只有同域下的网页才能读取，如果跨域操作会报错。

属性和方法

Storage 接口只有一个属性。

  • Storage.length：返回保存的数据项个数。

window.localStorage.setItem('foo', 'a');
window.localStorage.setItem('bar', 'b');
window.localStorage.setItem('baz', 'c');
​
window.localStorage.length // 3

 该接口提供5个方法。

Storage.setItem()

Storage.setItem()方法用于存入数据。它接受两个参数，第一个是键名，第二个是保存的数据。如果键名已经存在，该方法会更新已有的键值。该方法没有返回值。

window.sessionStorage.setItem('key', 'value');
window.localStorage.setItem('key', 'value');

 

注意，Storage.setItem()两个参数都是字符串。如果不是字符串，会自动转成字符串，再存入浏览器。

window.sessionStorage.setItem(3, { foo: 1 });
window.sessionStorage.getItem('3') // "[object Object]"

上面代码中，setItem方法的两个参数都不是字符串，但是存入的值都是字符串。

如果储存空间已满，该方法会抛错。

写入不一定要用这个方法，直接赋值也是可以的。

// 下面三种写法等价
window.localStorage.foo = '123';
window.localStorage['foo'] = '123';
window.localStorage.setItem('foo', '123');
Storage.getItem()

Storage.getItem()方法用于读取数据。它只有一个参数，就是键名。如果键名不存在，该方法返回null。

window.sessionStorage.getItem('key')
window.localStorage.getItem('key')

 

键名应该是一个字符串，否则会被自动转为字符串。

Storage.removeItem()

Storage.removeItem()方法用于清除某个键名对应的键值。它接受键名作为参数，如果键名不存在，该方法不会做任何事情。

sessionStorage.removeItem('key');
localStorage.removeItem('key');

 

Storage.clear()

Storage.clear()方法用于清除所有保存的数据。该方法的返回值是undefined。

window.sessionStorage.clear()
window.localStorage.clear()

 

Storage.key()

Storage.key()方法接受一个整数作为参数（从零开始），返回该位置对应的键名。

window.sessionStorage.setItem('key', 'value');
window.sessionStorage.key(0) // "key"

 

结合使用Storage.length属性和Storage.key()方法，可以遍历所有的键。

for (var i = 0; i < window.localStorage.length; i++) {
  console.log(localStorage.key(i));
}

 

storage 事件

Storage 接口储存的数据发生变化时，会触发 storage 事件，可以指定这个事件的监听函数。

window.addEventListener('storage', onStorageChange);

监听函数接受一个event实例对象作为参数。这个实例对象继承了 StorageEvent 接口，有几个特有的属性，都是只读属性。

  • StorageEvent.key：字符串，表示发生变动的键名。如果 storage 事件是由clear()方法引起，该属性返回null。

  • StorageEvent.newValue：字符串，表示新的键值。如果 storage 事件是由clear()方法或删除该键值对引发的，该属性返回null。

  • StorageEvent.oldValue：字符串，表示旧的键值。如果该键值对是新增的，该属性返回null。

  • StorageEvent.storageArea：对象，返回键值对所在的整个对象。也说是说，可以从这个属性上面拿到当前域名储存的所有键值对。

  • StorageEvent.url：字符串，表示原始触发 storage 事件的那个网页的网址。

下面是StorageEvent.key属性的例子。

function onStorageChange(e) {
  console.log(e.key);
}
​
window.addEventListener('storage', onStorageChange);

注意，该事件有一个很特别的地方，就是它不在导致数据变化的当前页面触发，而是在同一个域名的其他窗口触发。也就是说，如果浏览器只打开一个窗口，可能观察不到这个事件。比如同时打开多个窗口，当其中的一个窗口导致储存的数据发生改变时，只有在其他窗口才能观察到监听函数的执行。可以通过这种机制，实现多个窗口之间的通信。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1195619.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

响应式少儿舞蹈培训网站模板源码

响应式少儿舞蹈培训网站模板源码

模板信息&#xff1a; 模板编号&#xff1a;6903 模板编码&#xff1a;UTF8 模板颜色&#xff1a;橙色 模板分类&#xff1a;学校、教育、培训、科研 适合行业&#xff1a;培训机构类企业 模板介绍&#xff1a; 本模板自带eyoucms内核&#xff0c;无需再下载eyou系统&#xf…
阅读更多...
从开源项目聊鱼眼相机的“360全景拼接”

从开源项目聊鱼眼相机的“360全景拼接”

目录 概述 从360全景的背景讲起 跨过参数标定聊透视变化 拼接图片后处理 参考文献 概述 写这篇文章的原因完全源于开源项目(GitHub参阅参考文献1)。该项目涵盖了环视系统的较为全貌的制作过程&#xff0c;包含完整的标定、投影、拼接和实时运行流程。该篇文章主要是梳理全…
阅读更多...
深入探析隔离CAN收发器NSI1050-DDBR各项参数

深入探析隔离CAN收发器NSI1050-DDBR各项参数

NSI1050-DDBR是一个隔离的CAN收发器&#xff0c;可以完全与ISO11898-2标准兼容。 NSI1050-DDBR集成了两个通道的数字隔离器和一个高电平可靠性CAN收发器。 数字隔离器是基于Novosense电容隔离技术的氧化硅隔离。 高度集成的解决方案可以帮助简化系统设计并提高可靠性。 NSI1050…
阅读更多...
【postgresql】CentOS7 安装pgAdmin 4

【postgresql】CentOS7 安装pgAdmin 4

CentOS7 安装PostgreSQL Web管理工具pgAdmin 4。 pgAdmin 是世界上最先进的开源数据库 PostgreSQL 最受欢迎且功能丰富的开源管理和开发平台。 下载地址&#xff1a; pgadmin-4 download pgAdmin 4分为桌面版和服务器版。 我们这里部署服务器版本。 安装RPM包。 安装源 s…
阅读更多...
使用IDEA工具处理git合并后的冲突的细节

使用IDEA工具处理git合并后的冲突的细节

使用 IDEA 处理合并(merge) 使用IDEA处理git合并如果遇到冲突&#xff0c;对冲突文件的不冲突部分需要处理吗&#xff1f;会自动将双方不冲突的部分合并吗&#xff1f; 比如如下&#xff0c;使用 IDEA 合并 branch1 到 branch2 分支&#xff0c;出现了冲突&#xff0c;如下图…
阅读更多...
Linux学习第二枪（yum，vim，g++/gcc，makefile的使用）

Linux学习第二枪（yum，vim，g++/gcc，makefile的使用）

前言&#xff1a;在我的上一篇Linux博客我已经讲了基础指令和权限&#xff0c;现在我们来学习如何在Linux上运行和执行代码 一&#xff0c;yum yum是Linux中的软件包管理器&#xff0c;软件包是有人一些人写好的代码和程序作出软件包放到服务器上&#xff0c;我们使用yum就能…
阅读更多...
DCMM咨询评估官方解答及各地补贴政策！

DCMM咨询评估官方解答及各地补贴政策！

1、DCMM是什么&#xff1f; DCMM是国家标准GB/T 36073-2018《数据管理能力成熟度评估模型》&#xff08;Data management Capability Maturity Model&#xff09;的简称&#xff0c;是我国数据管理领域首个正式发布的国家标准&#xff0c;旨在帮助企业利用先进的数据管理理念和…
阅读更多...
响应式青少年成长训练营培训网站模板源码

响应式青少年成长训练营培训网站模板源码

模板信息&#xff1a; 模板编号&#xff1a;28503 模板编码&#xff1a;UTF8 模板颜色&#xff1a;黑白 模板分类&#xff1a;学校、教育、培训、科研 适合行业&#xff1a;培训机构类企业 模板介绍&#xff1a; 本模板自带eyoucms内核&#xff0c;无需再下载eyou系统&#x…
阅读更多...
pyOCD

pyOCD

pyOCD 目录结构
阅读更多...
Proteus仿真--基于数码管设计的可调式电子钟

Proteus仿真--基于数码管设计的可调式电子钟

本文主要介绍基于51单片机的数码管设计的可调式电子钟实验&#xff08;完整仿真源文件及代码见文末链接&#xff09; 仿真图如下 其中数码管主要显示电子钟时间信息&#xff0c;按键用于调节时间 仿真运行视频 Proteus仿真--数码管设计的可调式电子钟&#xff08;仿真文件程…
阅读更多...
C 语言 switch 语句

C 语言 switch 语句

C 语言 switch 语句 在本教程中&#xff0c;您将通过一个示例学习在C语言编程中创建switch语句。 switch语句使我们可以执行许多代替方案中的一个代码块。 虽然您可以使用if…else…if阶梯执行相同的操作。但是&#xff0c;switch语句的语法更容易读写。 switch … case的语…
阅读更多...
下载思科模拟器Cisco packet Tracer7.0

下载思科模拟器Cisco packet Tracer7.0

一、下载地址 主要去思科官网下载&#xff0c;但是最新版本没有汉化。 官网地址&#xff1a;https://www.cisco.com/ 百度网盘链接&#xff1a;https://pan.baidu.com/s/1VPTDN7BRgXIWt7m1E_8FMQ?pwd1111 提取码&#xff1a;1111 下载时把它放到U盘里&#xff0c;如图。 解压…
阅读更多...
关于安卓刷机，小米手机，各种安卓手机，理念+实践，如：小米8

关于安卓刷机，小米手机，各种安卓手机，理念+实践，如：小米8

关于安卓刷机&#xff1a; 比刚买的时候 更加流畅&#xff0c;调节性能 狂暴模式&#xff0c;且无任何冗余软件和垃圾。 作为普通人&#xff0c;就是刷自己想要的系统&#xff0c;比如开发版。打开Root权限&#xff0c;第三方Rec TWRP&#xff0c;面具Magisk&#xff0c;LSPo…
阅读更多...
超全总结！探索性数据分析 (EDA)方法汇总！

超全总结！探索性数据分析 (EDA)方法汇总！

探索性数据分析&#xff08;EDA&#xff09;是一种系统地分析、可视化和总结数据集的过程&#xff0c;以获取洞察并更好地理解数据中潜在的模式和趋势。 EDA是任何数据分析项目中的重要步骤&#xff0c;因为它有助于识别数据中的潜在问题和偏见。EDA有助于为建模和进一步分析奠…
阅读更多...
极智芯 | 存算一体 弯道超车的希望

极智芯 | 存算一体 弯道超车的希望

欢迎关注我的公众号 [极智视界]&#xff0c;获取我的更多经验分享 大家好&#xff0c;我是极智视界&#xff0c;本文分享一下 存算一体 弯道超车的希望。 邀您加入我的知识星球「极智视界」&#xff0c;星球内有超多好玩的项目实战源码和资源下载&#xff0c;链接&#xff1a;…
阅读更多...
win11下安装odoo17（conda python11）

win11下安装odoo17（conda python11）

win11下安装odoo17 odoo17发行了&#xff0c;据说&#xff0c;UI做了很大改进&#xff0c;今天有空&#xff0c;体验一下 打开官方仓库&#xff1a; https://github.com/odoo/odoo 默认的版本已经变成17了 打开odoo/odoo/init.py&#xff0c;发现对python版本的要求也提高了…
阅读更多...
揭秘南卡开放式耳机创新黑科技，核心技术剑指用户痛点

揭秘南卡开放式耳机创新黑科技，核心技术剑指用户痛点

随着科技的进步和人们娱乐方式的升级&#xff0c;大家对听音工具的选择&#xff0c;从传统的耳机到蓝牙耳机再到AirPods这样的真无线耳机&#xff0c;而今年&#xff0c;也有一种全新的耳机爆发式涌入人们之中&#xff0c;那就是开放式耳机。 开放式耳机的出现&#xff0c;满足…
阅读更多...
Vuex：模块化Module

Vuex：模块化Module

由于使用单一状态树&#xff0c;应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时&#xff0c;store 对象就有可能变得相当臃肿。 这句话的意思是&#xff0c;如果把所有的状态都放在/src/store/index.js中&#xff0c;当项目变得越来越大的时候&#xff0c;Vue…
阅读更多...
小白版SpringMVC执行流程

小白版SpringMVC执行流程

目录 从MVC聊起 认识核心组件 SpringMVC执行流程 从MVC聊起 相信大家在刚接触到springMVC的时候&#xff0c;上手时接触的第一个理论应该就是mvc的含义&#xff0c;我们先简单的回顾一下&#xff0c;什么是MVC。 MVC的全名是Model View Controller&#xff0c;是一种使用“…
阅读更多...
快块手多功能全自动引流软件-引流工具-引流脚本-自动引流技术功能介绍

快块手多功能全自动引流软件-引流工具-引流脚本-自动引流技术功能介绍

脚本功能&#xff1a; 功能1_养号功能 功能2_评论区关注 功能3_评论区私信 功能4_评论区用户作品评论 功能5_评论区点赞 功能6_粉丝回关 功能7_自己粉丝私信 功能8_已关私信 功能9_好友私信 功能10_关键词搜索关注 功能11_关键词搜索私信 功能12_搜索ID关注 功能13_搜索ID私信…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023