JSONP跨域的script标签请求为什么不受同源策略的限制?

在复习跨域的时候,复习到了JSONP跨域,大家都知道JSONP跨域是通过动态创建script标签,然后通过其src属性进行跨域请求的,前端需要一个数据处理的回调函数,而服务端需要配合执行回调函数,放入要传过来的数据

这时候问题来了,JSONP跨域的script标签请求为什么不受同源策略的限制?

这个问题可以这么回答:

首先我们要理解什么时候同源策略,它的作用是什么,它干了什么事。

要理解同源策略得先知道:什么是同源?

同源即 协议,域名,端口号三个完全一致,才能称作同源

当你打开一个网站时,这个网站开始执行脚本,会检测这个脚本的来源,如果这个脚本的来源与当前网站不同源的话,就会限制其执行,即受到同源策略的限制

这里直接复制MDN对同源策略的概念解释

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

其中MDN谈到了很重要的一点,IE浏览器的同源是不包含端口号的,即端口号不一致也是属于同源

通俗易懂的说同源策略:不允许A的文档或脚本与B的文档脚本瞎搞在一起,两个相互独立开来,不能直接相互访问

下面进入正题:

要理解JSONP跨域的script标签请求为什么不受同源策略的限制这个问题的重点就在于:要执行的脚本是如何判断他的来源的

可以这么理解,脚本的来源取决于脚本所嵌入的资源的来源,比如说访问A主机的当前HTML文件中有一个script标签,这个script标签的src属性请求了一个js脚本,因为这个脚本是由A主机的HTML文件的嵌入的script标签发起请求获取的,因此这个脚本的来源是属于A主机的。

到了这里,问题的答案也就出来了,jsonp的script标签请求回来的资源与当前域是相同的域,因此不受同源策略的影响

对于同源策略这里还有一个很关键的点:同源策略并非应用于不同源的窗口中的所有对象的所有属性

它只应用到了其中的大多数属性,尤其是对Document对象的几乎所有属性而言。

凡是包含另一个服务器中文档的窗口或窗体,都是同源策略适用的范围。

如果脚本打开一个窗口,脚本也可以关闭它,但不能以任何方式查看窗口内部。

同源策略还应用于使用XMLHttpRequest生成的HTTP请求。(这也就是为什么我们常用的Ajax请求会受到同源策略影响的原因了)这个对象允许客户端JavaScript生成任意的HTTP请求到脚本所属文档的Web服务器,但是不允许脚本和其他Web服务器通信。

参考资料:MDN同源策略 https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

深入理解同源策略:https://blog.csdn.net/gtLBTNq9mr3/article/details/78455211

上一篇:thinkphp,javascript跨域请求解决方案


下一篇:Mybatis实战之TypeHandler高级进阶