This article was first published in “Browser same-origin policy and Script Error” on Zhihu, please indicate the source of transfer and reprint, otherwise the copyright liability will be investigated.

The same origin policy restricts how documents or scripts loaded from the same source can interact with resources from another source. This is an important security mechanism for isolating potentially malicious files.

aThe sourcethedefine

If both pages have the same protocol, port (if specified), and domain name, then both pages have the same source.

The following table shows the relative homology detection example: http://store.company.com/dir/page.html

URL The results of why
http://store.company.com/dir2/other.html successful
http://store.company.com/dir/inner/another.html successful
https://store.company.com/secure.html failure Different protocols (HTTPS and HTTP)
http://store.company.com:81/dir/etc.html failure Different ports (81 and 80)
http://news.company.com/dir/other.html failure Different domain names (news and Store)

The source of inheritance

Data: URLs gets a new, empty security context.

Scripts executed on a page with about:blank or javascript: URL inherit the source of the document that opened that URL, because these types of URLs do not explicitly contain information about the original server.

For example, about:blank is usually the URL of a new blank pop-up Window that the parent script writes to (for example, through the window.open () mechanism). If this pop-up window also contains code, that code inherits from the same source as the script that created it. Data: THE URL gets a new empty security context.

The Crossorigin attribute of the script tag

The crossorigin attribute value can be anonymous or use-credentials. If there is no attribute value or invalid attribute value, the browser defaults to Anonymous. Crossorigin has three functions:

  1. Crossorigin causes the browser to enable CORS Access checking, which checks the ACCESS-Control-Allow-Origin of the corresponding HTTP header

  2. For js resources that traditional scripts need to fetch across domains, the control exposes the details of its error

  3. For Module Script, controls the credential pattern used for cross-domain requests

When collecting error logs, we usually register a method on the window to detect all exceptions thrown by code:

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
})
Copy the code

However, for cross-domain JS, only a few error messages are given: ‘error: script error’. By using the Crossorigin attribute, cross-domain JS is exposed to the same error message as the same-domain JS. However, the resource server must return an Access-Control-Allow-Origin header or the resource cannot be accessed.

Why are error messages subject to the same Origin policy?

If you are visiting a malicious site and there is a