06月21, 2018

script cross origin

问题描述

js放在cdn托管,错误监控系统看不到cdn/index.js内的错误明细,只能看到Script error。需要在应用cdn的js的地方加crossorigin, 默认值为anonymous,即对此元素的CORS请求将不设置凭据标志。

Crossorigin

  1. 对于crossorigin属性,如果不设置的话,在请求script资源时将不检查cors,可直接获取js。浏览器不做跨域校验。也就不存在跨域问题了。

  2. 如果有crossorigin属性,有两类取值

    < script src="https://example.com/example-framework.js"
         crossorigin="anonymous"></script>
    <script src="https://example.com/example-framework.js"
         crossorigin="use-credentials"></script>
    

    对于后者,对此元素的CORS请求将设置凭证标志; 这意味着请求将提供凭据。 只要有crossorigin属性,为空或者""都会设置为默认值"anonymous"。

When

何时需要加crossorigin呢?

如果是平时请求第三方资源,是无需添加该属性的。

想要获取跨域脚本的错误信息,需要添加该属性。因为浏览器在获取跨域脚本错误时,会参考同源策略。 可参考webkit 源码中关于Script error部分的处理。

Example

第三方跨域脚本内容如下:

// test.js
window.addEventListener('error', function (...err) {
  console.log('**catch error in cdn script, details: **')
  console.log(...err)
  console.log('-------')
})
setTimeout(function () {
    ErrorInCdnScript
}, 3000)

本域下的html如下: code

可以看到,如果在test.html引用test.js时,不添加crossorigin,则报错如下:

  1. ErrorInCdnScript => script error 无详细信息
  2. OurHostError => 可看到相信信息(因为报错文件在当前域,未跨域)

添加crossorigin后,报错如下:

  1. ErrorInCdnScript => 详细信息
  2. OurHostError => 详细信息

这些错误都报两遍,因为在test.js和test.html都对window.error添加了监听事件。而错误xiang'xi信息能否报出来,均取决于运行环境与报错文件来源是否跨域,与错误监听文件位置无关。

参考

  1. https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
  2. https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes
  3. https://trac.webkit.org/browser/trunk/Source/WebCore/dom/ScriptExecutionContext.cpp
  4. https://stackoverflow.com/questions/41069330/with-script-crossorigin-anonymous-why-is-a-script-blocked-by-cors-policy

本文链接:http://fengbaiyang.cn/post/script-cross-origin.html

-- EOF --

Comments

暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~