浏览器同源策略以及Script Error错误

本文首发于知乎 《浏览器同源策略以及Script Error错误》 ，搬运转载请注明出处，不然追究版权责任。

同源策略限制了从同一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

一个源的定义

若是两个页面的协议，端口（若是有指定）和域名都相同，则两个页面具备相同的源。

下表给出了相对http://store.company.com/dir/page.html同源检测的示例:

URL	结果	缘由
http://store.company.com/dir2/other.html	成功
http://store.company.com/dir/inner/another.html	成功
https://store.company.com/secure.html	失败	不一样协议 ( https和http )
http://store.company.com:81/dir/etc.html	失败	不一样端口 ( 81和80)
http://news.company.com/dir/other.html	失败	不一样域名 ( news和store )

源的继承

data：URLs得到一个新的，空的安全上下文。

在页面中用 about:blank 或 javascript: URL 执行的脚本会继承打开该 URL 的文档的源，由于这些类型的 URLs 没有明确包含有关原始服务器的信息。

例如，about:blank 一般做为父脚本写入内容的新的空白弹出窗口的 URL（例如，经过  Window.open()  机制）。 若是此弹出窗口也包含代码，则该代码将继承与建立它的脚本相同的源。data: URL会获得一个新的空的安全上下文。

script标签的crossorigin属性

crossorigin的属性值能够是anonymous、use-credentials，若是没有属性值或者非法属性值，会被浏览器默认作anonymous。crossorigin的做用有三个：

1. crossorigin会让浏览器启用CORS访问检查，检查http相应头的Access-Control-Allow-Origin

2. 对于传统script须要跨域获取的js资源，控制暴露出其报错的详细信息

3. 对于module script，控制用于跨域请求的凭据模式

咱们在收集错误日志的时候，一般会在window上注册一个方法来监测全部代码抛出的异常：

window.addEventListener('error', function(msg, url, lineno, colno, error) {
  var string = msg.toLowerCase()
  var substring = "script error"
  if (string.indexOf(substring) > -1){
    alert('Script Error: See Browser Console for Detail')
  } else {
    var message = {
      Message: msg,
      URL:  url,
      Line: lineNo,
      Column: columnNo,
      'Error object': JSON.stringify(error)
    }
    // send error log to server
    record(message)
  }
  return false
})
复制代码

可是对于跨域js来讲，只会给出不多的报错信息：'error: script error'，经过使用crossorigin属性可使跨域js暴露出跟同域js一样的报错信息。可是，资源服务器必须返回一个 Access-Control-Allow-Origin 的header，不然资源没法访问。

为何错误信息要遵照同源策略？

若是你在访问一个恶意网站，页面上有一段<script src="yourbank.com/index.html">，当发生了脚本错误，错误信息可能会透露出你是否已经登陆了（若是你已经登陆了，错误信息多是 “欢迎 Fred...” is undefined，若是你没登陆，错误信息多是“请登陆...” is undefined 之类的）。若是这个恶意网站对不少银行机构进行了该行为，他们很容易就知道你是在访问哪家银行，就能作出更具备针对性的钓鱼页面。