jsonp跨域资源引起CORB

wuyangnju 发布于2019-08-16 15:23 / 2302人阅读

摘要：三原因分析浏览器在加载可以跨域资源时，在将资源载入页面时对其进行识别与拦截等一系列处理。从而禁用了客户端浏览器的类型嗅探行为即把不可执行的类型转变为可执行的类型。

一、jsonp的使用

jsonp是实现跨域请求数据的一种方式，解决了由于浏览器同源策略带来的安全限制；虽然浏览器有同源策略的限制，但对于一些特殊的dom元素却可引用非同源资源，例如

调用结果

如上，当在localhost:9090站点访问localhost:8080的接口资源时，出现跨域错误。

如错误提示，可在服务器端代码中设置响应头“Access-Control-Allow-Origin”实现允许跨域

script解决跨域问题

服务端代码
如上不变

客户端代码




    
    script解决跨域
    
    ");
            });
        });

调用结果

jsonp解决跨域

服务端代码
如上不变

客户端代码




    
    jsonp解决跨域

调用结果

通过指定ajax的dataType为“jsonp”，jsonp指定服务端返回jsonp格式数据；请求会自动带上参数callback=?

二、CORB问题的由来

当服务端代码中添加安全响应头时：
服务端代码

@RequestMapping(value = "/load/data")
    public void loadData2(@RequestParam("callback") String callback,
                         HttpServletResponse response) throws IOException {
        // 安全响应头
        response.addHeader("X-Content-Type-Options", "nosniff");
        response.setContentType("text/html;charset=UTF-8");

        Map data = new HashMap<>();
        data.put("name", "xudj");
        data.put("age", "18");
        // 转json
        String jsonData = JSON.toJSONString(data);

        //用回调函数名称包裹返回数据
        String result = callback + "(" + jsonData + ")";
        response.getWriter().write(result);
    }

如上所示，代码中多出
// 安全响应头
response.addHeader("X-Content-Type-Options", "nosniff");
response.setContentType("text/html;charset=UTF-8");

导致使用jsonp解决跨域的请求出现如下错误：

如上，如果服务端代码没有指定ContentType时，则出现如下错误：

以上均是由response.addHeader("X-Content-Type-Options", "nosniff");导致的浏览器执行script时通过对MIME类型检测过滤掉不安全的文件或请求。

三、原因分析

CORB（Cross-Origin Read Blocking）：浏览器在加载可以跨域资源时，在将资源载入页面时对其进行识别与拦截等一系列处理。
X-Content-Type-Options(:nosniff)：相当于一个提示标志，被服务器用来提示客户端须遵循在Content-Type首部中对MIME类型的设定，不能对其进行修改。
从而禁用了客户端（浏览器）的MIME类型嗅探行为（即把不可执行的MIME类型转变为可执行的MIME类型）。指定值为nosniff时，会拒绝以下两种请求：

请求类型：style，MIME类型不是“text/css”

请求类型：script，MIME类型不是“Javascript类型”，Javascript类型有text/javascript、application/javascript、application/x-javascript等

所以，当服务端出现response.addHeader("X-Content-Type-Options", "nosniff");安全相应头，且未指定Content-Type为Javascript类型类型时，jsonp请求跨域资源时变出现如上CORB或拒绝解析的问题。

四、解决办法

根据第三步问题原因的分析中可知，修改方法有如下两种：

去除服务端response.addHeader("X-Content-Type-Options", "nosniff");的配置，但可能造成一些安全上的问题，笔者这里不做扩展，有兴趣的同学可以留言讨论

服务指定Content-Type为Javascript类型的一种即可

启用jsonp，将跨域的数据请求转到本站服务器，由本站服务器去做跨域请求，即跳过浏览器同源策略的限制

云服务器 GPU云服务器 jsonp 跨域 jsonp 跨域乱码 jsonp跨域请求 ajax jsonp跨域传值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/73454.html

腾讯地图WebService API 和 CORB误会

摘要：腾讯地图和的误会最近业务开发中，涉及到了腾讯地图跨域。这个需要腾讯地图的，就会这里遇到的问题之后就是拿着省份，去请求后端的接口，获取该省份对应的门店啦。调用腾讯地图需要跨域这个很好理解。详细的可以看这大哥的文章简单说会显示资源的获取。腾讯地图WebService API 和 CORB的误会最近业务开发中，涉及到了腾讯地图API 、跨域、 CORB。虽然最后的结果方法很简单，但...

Kylin_Mountain 2019-08-23 12:18 评论0 收藏0
js跨域问题及常用的两种解决方案

摘要：类似这样而在客户端我们只需要定义一个预定好的回调函数即可。处理跨域请求得到的数据其中的是我们在客户端定义好的在数据请求成功后要执行的回调函数。跨域产生的原因跨域是由浏览器的同源策略引起的，即不同源（协议,域名,端口中其中有一个不同）的js是不能读取对方的资源的。当要网站中的js要请求其他网站的数据时就会产生跨域问题，就像下面这样，浏览器会报错。 showImg(https://se...

gyl_coder 2019-08-21 13:50 评论0 收藏0
JavaScript跨域方式

摘要：跨域原因同源策略在客户端编程语言中，如和，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。由两部分组成回调函数和数据。 1.JavaScript跨域原因--同源策略在客户端编程语言中，如javascript和 ActionScript，同源策略是一个很重要的安全理...

Cciradih 2019-08-20 11:07 评论0 收藏0
浏览器同源策略，及跨域解决方案

摘要：三哪些会受到同源策略限制对于浏览器来说，除了会受到同源策略的限制外，浏览器加载的一些第三方插件也有各自的同源策略。九的现代浏览器允许脚本直连一个地址而不管同源策略。一、Origin（源）源由下面三个部分组成：域名端口协议两个 URL ，只有这三个都相同的情况下，才可以称为同源。下来就以 http://www.example.com/page.html 这个链接来比较说...

scq000 2019-08-23 12:08 评论0 收藏0