script标签中的crossorigin属性

在前端监控逐渐完善的今天，页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助。

而使用 window.onerror 事件来捕获 js 脚本中的错误信息是重要的手段。

但是对于跨域的资源，onerror 事件通常会上报 "Script error"

由于这并不是 JavaScript 的 bug，所以浏览器出于安全考虑，会主动隐藏其他域下 js 抛出的具体错误信息，但是 onerror 事件可不管你这么多，就是直接上报，在不做过滤的情况下，你会在监控平台中看到特别的"Script error"错误日志。

而解决这个问题的一个办法之一就是在跨域资源的 script 标签中添加 crossorigin 属性

例如页面域名

my.com

加载了跨域js脚本

<script src="user.com/index.js"></script>

这是在没有添加 crossorigin 属性的情况下，如果 user.com/index.js 中抛出了错误，在 my.com 页面中通过 onerror 事件是捕获不到具体错误信息的，只会捕获到 Script error 错误。

加载了具有 crossorigin 属性的跨域 js 脚本。

<script src="user.com/index.js" crossorigin ></script>

这样就可以获取到 user.com/index.js 中的具体错误信息了。

但是 crossorigin 属性并不是无脑加的！

我们先来看下 MDN 中对 crossorigin 的解释：

在HTML5中，一些 HTML 元素提供了对 CORS 的支持，例如 <audio>、<img>、<link>、<script> 和 <video> 均有一个跨域属性 (crossOrigin property)，它允许你配置元素获取数据的 CORS 请求。

这些属性是枚举的，并具有以下可能的值：

关键字	描述
anonymous	对此元素的 CORS 请求将不设置凭据标志。
use-credentials	对此元素的CORS请求将设置凭证标志；这意味着请求将提供凭据。
""	设置一个空的值，如 crossorigin 或 crossorigin=""，和设置 anonymous 的效果一样。

默认情况下（即未指定 crossOrigin 属性时），CORS 根本不会使用。在非同源情况下，设置 "anonymous" 关键字将不会通过 cookies，客户端 SSL 证书或 HTTP 认证交换用户凭据。

即使是无效的关键字和空字符串也会被当作 anonymous 关键字使用。

script标签中的crossorigin属性相关推荐

html script src属性,动态修改script标签中的src属性存在的问题
今天某个同事遇到一个诡异的问题,问题描述如下: 需求:通过脚本动态修改script标签的src来载入一段外部脚本并执行实现方式(#1): document.getElementById('exter ...
[暑假]＜script＞标签中的type属性详解
type属性是必须写的属性吗? 不写的情况: <script>标签中的type属性不是必须写的属性, 因为按照惯例,这个值始终都是"text/javascript", ...
script标签中的async和defer
在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. ja ...
JS中script标签defer和async属性的区别
向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解 ...
浅谈script标签中的async和defer
script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了. 直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲 ...
script标签中type为script type=text/x-template是个啥
写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...
[html] html标签中的lang属性有什么作用？
[html] html标签中的lang属性有什么作用? 根据lang属性来设定不同语言的css样式,或者字体告诉搜索引擎做精确的识别让语法检查程序做语言识别帮助翻译工具做识别帮助网页阅读程序做识别等等 ...
html标签中的lang属性
写在html标签中的lang属性作用:声明当前页面的语言类型. 如: <html lang='en'></html> //英文 <html lang='zh'>&l ...
c:out标签中的escapeXML属性
<c:out>标签中的escapeXML属性在<c:out>中,escapeXML属性默认为true. 当设置escapeXML的属性为true时,将value中的值以字符串 ...

script标签中的crossorigin属性

script标签中的crossorigin属性相关推荐

最新文章

热门文章