开发者社区> 问答> 正文

“Script error.”的产生原因是为什么?

“Script error.”的产生原因是为什么?

展开
收起
保持可爱mmm 2020-03-28 20:30:21 1272 0
2 条回答
写回答
取消 提交回答
  • 技术架构师 阿里云开发者社区技术专家博主 CSDN签约专栏技术博主 掘金签约技术博主 云安全联盟专家 众多开源代码库Commiter

    js脚本问题,查看下源代码,看一下下

    2020-03-28 20:32:35
    赞同 展开评论 打赏
  • “Script error.”有时也被称为跨域错误。当网站请求并执行一个托管在第三方域名下的脚本时,就可能遇到该错误。最常见的情形是使用 CDN 托管 JS 资源。 为了更好地理解,假设以下 HTML 页面部署在 http://test.com 域名下:

    假设 foo 方法调用了一个未定义的 bar 方法:

    // another-domain.com/app.js function foo() { bar(); // ReferenceError: bar is not a function } 页面运行之后,捕获到的异常信息如下:

    "Script error.", "", 0, 0, undefined 其实这并不是一个 JavaScript Bug。出于安全考虑,浏览器会刻意隐藏其他域的 JS 文件抛出的具体错误信息,这样做可以有效避免敏感信息无意中被不受控制的第三方脚本捕获。因此,浏览器只允许同域下的脚本捕获具体错误信息,而其他脚本只知道发生了一个错误,但无法获知错误的具体内容。 请参考 Webkit 源码:

    bool ScriptExecutionContext::sanitizeScriptError(String& errorMessage, int& lineNumber, String& sourceURL) { KURL targetURL = completeURL(sourceURL); if (securityOrigin()->canRequest(targetURL)) return false; errorMessage = "Script error."; sourceURL = String(); lineNumber = 0; return true; } 了解了 “Script error.”的产生原因之后,接下来看看如何解决这个问题。 解法 1:开启 CORS(Cross Origin Resource Sharing,跨域资源共享) 为了跨域捕获 JavaScript 异常,可执行以下两个步骤: 添加 crossorigin="anonymous" 属性。

    此步骤的作用是告知浏览器以匿名方式获取目标脚本。这意味着请求脚本时不会向服务端发送潜在的用户身份信息(例如 Cookies、HTTP 证书等)。 添加跨域 HTTP 响应头。

    Access-Control-Allow-Origin: * 或者

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

    说明 大部分主流 CDN 默认添加了 Access-Control-Allow-Origin 属性。以下是阿里 CDN 的示例:

    $ curl --head https://retcode.alicdn.com/retcode/bl.js | grep -i "access-control-allow-origin" => access-control-allow-origin: * 完成上述两步之后,即可通过 window.onerror 捕获跨域脚本的报错信息。回到之前的案例,页面重新运行后,捕获到的结果是:

    => "ReferenceError: bar is not defined", "http://another-domain.com/app.js", 2, 1, [Object Error] 解法 2(可选):try catch 难以在 HTTP 请求响应头中添加跨域属性时,还可以考虑 try catch 这个备选方案。 在之前的示例 HTML 页面中加入 try catch:

    再次运行,输出结果如下:

    => ReferenceError: bar is not defined at foo (http://another-domain.com/app.js:2:3) at http://test.com/:15:3 => "Script error.", "", 0, 0, undefined 可见 try catch 中的 Console 语句输出了完整的信息,但 window.onerror 中只能捕获“Script error”。根据这个特点,可以在 catch 语句中手动上报捕获的异常。

    // 参考本文末尾的相关文档“前端监控 API 使用指南” __bl.error(error, pos);

    说明 尽管 try catch 方法可以捕获部分异常,但推荐采用解法 1。

    2020-03-28 20:31:54
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
From R Script to Production Using rsparkling 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载