如何理解跨域

2023-01-05 0 326

布吕马关键性科学知识

相混思路

应用程序蓄意结构设计的三个机能管制

CORS

冲破应用程序管制的三个方式

JSONP

IE黄金时代的让步

相混表述

window.origin或 location.origin能获得现阶段天然资源源= 协定+搜索引擎+freenode

假如三个url的

协定搜索引擎freenode完全相同,因此这三个url是相混的

总括

https://qq.com ,https://www.baidu.com 不相混https://baidu.com, https://www.baidu.com 不相混完全相同才算相混

相混思路表述

应用程序明确规定

总括(略去http协定)

假定frank.com/index.html 提及了 cdn.com/1.js因此就说 1.js 运转在源http://frank.com里特别注意这跟http://cdn.com没亲密关系,尽管1.js从它那浏览因此1.http://frank.com1.frank.com 或是 qq.com的统计数据

这是应用程序的机能

应用程序蓄意要这种结构设计的

假如没相混思路

以qq内部空间为例

源为 https://use

骇客来了

假定你的雅典娜撷取 https://qzone-qq.com给你实际上这是三个钓中文网站你登出来那个页面,那个页面也允诺你的挚友条目https://user.qzone.qq.com/friends.json答,你的挚友条目呢就被骇客偷偷地盗走了?好似是哦······

问题的根源

无法区分发送者

QQ内部空间页面里的JS和骇客页面里的JS发的允诺几乎没区别(referer)有区别假如后台开发者没检测referer,因此就完全没区别因此,没相混思路,任何页面都能偷QQ内部空间的统计数据甚至支付宝余额!

那检查referer不就好了?

安全原则:安全链条的强度取决于最弱一环万一那个中文网站的后端开发工程师是个**呢因此应用程序应该主动预防这种偷统计数据的行为总之,应用程序为了用户隐私,设置了严格的相混思路

怎样做到布吕马?

解决方式一: CORS(布吕马天然资源共享)

问题根源:

应用程序默认不相混之间不能互相访问统计数据但是qq.comfrank.com都是我的中文网站我是要三个中文网站互相访问,应用程序为什么阻止

使用CORS:

应用程序说,假如要共享统计数据,需要提前声明!哦,那怎么声明呢?、应用程序说,http://qq.com在响应头里写http://frank.com能访问哦,具体语法呢?Access-Control-Allow-Origin:http://foo.example应用程序说:都在文档里,去看MDN文档

解决方式二:JSONP

表述:

JSONP和JSON半毛钱亲密关系都没由于之前前端水平低下,错误的将其称为JSONP

步骤:

frank.com访问qq.comhttp://qq.com将统计数据写到 /friends.jshttp://frank.com用script标签提及/friends.js/friends.js 执行,执行什么呢?http://frank.com事先表述好http://window.xxx函数/friends.js执行http://window.xxx({friends:[…]})然后http://frank.com就通过http://window.xxxhttp://window.xxx是三个回调啊!这TM都能想到,人才啊!这是很多前端工程师一起想出来的

优化:

xxx能不写死吗?http://window.xxx能不能改其他名字?其实名字不重要,只要frank.com表述的函数名和qq.com/friends.js执行的函数是同三个即可

封装:

封装成jsonp(’url’).then(f1,f2)代码如下
function jsonp(url) { return new Promise((resolve, reject) => { const random = frankJSONPCallbackName + Math.random(); window[random] = (data) => { resolve(data); }; const script = document.createElement(script); script.src = `${url}?callback=${random}`; script.onload = () => { script.remove(); }; script.onerror = () => { reject(); }; document.body.appendChild(script); }); } jsonp(<http://qq.com:8888/friendsjs>).then((data) => { console.log(data); });

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务