同源策略、跨域、jsonp

问答

1.什么是同源策略

  • 同源:


    同源策略、跨域、jsonp_第1张图片
    URL组成

URL由协议、域名、端口和文件路径组成,而如果两个URL的协议、域名和端口均相同,则表示它们是同源

  • 同源策略:
    不同源的客户端脚本在没明确授权的情况下,不能读写对方的资源。这就是同源策略,它是浏览器为了安全性考虑一种非常重要的策略。
    例如:a.com/index.html可以引用
  • b.com/main.js
  • b.com/style.css
  • b.com/logo.png
    但是被a.com引用之后的b.com/main.js就不能对b.com的资源进行读写(ajax报错)

2.什么是跨域?跨域有几种实现形式?

  • 跨域:
    出于同源政策,不同源的客户端脚本是不能读写对方的资源,而跨域就是采取某些技术突破这个限制。

  • 跨域的几种形式:

(1)降域:
对于主域相同而子域不同的网址,可以使用降域的方法,也就是设置document.domain。配合iframe标签使用达到2个js文件之前的“交互”。
缺点是:无法使用ajax,只能在主域相同的情况下使用,有安全性问题。
(2)JSONP:
通过创建script节点的方法来实现跨域,兼容性好,支持老版本的浏览器。
缺点是:只能发送GET请求,无法判断请求是否失败,也有安全性问题,可以通过前后端约定一个token变量来验证。
(3)CORS:
一个W3C标准,允许浏览器跨域请求资源。
缺点是:有兼容性问题,IE浏览器不能低于IE10。

同源策略、跨域、jsonp_第2张图片
CORS兼容

(4)hash:可以利用location.hash值来传递数据。
缺点是:数据容量有限。
(5)window.name:只要tab页面不会关闭,name值在不同的域名加载后依旧存在,利用这一原理可以实现跨域。

3.jsonp的原理是什么?

test02.php代码如下:



测试结果就是同源政策的限制:

同源策略、跨域、jsonp_第5张图片
运行结果

2.至少使用一种方式解决跨域问题

(1):使CORS方法:
test01.html无需修改,只要在test02.php里面添加header('Access-Control-Allow-Origin: http://test01.com')即可。
php代码:


同源策略、跨域、jsonp_第6张图片
运行结果

(2):使用jsonp的方法:
test01.html代码:



    
    同源政策测试






test02.php代码:

 
运行结果

本文版权归本人和饥人谷所有,转载请注明来源。

你可能感兴趣的:(同源策略、跨域、jsonp)