首页  思维导图  详情

A_116_web跨域

2021-04-09 10:52:22   0  举报





AI智能生成

全面、高效的知识图谱：A_116_web跨域!! 全面又深度的提升认知，达到实际应用的目的! 建议先纵观全局，掌握好大方向。再根据自己的需要，针对性的学习某一个点，最后做到逐步由点及面。

高效工作方式

组织结构

风格样式

流程图

系统架构

作者其他创作

大纲/内容

单向跨域

JSONP (JSON with Padding)

分支主题

代码示例

JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了

如果设为dataType: 'jsonp'，这个$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议

目标域配合

受信任的双方传递数据

格式约定

Flash URLLoader

通过crossdomain.xml文件来声明能被哪些域的SWF文件访问

不支持iOS

目标域配合

crossdomain.xml声明

Access Control or CORS 跨域资源共享

分支主题

大部分浏览器支持

目标域配合

header("Access-Control-Allow-Origin: http://www.a.com");

window.name

目标域配合

window.name设置

server proxy

分支主题

这个跨域方式不需要和目标资源签订协议

在未与数据提供方没有达成通信协议的情况下我们也可以用server proxy的方式来抓取数据

目标域配合

不需要

双向跨域

document.domain

可以在域和子域或者不同的子域之间通信

目标域配合

双向域一方,修改document.domain为对方域

FIM – Fragment Identitier Messaging

父窗口可以对iframe进行URL读写，iframe也可以读写父窗口的URL，URL有一部分被称为frag，就是#号及其后面的字符，它一般用于浏览器锚点定位

FIM的原理就是改变URL的frag部分来进行双向通信。每个window通过改变其他window的location来发送消息，并通过监听自己的URL的变化来接收消息。

这个方式的通信会造成一些不必要的浏览器历史记录，而且有些浏览器不支持onhashchange事件，需要轮询来获知URL的改变

目标域配合

双向域配合一方修改frag,另一方读取URL,获取通信内容

Flash LocalConnection

我们可以在不同域的HTML页面各自嵌套一个SWF来达到相互传递数据的目的了

用这种方式来跨域通信过于复杂，而且需要了2个SWF文件，实用性不强

目标域配合

遵循Flash LocalConnection规则 & 双向域配置swf文件

window.postMessage

otherWindow.postMessage(message, targetOrigin);

分支主题

目标域配合

目标域获取事件内容

Cross Frame

Cross Frame是FIM的一个变种，它借助了一个空白的iframe

不会产生多余的浏览器历史记录，也不需要轮询URL的改变，在可用性和性能上都做了很大的改观

A.html需要向B.html中发送消息时，页面会创建一个隐藏的iframe, iframe的src指向proxyB.html并把message作为URL frag，由于B.html和proxyB.html是同域，所以在iframe加载完成之后，B.html可以获得iframe的URL，然后解析出message，并移除该iframe

目标域配合

目标域需要从自己的iframe中获取URL frag,判定通信内容

分支主题

参考

跨域资源共享的10种方式 - Barret Lee - 博客园

概念

分支主题

示例

ajax的跨域

ajax同源策略（同源是指域名，协议，端口相同）

分支主题

其它