1.什么是同源策略
同源策略中的重要内容就是URL（uniform resource locator）,统一资源定位符，俗称网址。URL中的resource资源就是css,js,html,img等内容。
Paste_Image.png
origin源：源包括当前页面的域名、协议、端口号。http协议默认端口是80，https协议默认端口是443。同源策略是浏览器的一个功能，Same Origin Policy，同源就是当协议、域名、端口号一致时就是同源。不同源的客户端脚本在没有明确授权下，不能读写对方的资源。简单地理解就是因为JavaScript同源策略的限制，它是浏览器为了安全性考虑一种非常重要的策略，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：
Paste_Image.png
2.什么是跨域？跨域有几种实现形式
跨域就是用某种方法突破同源策略的限制，实现获取其他域中的资源。实现跨域一般有三种方法：
【1】降域。用改写document.domain+iframe的方法来获取目标域数据。缺点是安全性差，一个页面被攻击后另一个页面的数据也会被泄露且不支持ajax方式请求数据。降域只能解决主域相同而二级域名（子域名）不同的两个页面请求数据的情况，如果把script.a.com的domian设为alibaba.com那显然是会报错。将当前页面a.com和数据页面b.com的域名设置成相同的父域(主域名)、父父域名（主域名），domain只能设置为主域名，不可以在b.a.com中将domain设置为c.a.com；且只能由子域名改到父域名或父父域名，不能从父父域名改到子域名（比如将b.com改成script.b.com是不行的）
【2】jsonp。JSONP(json with padding)方式, 通过script标签请求资源,允许用户在scr地址中传递一个callback参数（callback=abc）给服务端，然后服务端返回数据时会将这个callback参数(abc)作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
【3】CORS
【4】HTML5 postMessage
3.jsonp 的原理是什么
jsonp的原理：虽然浏览器默认禁止了跨域访问，但并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function（包括操作cookie、Dom等等）。根据这一点，可以方便地通过动态创建script节点的方法来实现完全跨域的通信。例如a.com/index.html中可以引用b.com/main.js、b.com/style.css、b.com/logo.png等资源，此类操作不受同源策略限制。实际操作中如果在a.com下用ajax去请求（读写）b.com下的内容会被同源策略阻止，但a.com里如果引用了b.com/main.js，虽然可以引用，但当这个引用的js文件（在a.com下引用）去读写（ajax）b.com的资源时一样会提示ajax错误。
jsonp的缺点：1.安全问题，src引用是开放的，所以jsonp的资源都被所有人访问到。解决方法是用jsonp中的token参数，通过A域和B域共用同一套cookie来验证A的身份。2.只能AJAXGET方式不能用POST方式获取数据即只能读不能写，因为是基于scr引用的，引用是get请求。3.可被注入恶意代码如?callback=alert(1); 这问题只能用正则过滤字符串的方法解决，过滤callback后的内容不能有括号之类的条件
4.CORS是什么
CORS是一个W3C标准，全称是“跨域资源共享”，使用它可以实现浏览器上跨院服务器发出XMLHTTPRequest请求，从而克服了ajax只能同源使用的限制。CORS需要浏览器和服务器同时支持，目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
5.解决跨域问题
用jsonp方法实现跨域，假设a.com上的index.html主页要访问b.com域名下的data.js文件中的数据。
【1】a.com页面中插入script标签，src属性值等于要请求的跨域资源，资源类型为js文件，使用?callback=ask传递参数。
Paste_Image.png
【2】a.com页面上定义函数ask。
Paste_Image.png
【3】b.com下的data.js中被访问的数据用a.com定义的ask函数包裹。
Paste_Image.png
【4】a.com页面加载执行效果
Paste_Image.png
本文版权归本人和饥人谷所有，转载请注明来源。
网友评论