This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact

What is cross-domain?

Cross-domain means that the browser cannot execute scripts from other sites. It is caused by the same origin policy of the browser and is a security restriction imposed by the browser on JavaScript.

When we surf the Internet, sometimes need to request another server’s content, this time the browser can’t determine whether you request address security (the content of the request if you include js, can be directly in the browser, if is malicious js script file, when this will pose a threat to our data security), Browsers protect your data by blocking incoming data from the server.

So cross-domain is a spontaneous self-preservation of the browser, and instead of preventing us from sending, it prevents us from receiving. Our request can be sent, but the data returned by the unknown server is blocked by the browser and will not be received by us.

In the world of the Web without security, we have no privacy. Therefore, security policies are needed to protect our privacy and data security.

What is the same origin policy? In what respect is its main performance?

Two urls are said to be homologous if they share the same protocol, domain name, and port. The main performance is:

  • DOM: The same-origin policy limits how JavaScript scripts from different sources can read and write to the current DOM object.
  • Web data: The same origin policy prevents sites of different sources from reading cookies, IndexDB, LocalStorage, and other data of the current site.
  • Network: The same origin policy restricts the sending of a site’s data to a site from a different source by means such as XMLHttpRequest.

Security and convenience trade-offs

The same origin policy isolates DOM, page data, and network communication from different sources to ensure complete security of Web pages. But absolute security requires the sacrifice of convenience, which can make Web projects difficult to develop and use. To find the middle ground, some security is needed to meet the flexibility, which is the current page security strategy prototype.

  • Pages can import third-party resources, but this exposes many security issues such as XSS (such as inserting malicious scripts into HTML files by various means; Sensitive data such as cookies, IndexDB and LoacalStorage are sent to the server by MEANS of XSS), so CSP (Content security policy) is introduced to limit its freedom on the basis of this openness.
  • Cross-domain requests cannot be made directly with XMLHttpRequest or Fetch, so browsers have introduced cross-domain resource Sharing policies (CORS) on top of this strict policy to make it safe for cross-domain operations.
  • The DOM of two different sources cannot be manipulated with each other, so the browser implements cross-document messaging (window.postMessage’s JavaScript interface) to make it safer to communicate.

What is the core of a content Security policy (CSP)?

The core idea of CSP is to let the server decide what resources the browser can load and whether the browser can execute inline JavaScript code

Conclusion:

If there is no security policy in the page, there is no privacy or data security in the Web world, hence the same-origin policy.

The same origin policy is a security policy provided by the Web at DOM, Web data, and network levels to ensure privacy and data security in Web use.

But too strict a security policy will make Web projects difficult to develop and maintain, so we must give up some security to achieve a balance of security and flexibility.

The Web provides security mainly by allowing the embedding of third-party resources and cross-domain resource sharing. To address the risk of allowing third-party resources to be embedded, most typically XSS attacks, browsers introduce content security policies that let the server decide which resources the browser can load. In order to solve the problem of cross-domain resource sharing, browsers introduce cross-domain resource sharing strategy.

Reference Article: Same Origin Policy: Why can’t XMLHttpRequest request resources across domains?