为什么会有那么多Script Error错误

错误监控作为开发日常的工作保证，但却经常在错误平台看到的是这种莫明其妙，少得可怜的错误信息，让人无从下手

TL;DR

1. 引出Script Error错误，是由于浏览器的同源策略，对于跨域的脚本捕获的错误，只会输出如此简短一句；
2. 既然是同源策略，就祭出CORS宝典，给JS请求返回Access-Control-Allow-Origin: *，就可以解决了；

产生Script Error的原因

浏览器在同源策略限制下，出于安全上的考虑，页面无权限获取异常详情， 只输出 Script error 的错误信息。

在 webkit 的源码里可以看到 Script error的输出过程，从下面的代码看到，

1. canIncludeErrorDetails判断Origin请求头是不是同源
2. dispatchErrorEvent抛出错误详情，抛出方式由上面的同源与否来决定

代码语言：javascript复制

bool ScriptExecutionContext::dispatchErrorEvent(const String& errorMessage, int lineNumber, int columnNumber, const String& sourceURL, JSC::Exception* exception, CachedScript* cachedScript)
	{
	    auto* target = errorEventTarget();
	    if (!target)
	        return false;
	
	    RefPtr errorEvent;
	    if (canIncludeErrorDetails(cachedScript, sourceURL))
	        errorEvent = ErrorEvent::create(errorMessage, sourceURL, lineNumber, columnNumber, { vm(), exception ? exception->value() : JSC::jsNull() });
	    else
	        errorEvent = ErrorEvent::create("Script error."_s, { }, 0, 0, { });
	
	    // other code 
	}
	
// FIXME: Should this function be in SecurityContext or SecurityOrigin instead?
	bool ScriptExecutionContext::canIncludeErrorDetails(CachedScript* script, const String& sourceURL)
	{
	    ASSERT(securityOrigin());
	    if (script) {
	        ASSERT(script->origin());
	        ASSERT(securityOrigin()->toString() == script->origin()->toString());
	        return script->isCORSSameOrigin();
	    }
	    return securityOrigin()->canRequest(completeURL(sourceURL));
	}
复制代码

CORS的解决方案

其实很简单，给JS请求返回Access-Control-Allow-Origin: *，浏览器就能正常通过window.onerror来捕获详细的错误鸟~

1. nginx上的配置

代码语言：javascript复制

location ~* .js$ {
	add_header access-control-allow-origin *;
}

1. 设置*会不会有什么安全问题呢，没想出来会有什么安全问题(如果有想到的可以留言说下)，JS脚本本来就是可以跨域请求的。看了下淘宝，也是这么干的

1. 如何根据请求源，动态判断要不要返回Access-Control-Allow-Origin呢

正常情况下，跨域JS请求是不会发送Origin请求头，我们在script标签里加上crossorigin属性就可以使浏览器发送了。 然后服务器就可以根据Origin头部来判断来者何人鸟

代码语言：javascript复制

<script src="other-domain.com/path/to/s.js" crossorigin>script>
复制代码

---

参考文章：

webkit: trac.webkit.org/browser/tru…

what the heck is 'script error': blog.sentry.io/2016/05/17/…

access html

0 人点赞