Cross-origin Resource Sharing: cross-origin Resource Sharing (CORS) and Cross-origincors

Cross-origin Resource Sharing: cross-origin Resource Sharing (CORS) and Cross-origincors

• Cross-origin Resource Sharing (CORS): The same origin protocol + domain name + port in the Same Origin Policy of the browser are completely consistent.

  1. The same source policy of the browser isolates the security mechanism of potential malicious files and limits the boundaries between information transmission and use, rather than the confidentiality mechanism of information.  <script> <link> and form submission can all implement cross-origin requests, but they may be restricted by the same-origin policy to varying degrees, depending on the browser; 2. cross-origin Resource Sharing (CORS) is a W3C standard that is executed when both the client and the server comply with each other. The entire CORS communication process is automatically completed by the browser, there is no difference in code sharing with same-source resources (except for using WithCredentials for CORS interaction); 3. if the client does not support cross-origin Resource Sharing (CORS), the transmission and use of information may be limited by the same-origin policy, but the server returns a normal HTTP response; 4. IE does not add the port number to the same-source policy. Chrome and Firefox do not allow cross-origin access to HTTP from the HTTPS domain.

  The following table provides an example of relative http: // store.company.com/dir/page.htmlsource Detection:

  URL	Result	Cause
  http://store.company.com/dir2/other.html	Successful
  http://store.company.com/dir/inner/another.html	Successful
  https://store.company.com/secure.html	Failed	Different protocols (https and http)
  http://store.company.com:81/dir/etc.html	Failed	Different ports (81 and 80)
  http://news.company.com/dir/other.html	Failed	Different Domain Names (news and store)

• Browser EvasionSame-origin policy: The following lists some common available methods.

  1. document. domain: Different subdomains use the same document. domain parent-level domain to share cookies and DOM (iframe) document. domain = "company.com: 8080"; 2. fragment identifier: in iframe scenarios, the Parent and Child pages use the fragment after URL # to transmit data windows across domains. onhashchange = function () {var message = window. location. hash ;//...} 3. window. name: no matter whether it is the same source or not, as long as this attribute is set for the previous webpage in the same window, the latter webpage can read it. Window. name has a large capacity and can be placed with a very long string var data = document. getElementById ('myiframe '). contentWindow. name; 4. window. postMessage (Cross-document Communication Cross-document Messaging): This is the newly added API var popup = window in html5. open ('HTTP: // bbb.com ', 'title'); popup. postMessage ('Hello World! ', 'HTTP: // bbb.com'); 5. jsonp: The biggest feature is its simple application. It is supported by all old browsers, and the server transformation is very small. 6. webSocket: it uses ws: // (unencrypted) and wss: // (encrypted) as the Protocol prefix. The Protocol does not support the same source policy. As long as the server supports the same source policy, it can be used for cross-source communication. 7. proxy Server: Add a Proxy Server node in the current domain to access the Proxy for data outside the domain. 8. CORS: I will not go into details here

• Cross-origin Resource Sharing(CORS)RequestGenerally, CORS requests can be divided into two types: simple requests and pre-check requests. Regardless of the Request type, the browser reports an error as long as the server response does not contain the correct header such as Access-Control-Allow-Origin: http://foo.example.

  Simple request:Simple request compared with the common request, the request header field Origin, such as Origin: http://foo.example, when the server is more than the response header field Access-Control-Allow-Origin, like Access-Control-Allow-Origin: http://foo.example or *. Simple requests must meet all of the following conditions:

  • Use one of the following methods:
    • GET
    • HEAD
    • POST
      • Content-Type: Only the Content-Type value of the post method is equal to one of the following for simple requests:
      • text/plain
      • multipart/form-data
      • application/x-www-form-urlencoded
  • The Fetch Specification defines a set of first fields for CORS security. Do not set other first fields other than this set manually. This set is:
    • Accept
    • Accept-Language
    • Content-Language
    • Content-Type
    • DPR
    • Downlink
    • Save-Data
    • Viewport-Width
    • Width

  
  Pre-check request: Precheck requests must be used first.OPTIONSMethod To obtain whether the server allows the actual request. If the server agrees, the actual request is sent again, this avoids the unexpected impact of cross-origin requests on server user data. Precheck requests must meet all of the following conditions:

  • The following HTTP method is used:
    • PUT
    • DELETE
    • CONNECT
    • OPTIONS
    • TRACE
    • PATCH
  • Other header fields except the CORS header field set are set manually. This set is:
    • Accept
    • Accept-Language
    • Content-Language
    • Content-Type(But note the additional requirements below)
    • DPR
    • Downlink
    • Save-Data
    • Viewport-Width
    • Width
  •  Content-TypeIs not one of the following:
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

   

   

• Cross-origin Resource Sharing (CORS) with identity creden: By default, CORS does not include HTTP cookies and HTTP authentication information in requests. Therefore, set the withCredentials flag to true, as shown below:

  var invocation = new XMLHttpRequest();var url = 'http://bar.other/resources/credentialed-content/';    function callOtherDomain(){  if(invocation) {    invocation.open('GET', url, true);    invocation.withCredentials = true;    invocation.onreadystatechange = handler;    invocation.send();   }}

  However, if the server response is not carriedAccess-Control-Allow-Credentials: true or server settingThe value of Access-Control-Allow-Origin is "*".The browser will not return the response content to the request sender.

• Cross-origin Resource Sharing (CORS) HTTP Header: CORS defines the response header and request header. Most of these headers contain the same prefix Access-Control-*, except for Origin. For more information, see HTTP access control (CORS)
• Reference:

  1. browser same-origin policy

  2. Browser Same-source policy and Its Avoidance Methods

  3. CORS details

  4. HTTP access control (CORS)