在复习跨域的时候,复习到了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

JSONP跨域的script标签请求为什么不受同源策略的限制?的更多相关文章

  1. js原生跨域--用script标签实现

    刚刚从培训班学习完,总想写一下东西,自从进入了这个院子,每次出现问题,总是能找到一些答案,给我一些帮助. 作为新手,就写一下简单的吧,院子里面有很多大牛, 说句实话,他们的很多代码我都看不懂. 我就写 ...

  2. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  3. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  4. 我的jsonp跨域问题

    关于jsonp跨域问题,在这个方面也是了解一点点,先记录下来,主要作为以后查看,之前下载并安装过wampserver,了解到了jsonp和json的区别,现在谈谈跨域这个问题: 首先什么是跨域,简单地 ...

  5. 深入剖析jsonp跨域原理

    在项目中遇到一个jsonp跨域的问题,于是仔细的研究了一番jsonp跨域的原理.搞明白了一些以前不是很懂的地方,比如: 1)jsonp跨域只能是get请求,而不能是post请求: 2)jsonp跨域的 ...

  6. JSONP ---------跨域

    什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首 ...

  7. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  8. JSONP跨域和CORS跨域的区别

    跨域: 由于浏览器中的javascript的同源策略,同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互. 同源:协议,域名,端口,三者有一个不同即为跨域. 解决跨域有以下多种方法 ...

  9. JSONP跨域和CORS跨域

    什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这 ...

随机推荐

  1. Dubbo源码学习之-Adaptive自适应扩展

    前言 最近三周基本处于9-10-6与9-10-7之间,忙碌的节奏机会丢失了自己.除了之前干施工的那段经历,只看参加软件开发以来,前段时间是最繁忙的了.忙的原因,不是要完成的工作量大,而是各种环境问题, ...

  2. 在eclipse中创建Web项目中没有web.xml的解决方法

      右键点击项目 → “Java EE Tool” → “Generate Deployment descriptor stub” 即可生成web.xml文件

  3. Linux平台 Oracle 19c RAC安装Part2:GI配置

    三.GI(Grid Infrastructure)安装 3.1 解压GI的安装包 3.2 安装配置Xmanager软件 3.3 共享存储LUN的赋权 3.4 使用Xmanager图形化界面配置GI 3 ...

  4. vue-cli3.0创建项目报npm install --loglevel error 踩坑的那把辛酸泪

    创建项目 vue create vue-pro 然后如下图 一开始以为是npm的问题,卸载了Mac的node ,安装nvm,然后再安装node (可参考: Mac中nvm的安装和使用   https: ...

  5. 90后iOS开发者的出路,如何规划30岁前的自己(程序员必修课)

    前言: 最近发生了一些和我们没有直接关系但是有间接关系的事情.比如华为“清洗”高龄基层员工,比如游戏公司2号员工拿不到股份而离职.先不说事实到底如何,起码很多码农是心有戚戚焉. 最近一年多也发生了一些 ...

  6. Okhttp3 网络请求框架与 Gson

    Maven环境 : <dependency> <groupId>com.squareup.okhttp3</groupId> <artifactId>o ...

  7. 封装 Gson 解析Json到对象是否失败

    在使用Google的 Gson 类库解析 Json 数据时,难免会出现解析失败的情况. 在这种情况下,使用 if(obj == null) 是不可行的,fromJson 方法会自动生成对象的实例,所以 ...

  8. PythonDay03

    ## 第三章 ### 今日内容 1.整型 2.布尔值 3.字符串 ​ 索引​ 切片​ 步长​ 字符串的方法 4.for循环 ### 1.整型 - python3:全部是整形- python2:整形,长 ...

  9. 【错误】【vscode】输出中文是乱码问题

  10. win10和浏览器快捷键

    1. Win10快捷键[Win+↑/↓/←/→] 将当前窗口按比例固定到屏幕的四个边角,如左上.右上.左下.右下.[Win+1/2/3…] 按顺序打开任务栏上的已固定程序(不包括第一个“任务视图”按钮 ...