web跨域

计算机知识思维导图：web跨域。网页展示前三层结构，可在线查看完整脑图并下载 GoMind 文件。

2026-08-25

计算机知识学习资料思维导图

## web跨域
### web跨域
#### 概念
##### Untitled node
##### Untitled node
#### 示例
##### ajax的跨域
##### Untitled node
##### Untitled node
#### 其它
##### 原生表单+Redirect＋Callback
##### P3P
#### 单向跨域
##### JSONP (JSON with Padding)
##### Flash URLLoader
##### Access Control or CORS 跨域资源共享
##### window.name
##### server proxy
#### 双向跨域
##### document.domain
##### FIM – Fragment Identitier Messaging
##### Flash LocalConnection
##### window.postMessage
##### Cross Frame
#### 参考
##### 跨域资源共享的10种方式 - Barret Lee - 博客园

> 仅展示前三层结构；请在线查看完整脑图或下载 GoMind 文件。

web跨域

web跨域

Untitled node

概念

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

ajax的跨域

Untitled node

示例

form表单支持提交数据到其他域，我们只需要把form的target指向页面上的隐藏iframe

站点A表单提交数据到站点B，通常我们会在站点B处理完请求，重定向到站点A下某个Proxy页面，并在url带上参数标识处理结果。接着，A站下的Proxy页面就可以解析url参数，传给父页面的Callback函数来处理了

原生表单+Redirect＋Callback

依赖PHP特性的跨域

P3P

其它

Untitled node

代码示例

http://www.nowamagic.net/javascript/js_UseJsonpCrossDomain.php



http://www.nowamagic.net/librarys/veda/detail/224



http://www.cnblogs.com/qiongmiaoer/archive/2013/03/17/2964822.html

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

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

受信任的双方传递数据

格式约定

目标域配合

JSONP (JSON with Padding)

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

不支持iOS

crossdomain.xml声明

目标域配合

Flash URLLoader

Untitled node

大部分浏览器支持

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

目标域配合

Access Control or CORS 跨域资源共享

window.name设置

目标域配合

window.name

Untitled node

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

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

不需要

目标域配合

server proxy

单向跨域

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

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

目标域配合

document.domain

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

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

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

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

目标域配合

FIM – Fragment Identitier Messaging

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

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

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

目标域配合

Flash LocalConnection

otherWindow.postMessage(message, targetOrigin);

Untitled node

目标域获取事件内容

目标域配合

window.postMessage

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,判定通信内容

目标域配合

Untitled node

Cross Frame

双向跨域

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

参考