web跨域思维导图

一张思维导图带你了解web跨域的知识内容，包括web跨域概念、示例、双向跨越、单向跨越等，值得收藏学习哦！

web跨域

• 概念
• 示例
  • ajax的跨域
    • ajax同源策略（同源是指域名，协议，端口相同）
• 参考
  • 跨域资源共享的10种方式 - Barret Lee - 博客园
• 双向跨域
  • 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,判定通信内容
• 单向跨域
  • JSONP (JSON with Padding)
    • 代码示例
      • 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协议
    • 目标域配合
      • 受信任的双方传递数据
      • 格式约定
  • 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的方式来抓取数据
    • 目标域配合
      • 不需要
• 其它
  • 原生表单+Redirect＋Callback
    • form表单支持提交数据到其他域，我们只需要把form的target指向页面上的隐藏iframe
    • 站点A表单提交数据到站点B，通常我们会在站点B处理完请求，重定向到站点A下某个Proxy页面，并在url带上参数标识处理结果。接着，A站下的Proxy页面就可以解析url参数，传给父页面的Callback函数来处理了
  • P3P
    • 依赖PHP特性的跨域