前端 跨域 总结 张所勇( suoyong ) [email_address] [email_address]
Ajax 跨域 Iframe 跨域 Cookie 跨域 Flash 跨域 跨域情况
跨域是什么?
同源策略 <ul><li>同源策略是对 javascript 代码能够和哪些 Web 内容交互的一条完整的安全限制。 </li></ul>
什么情况会跨域?
什么情况会跨域? 主域不同
什么情况会跨域? 主域相同,子域不同
什么情况会跨域? 域名相同,协议不同
什么情况会跨域? 域名相同,端口不同
什么情况 不会 跨域? 域名完全相同
Ajax 跨域解决办法
示例 jiaju.com 和 zhangsuoyong.com 通信
按照能力分 <ul><li>能掌控对方 </li></ul><ul><li>不能掌控对方 </li></ul>
能掌握 zhangsuoyong.com 时 <ul><li>两种方法: </li></ul><ul><li>一、直接引入 javascript </li></ul><ul><li>二、 JSONP </li></ul>
能掌握 zhangsuoyong.com 时 <ul><li>两种方法: </li></ul><ul><li>一、直接引入 javascript </li></ul><ul><li>demo: </li></ul><ul><li>http://...
能掌握 zhangsuoyong.com 时 <ul><li>两种方法: </li></ul><ul><li>一、直接引入 javascript </li></ul><ul><li>php: </li></ul>
能掌握 zhangsuoyong.com 时 <ul><li>两种方法: </li></ul><ul><li>二、 JSONP </li></ul><ul><li>demo: </li></ul><ul><li>http://news.jiaj...
能掌握 zhangsuoyong.com 时 <ul><li>两种方法: </li></ul><ul><li>二、 JSONP </li></ul><ul><li>js: </li></ul>$. getJSON (&quot; http://...
能掌握 zhangsuoyong.com 时 <ul><li>两种方法: </li></ul><ul><li>二、 JSONP </li></ul><ul><li>php: </li></ul>
不能 掌握 zhangsuoyong.com 时 <ul><li>使用后端代理: </li></ul><ul><li>demo: </li></ul><ul><li>http://www.zhangsuoyong.com/demo/cross/...
不能 掌握 zhangsuoyong.com 时 <ul><li>使用后端代理: </li></ul><ul><li>php: </li></ul>
iFrame 跨域解决办法
按情境分 <ul><li>1 、不跨域时 </li></ul><ul><li>2 、主域相同、子域不同时 </li></ul><ul><li>3 、主域不同 </li></ul>
不 跨域时 <ul><li>1 、不跨域时 </li></ul><ul><li>访问 iframe :   contentWindow </li></ul><ul><li>访问父级: parent </li></ul><ul><li>访问顶级:...
跨域时 <ul><li>2 、主域相同、子域不同 </li></ul><ul><li>使用 document.domain= 主域名 </li></ul><ul><li>demo : </li></ul><ul><li>未设置 document...
跨域时 <ul><li>2 、主域相同、子域不同 </li></ul><ul><li>两个域都设置: document.domain=‘jiaju.com’ </li></ul>
跨域时 <ul><li>3 、主域不同 </li></ul><ul><li>解决办法 : </li></ul><ul><ul><li>1 、 location.hash </li></ul></ul><ul><ul><li>2 、 window...
主域不同时 <ul><li>3 、  location.hash </li></ul><ul><li>location.hash  是什么: </li></ul><ul><li>hash  属性是一个可读可写的字符串,该字符串是  URL  的...
主域不同时 <ul><li>3 、  location.hash </li></ul><ul><li>location.hash  是什么: </li></ul><ul><li>demo : </li></ul><ul><li>http://s...
location.hash( A 操作 B ) <ul><li>解决方法:  http://news.jiaju.com/images/sy/demo/iframe03/a.htm </li></ul>1 、 通过 location.hash ...
location.hash( B 操作 A ) <ul><li>解决方法:  http://news.jiaju.com/images/sy/suoyongtest.htm </li></ul>1 、 创建和上层同域的 iframe 通过 lo...
location.hash <ul><li>原理: </li></ul><ul><li>1 、动态改变 location.hash , iframe 不会重载 </li></ul><ul><li>2 、无论跨域与否, iframe 内可以获取自...
location.hash <ul><li>线上实例: </li></ul><ul><li>1 、 v1pai.jiaju.com 跨域无刷新登陆、 </li></ul><ul><li>2 、 v1pai.jiaju.com 短信认证 </li...
location.hash <ul><li>通用解决办法: </li></ul><ul><li>被嵌入的跨域的 iframe 中引入 </li></ul><ul><li><script src=&quot;http://static.jiaju...
location.hash 缺点 <ul><li>1 、传递数据量有限 </li></ul><ul><li>2 、不太安全 </li></ul>
主域不同时 <ul><li>3 、  window.name </li></ul><ul><li>window.name  是什么: </li></ul><ul><ul><li>name  在浏览器环境中是一个全局 window 对象的属性 <...
window.name <ul><li>window.name  的优势: </li></ul><ul><ul><li>数据量更大( 2M ) </li></ul></ul><ul><ul><li>更安全 </li></ul></ul><ul>...
window.name <ul><li>window.name  的劣势: </li></ul><ul><ul><li>只适用于隐藏 iframe 的情形 </li></ul></ul>
window.name <ul><li>window.name  : </li></ul><ul><ul><li>demo :  http://news.jiaju.com/images/sy/demo/iframe04/a.htm </li>...
window.name <ul><li>原理 (1)  : </li></ul>window.name=‘Hello kitty!’ 1 、 创建 iFrame B 2 、 把要传递的数据放入 window.name
window.name <ul><li>原理  (2) : </li></ul>3 、 在 A 中将  B 替换 成 C 4 、 读取 C 的 window.name 以获取数据
window.name <ul><li>window.name  线上使用  : </li></ul><ul><ul><li>新浪乐居、百度乐居、新浪家居 SSO 登陆 </li></ul></ul>
Cookie 跨域解决办法
Cookie 跨域 <ul><li>主域相同、子域不同时: </li></ul><ul><ul><li>设置 cookie 的 </li></ul></ul><ul><ul><li>domain= .   主域名 ; </li></ul></u...
Cookie 跨域 <ul><li>主域相同、子域不同时: </li></ul><ul><ul><li>示例 </li></ul></ul><ul><ul><li>document.cookie =  </li></ul></ul><ul><u...
Cookie 跨域 <ul><li>主域相同、子域不同时: </li></ul><ul><ul><li>线上示例 </li></ul></ul><ul><ul><li>  家居就切换城市 </li></ul></ul>
Cookie 跨域 <ul><li>主域不同时: </li></ul><ul><ul><li>不能获取 </li></ul></ul>
Flash 跨域解决办法
Flash 跨域 <ul><li>flash 与后台通信: </li></ul><ul><ul><ul><li>根目录下放置 crossdomain.xml </li></ul></ul></ul><ul><li>flash 与 flash 通...
Flash 跨域 <ul><li>flash 与 js 通信 </li></ul><ul><ul><li>HTML 中 </li></ul></ul><ul><ul><ul><li>当  AllowScriptAccess  设置为  &quo...
Flash 跨域 <ul><li>以上内容来源于 小微哥 </li></ul><ul><li>感谢  小微哥  的总结 </li></ul>
<ul><li>Q&A </li></ul>
<ul><li>thanks </li></ul>
Upcoming SlideShare
Loading in...5
×

前端跨域总结

3,965

Published on

总结各种前端跨域情况及解决办法,包括ajax跨域,iframe跨域,cookie跨域,flash跨域

Published in: Technology
1 Comment
18 Likes
Statistics
Notes
  • 跨域
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,965
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
167
Comments
1
Likes
18
Embeds 0
No embeds

No notes for slide

前端跨域总结

  1. 1. 前端 跨域 总结 张所勇( suoyong ) [email_address] [email_address]
  2. 2. Ajax 跨域 Iframe 跨域 Cookie 跨域 Flash 跨域 跨域情况
  3. 3. 跨域是什么?
  4. 4. 同源策略 <ul><li>同源策略是对 javascript 代码能够和哪些 Web 内容交互的一条完整的安全限制。 </li></ul>
  5. 5. 什么情况会跨域?
  6. 6. 什么情况会跨域? 主域不同
  7. 7. 什么情况会跨域? 主域相同,子域不同
  8. 8. 什么情况会跨域? 域名相同,协议不同
  9. 9. 什么情况会跨域? 域名相同,端口不同
  10. 10. 什么情况 不会 跨域? 域名完全相同
  11. 11. Ajax 跨域解决办法
  12. 12. 示例 jiaju.com 和 zhangsuoyong.com 通信
  13. 13. 按照能力分 <ul><li>能掌控对方 </li></ul><ul><li>不能掌控对方 </li></ul>
  14. 14. 能掌握 zhangsuoyong.com 时 <ul><li>两种方法: </li></ul><ul><li>一、直接引入 javascript </li></ul><ul><li>二、 JSONP </li></ul>
  15. 15. 能掌握 zhangsuoyong.com 时 <ul><li>两种方法: </li></ul><ul><li>一、直接引入 javascript </li></ul><ul><li>demo: </li></ul><ul><li>http://news.jiaju.com/images/sy/demo/a.htm </li></ul>
  16. 16. 能掌握 zhangsuoyong.com 时 <ul><li>两种方法: </li></ul><ul><li>一、直接引入 javascript </li></ul><ul><li>php: </li></ul>
  17. 17. 能掌握 zhangsuoyong.com 时 <ul><li>两种方法: </li></ul><ul><li>二、 JSONP </li></ul><ul><li>demo: </li></ul><ul><li>http://news.jiaju.com/images/sy/demo/b.htm </li></ul>
  18. 18. 能掌握 zhangsuoyong.com 时 <ul><li>两种方法: </li></ul><ul><li>二、 JSONP </li></ul><ul><li>js: </li></ul>$. getJSON (&quot; http://www.zhangsuoyong.com/demo/cross/ajax01/2.php? jsoncallback=? &quot;,function(data){ alert(data); }); $. ajax ({ url : 'http://www.zhangsuoyong.com/demo/cross/ajax01/2.php? jsoncallback=? ', dataType : &quot; jsonp &quot;, type : &quot; GET &quot;, success : function(data){ alert(data); } });
  19. 19. 能掌握 zhangsuoyong.com 时 <ul><li>两种方法: </li></ul><ul><li>二、 JSONP </li></ul><ul><li>php: </li></ul>
  20. 20. 不能 掌握 zhangsuoyong.com 时 <ul><li>使用后端代理: </li></ul><ul><li>demo: </li></ul><ul><li>http://www.zhangsuoyong.com/demo/cross/ajax02/a.htm </li></ul>
  21. 21. 不能 掌握 zhangsuoyong.com 时 <ul><li>使用后端代理: </li></ul><ul><li>php: </li></ul>
  22. 22. iFrame 跨域解决办法
  23. 23. 按情境分 <ul><li>1 、不跨域时 </li></ul><ul><li>2 、主域相同、子域不同时 </li></ul><ul><li>3 、主域不同 </li></ul>
  24. 24. 不 跨域时 <ul><li>1 、不跨域时 </li></ul><ul><li>访问 iframe : contentWindow </li></ul><ul><li>访问父级: parent </li></ul><ul><li>访问顶级: top </li></ul><ul><li>demo </li></ul><ul><li>http://news.jiaju.com/images/sy/demo/iframe01/a.htm </li></ul>
  25. 25. 跨域时 <ul><li>2 、主域相同、子域不同 </li></ul><ul><li>使用 document.domain= 主域名 </li></ul><ul><li>demo : </li></ul><ul><li>未设置 document.domain 情况 : </li></ul><ul><li>http://news.jiaju.com/images/sy/demo/iframe02/a.htm </li></ul><ul><li>设置 document.domain 情况 : </li></ul><ul><li>http://news.jiaju.com/images/sy/demo/iframe02/c.htm </li></ul>
  26. 26. 跨域时 <ul><li>2 、主域相同、子域不同 </li></ul><ul><li>两个域都设置: document.domain=‘jiaju.com’ </li></ul>
  27. 27. 跨域时 <ul><li>3 、主域不同 </li></ul><ul><li>解决办法 : </li></ul><ul><ul><li>1 、 location.hash </li></ul></ul><ul><ul><li>2 、 window.name </li></ul></ul>
  28. 28. 主域不同时 <ul><li>3 、 location.hash </li></ul><ul><li>location.hash 是什么: </li></ul><ul><li>hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分( 从 # 号开始的部分 ) </li></ul>
  29. 29. 主域不同时 <ul><li>3 、 location.hash </li></ul><ul><li>location.hash 是什么: </li></ul><ul><li>demo : </li></ul><ul><li>http://static.jiaju.com/jiaju/com/js/crossdomain/proxy.html # iframeID=google&height=362&JJtype=height </li></ul>
  30. 30. location.hash( A 操作 B ) <ul><li>解决方法: http://news.jiaju.com/images/sy/demo/iframe03/a.htm </li></ul>1 、 通过 location.hash 方式传递参数 2 、 通过定时器检测 hash 变化,执行对应操作
  31. 31. location.hash( B 操作 A ) <ul><li>解决方法: http://news.jiaju.com/images/sy/suoyongtest.htm </li></ul>1 、 创建和上层同域的 iframe 通过 location.hash 方式传递参数 2 、 通过 top.window 获取顶层 window 对象
  32. 32. location.hash <ul><li>原理: </li></ul><ul><li>1 、动态改变 location.hash , iframe 不会重载 </li></ul><ul><li>2 、无论跨域与否, iframe 内可以获取自己的 location.hash </li></ul><ul><li>3 、只要域名相同就能通信,即使 ABC 三层嵌套 </li></ul>
  33. 33. location.hash <ul><li>线上实例: </li></ul><ul><li>1 、 v1pai.jiaju.com 跨域无刷新登陆、 </li></ul><ul><li>2 、 v1pai.jiaju.com 短信认证 </li></ul><ul><li>3 、 72 炫专题 iframe 跨域自适应 </li></ul>
  34. 34. location.hash <ul><li>通用解决办法: </li></ul><ul><li>被嵌入的跨域的 iframe 中引入 </li></ul><ul><li><script src=&quot;http://static.jiaju.com/jiaju/com/js/crossdomain/crossdomain.js&quot;></script> </li></ul><ul><li>提供以下方法: </li></ul><ul><ul><li>JJcrossiframe. setHeight ( ‘youiframeID’ ) // 自动设定跨域 iframe 高度 </li></ul></ul><ul><ul><li>JJcrossiframe. setWidth ( ‘youiframeID’ ) // 自动设定跨域 iframe 宽度 </li></ul></ul><ul><ul><li>JJcrossiframe. callback ( ‘fn’ , paramobj ) // 调用顶层 iframe 中 fn 函数 </li></ul></ul><ul><ul><li>JJcrossiframe. init ( paramobj , type ) // 自定义向顶层传参数 </li></ul></ul><ul><ul><li>// (type 目前有: height,width,callback), </li></ul></ul><ul><ul><li>// 新增 type 需在代理页面内自定义开发 </li></ul></ul>
  35. 35. location.hash 缺点 <ul><li>1 、传递数据量有限 </li></ul><ul><li>2 、不太安全 </li></ul>
  36. 36. 主域不同时 <ul><li>3 、 window.name </li></ul><ul><li>window.name 是什么: </li></ul><ul><ul><li>name 在浏览器环境中是一个全局 window 对象的属性 </li></ul></ul><ul><ul><li>当在 iframe 中加载新页面时, name 的属性值依旧保持不变 </li></ul></ul><ul><ul><li>name 属性仅对相同域名的 iframe 可访问 </li></ul></ul>
  37. 37. window.name <ul><li>window.name 的优势: </li></ul><ul><ul><li>数据量更大( 2M ) </li></ul></ul><ul><ul><li>更安全 </li></ul></ul><ul><ul><li>可传递多种数据格式 </li></ul></ul>
  38. 38. window.name <ul><li>window.name 的劣势: </li></ul><ul><ul><li>只适用于隐藏 iframe 的情形 </li></ul></ul>
  39. 39. window.name <ul><li>window.name : </li></ul><ul><ul><li>demo : http://news.jiaju.com/images/sy/demo/iframe04/a.htm </li></ul></ul><ul><ul><li>国内起源: </li></ul></ul><ul><ul><ul><li>怿飞博客: http://www.planabc.net/2008/09/01/window_name_transport/ </li></ul></ul></ul><ul><ul><ul><li>张克军的例子 </li></ul></ul></ul><ul><ul><ul><li>http://hikejun.com/demo/windowname/demo_windowname.html </li></ul></ul></ul>
  40. 40. window.name <ul><li>原理 (1) : </li></ul>window.name=‘Hello kitty!’ 1 、 创建 iFrame B 2 、 把要传递的数据放入 window.name
  41. 41. window.name <ul><li>原理 (2) : </li></ul>3 、 在 A 中将 B 替换 成 C 4 、 读取 C 的 window.name 以获取数据
  42. 42. window.name <ul><li>window.name 线上使用 : </li></ul><ul><ul><li>新浪乐居、百度乐居、新浪家居 SSO 登陆 </li></ul></ul>
  43. 43. Cookie 跨域解决办法
  44. 44. Cookie 跨域 <ul><li>主域相同、子域不同时: </li></ul><ul><ul><li>设置 cookie 的 </li></ul></ul><ul><ul><li>domain= . 主域名 ; </li></ul></ul><ul><ul><li>各个子域均可获取 </li></ul></ul>
  45. 45. Cookie 跨域 <ul><li>主域相同、子域不同时: </li></ul><ul><ul><li>示例 </li></ul></ul><ul><ul><li>document.cookie = </li></ul></ul><ul><ul><li>“ JIAJU_SITE_CH=bj;path=/; domain=.jiaju.com; expires= 1323326186697 ” </li></ul></ul>
  46. 46. Cookie 跨域 <ul><li>主域相同、子域不同时: </li></ul><ul><ul><li>线上示例 </li></ul></ul><ul><ul><li> 家居就切换城市 </li></ul></ul>
  47. 47. Cookie 跨域 <ul><li>主域不同时: </li></ul><ul><ul><li>不能获取 </li></ul></ul>
  48. 48. Flash 跨域解决办法
  49. 49. Flash 跨域 <ul><li>flash 与后台通信: </li></ul><ul><ul><ul><li>根目录下放置 crossdomain.xml </li></ul></ul></ul><ul><li>flash 与 flash 通信: </li></ul><ul><ul><ul><li>Security.allowDomain(&quot;*&quot;); </li></ul></ul></ul><ul><ul><ul><li>Security.allowInsecureDomain(&quot;*&quot;); </li></ul></ul></ul>
  50. 50. Flash 跨域 <ul><li>flash 与 js 通信 </li></ul><ul><ul><li>HTML 中 </li></ul></ul><ul><ul><ul><li>当 AllowScriptAccess 设置为 &quot;never&quot; 时,运行对外脚本会失败; </li></ul></ul></ul><ul><ul><ul><li>当 AllowScriptAccess 设置为 &quot;always&quot; 时,可以成功运行对外脚本; </li></ul></ul></ul><ul><ul><li>flash 中 </li></ul></ul><ul><ul><ul><li>Security.allowDomain(&quot;*&quot;); </li></ul></ul></ul><ul><ul><ul><li>Security.allowInsecureDomain(&quot;*&quot;); </li></ul></ul></ul>
  51. 51. Flash 跨域 <ul><li>以上内容来源于 小微哥 </li></ul><ul><li>感谢 小微哥 的总结 </li></ul>
  52. 52. <ul><li>Q&A </li></ul>
  53. 53. <ul><li>thanks </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×