一些JS脚本在Chrome中加载但在Firefox中没有加载

Question

一些JS脚本在Chrome中加载但在Firefox中没有加载

6

我在我的网站上遇到了一些外部脚本的奇怪问题。最终我将它缩小到了这段代码。

<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js" onload="console.log('conversion')"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" onload="console.log('jquery')"></script>

在火狐浏览器中加载此内容时只有第二个脚本会被加载，而在谷歌浏览器中则会全部加载。这是在最新版本的OSX浏览器下出现的情况。

现在如果我给这两个脚本都添加crossorigin属性，则在谷歌浏览器中会停止工作，并出现以下错误提示：

Script from origin 'http://www.googleadservices.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com:3000' is therefore not allowed access.

此时两个脚本如下：

<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js" onload="console.log('12123')" crossorigin async></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" onload="console.log('123')" async crossorigin></script>

我对这种行为差异感到惊讶。这是因为Firefox比Chrome更严格吗？这是我设置的某个选项吗？还是Firefox / Chrome方面的一个错误？

此外，我应该与供应商交谈以获取他们的js设置进行CORS吗？令我惊讶的是，Google失败了，但我还有其他资源也出现了问题。

根据MDN的说法，script标签不受同源策略的限制。

- Karthik T

尝试交换它们的位置（先放jQuery）。 - ericosg

@ericosg 这只是一个人工示例，我的代码中并没有这两行，我相信我的代码只使用了第一行作为外部资源。在发现FF和Chrome之间的差异后，我从Stack Overflow源代码中找到了第二行 :P - Karthik T

请参考以下文章：https://dev59.com/FWgv5IYBdhLWcg3wY_42 - Rovi

请查看此回答：https://dev59.com/vl4b5IYBdhLWcg3w61Z3#32738110 - Sarhanis

2个回答

2

如果存在脚本属性，则HTTP标头也需要存在。基本上，这适用于两种浏览器。

脚本标记crossorigin属性尚不是标准，但CORS实现应该是标准的。请参见：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-crossorigin 我认为你看到的是WebKit CORS实现中的错误。一段时间前曾提交了一个类似问题的错误报告，但我认为他们没有跟进。请参见WebKit bug 107389 当查看每个标头时，您会发现googleadservices未发送任何CORS信息，这应该导致Chrome无法加载资源。这是Firefox所做的，但是Chrome似乎需要该属性才能正确阻止。

curl -i "https://www.googleadservices.com/pagead/conversion.js"

HTTP/1.1 200 OK
P3P: policyref="https://www.googleadservices.com/pagead/p3p.xml", CP="NOI DEV PSA PSD IVA IVD OTP OUR OTR IND OTC"
Content-Type: text/javascript; charset=ISO-8859-1
Date: Mon, 22 Feb 2016 05:10:29 GMT
Expires: Mon, 22 Feb 2016 05:10:29 GMT
Cache-Control: private, max-age=86400
X-Content-Type-Options: nosniff
Content-Disposition: attachment; filename="f.txt"
Server: cafe
X-XSS-Protection: 1; mode=block
Alternate-Protocol: 443:quic,p=1
Alt-Svc: quic=":443"; ma=2592000; v="30,29,28,27,26,25"
Accept-Ranges: none
Vary: Accept-Encoding
Transfer-Encoding: chunked

使用curl获取链接内容：curl -i https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

HTTP/1.1 200 OK
Vary: Accept-Encoding
Content-Type: text/javascript; charset=UTF-8
Access-Control-Allow-Origin: *
Timing-Allow-Origin: *
Date: Tue, 16 Feb 2016 17:29:02 GMT
Expires: Wed, 15 Feb 2017 17:29:02 GMT
Last-Modified: Fri, 16 Oct 2015 18:27:31 GMT
X-Content-Type-Options: nosniff
Server: sffe
X-XSS-Protection: 1; mode=block
Cache-Control: public, max-age=31536000, stale-while-revalidate=2592000
Age: 475251
Alternate-Protocol: 443:quic,p=1
Alt-Svc: quic=":443"; ma=2592000; v="30,29,28,27,26,25"
Accept-Ranges: none
Transfer-Encoding: chunked

- Bryan Clark

最后终于有一个详实的答案了。您是否在说所有 CDN 风格的服务都需要提供标题？我的链接指向 MDN，它说脚本可以嵌入而无需进行 CORS 处理，那么如果跨源是默认的，并且 Chrome 是有问题的，那么属性的意义是什么？您引用的错误与属性有关，但您说问题在于未提供属性时的 Chrome，您可以找到该错误吗？ - Karthik T

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- IeuanG · Accepted Answer

跨域资源共享政策的存在是为了防止站点 A从站点 B获取脚本或数据，并将其包含在自己的站点上。如果站点 A 希望允许站点 B 访问这些脚本，则可以设置 Access-Control-Allow-Origin 标头。这个标头意味着站点 B可以允许指定的主机将这些脚本包含在他们的站点上。 站点 B需要在其服务器上启用 Access-Control-Allow-Origin 标头，以允许您访问它。对于单个 URL，请设置以下标头：

Access-Control-Allow-Origin: http://yoursite.com

编辑

crossorigin属性并不允许不同的来源使用脚本，它只是以不同的方式处理window.onerror。根据MDN页面：

对于未通过标准CORS检查的脚本，普通脚本元素仅向window.onerror传递最少量信息。为了允许使用单独域名提供静态媒体的网站记录错误日志，一些浏览器已经启用了相同定义的crossorigin属性来处理脚本，就像标准img crossorigin属性一样。正在尝试在WHATWG邮件列表上制定此属性的标准化努力。