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

Question

我的网站上的一些外部脚本存在一些奇怪的问题。我终于把它归结为这个sn-p。

<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>

在 firefox 中加载它只加载第二个脚本，而在 chrome 中加载。这是在带有最新浏览器的 OSX 上。

现在，如果我将 crossorigin 属性添加到两个脚本，那么它会停止在 chrome 中工作并出现此错误 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 的错误？

另外，我是否应该与供应商联系，让他们为 CORS 设置 js？让我印象深刻的是 google 失败了，但我还有另一个资源中断。

MDN 声称 script 标签不受同源策略的限制。

Answer 1

跨域资源共享政策的存在是为了防止 Site A 获取托管在 Site B 上的脚本或数据，并将它们包含在自己的网站上。如果站点 A 想要允许站点 B 访问这些脚本，他们可以设置 Access-Control-Allow-Origin 标头。此标头意味着Site B 可以允许指定主机在其站点上包含脚本。

Site B 需要在他们的服务器上启用 Access-Control-Allow-Origin 标头，以允许您访问它。 对于单个 url，设置以下标头：

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

编辑

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

普通脚本元素向 window.onerror 传递最少的信息 对于未通过标准 CORS 检查的脚本。允许错误 记录使用单独域作为静态媒体的站点， 一些浏览器已经为脚本启用了 crossorigin 属性 使用与标准 img 跨域属性相同的定义。 WHATWG 正在努力对该属性进行标准化 邮件列表。

Answer 2

如果存在 script 属性，则 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 -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