Welcome to visit personal blog website: www.zhuxin.club

1. Same-origin policy

1.1 define

Same-origin is a security policy of the browser. If two addresses have the same domain name, protocol, and port, they are of the same origin.

Domain name: unique identifier of a website IP address, such as www.baidu.com or www.qq.com

Protocol: A unified convention used by browsers to connect to and access resources. The value can be HTTP or HTTPS.

Port: Different ports correspond to different applications. The default port on the HTTP homepage is 80, and the default port on the HTTPS homepage is 443.

Example (http://www.example.com/list.html as compared to address) :

URL Whether the same
test.example.com/list.html No, the domain name is different
www.example.com/list.html No, the agreement is different
www.example.com:8080/list.html No, the port is different
www.example.com/detail.html is

1.2 Causes and Impacts

The same origin policy exists on the browser as a convention to protect data security of the browser and privacy of users. Without the same origin policy, it is not safe for website A to access the cookies and other information of Website B at will. Now all browsers that support JavaScript use this policy.

2. Cross domain

2.1 Cross-domain restrictions

Addresses of different sources cannot be accessed through Ajax, FETCH, etc. Such requests are called cross-domain requests. However, static resource files such as images, JS scripts and CSS resources can be called across domains by corresponding IMG tags,script tags and link tags.

In addition, browser cookies, WebStorage, and IndexedDB data cannot be read across domains.

2.2 Cross-domain Solution

2.1.1 CORS Cross-Domain Resource Sharing (Mainstream Solution)

Cross-origin Resource Sharing (CORS) is a W3C standard that defines how browsers and servers should communicate when cross-domain resources must be accessed **(requires client and server collaboration)**.

CORS allows browsers to issue XMLHttpRequest requests to cross-domain servers, breaking the limitation that AJAX can only be used in the same source. CORS needs to be supported by both the browser and the server. Currently, all browsers support this function, and Internet Explorer cannot be lower than Internet Explorer 10. How CORS works: When a browser discovers that an AJAX request crosses sources, it automatically adds some additional headers, and sometimes an additional request, but the user doesn’t notice. As long as the server implements the CORS interface, cross-source communication is possible.

Browsers classify cross-domain requests into two categories, and they treat them differently.

1: Simple request (both of the following)

Request methods are one of the following:

  • GET
  • HEAD
  • POST

The HTTP request header does not exceed the following fields:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-type: Application/X-www-form-urlencoded, multipart/form-data, text/plain

For a simple request, the browser directly sends a cross-domain request, and carries Origin in the request header and assigns the value to the current domain name, indicating that this is a cross-domain request.

After receiving the request, the server returns the verification result through the access-Control-Allow-Origin and Access-Control-Allow-methods response headers according to its own cross-domain rules. If the authentication succeeds, the content of the accessed resource is returned directly.

If Origin is not within the permitted range of the response header set by the server, the server will generally return a 403 Forbidden HTTP response and console error.

2: Non-simple requests (cross-domain requests that are not simple requests)

Non-simple requests are requests that have special requirements on the server, such as the request method being PUT or DELETE, or the content-Type field being of Type Application/JSON.

CORS requests that are not simple requests are preceded by an HTTP query request, called a “preflight” request.

The browser asks the server if the domain name of the current web page is on the server’s license list, and what HTTP verb and header fields can be used. The browser issues a formal XMLHttpRequest request only if it receives a positive response; otherwise, an error is reported. But a Preflighted request sent by the browser is an OPTION request

The OPTIONS request header contains the following headers:

  • Origin: Indicates the source from which the request comes.
  • Access-Control-Request-Method:mandatory, which lists the HTTP methods used by the browser for CORS requests.
  • Access-Control-Request-Headers: This field is a comma-separated string that specifies the additional header fields that the browser will send in CORS requests.

After the Origin, access-Control-request-method, and access-Control-request-headers fields are checked by the server, the Origin, access-Control-request-method, and access-Control-request-headers fields are checked. Settings such as access-Control-allow-method or access-Control-allow-headers Headers communicate with the browser to determine whether the request is allowed.

But when Preflighted Requests are verified, the browser sends a real cross-domain request.

But when a Preflighted requests validation fails, a 403 status is returned and the browser does not send a real cross-domain request.

2.1.2 the json

JSONP(JSON with padding) allows the user to pass a callback argument (callback= ABC) to the SCR address as a query string. After receiving the request, the server will wrap the data to be returned with the callback parameter (ABC), which is used as the function name to wrap the returned JSON data, such as ABC (JSON). In this way, the client will default to JS parsing after receiving the ABC (JSON) file from the server. With JSONP, you can customize your own functions to automatically process the returned data.

Example:

Principle:

Pages are not allowed to make cross-domain Ajax requests, but it is possible to reference JS scripts from different domains.

  1. A Script request is automatically issued when a cross-domain Ajax request is executed. The request file is called callback=jQueryxxx, which is the name of a callback function generated randomly by jquery.
  2. The result of this request is a string of jQueryxxx() function calls that are executed to complete the cross-domain request.

In a nutshell, you create script tags dynamically, then cross domains using the SRC attribute, and each cross domain is the introduction of a Script script.

Disadvantages:

1. Security issues, SRC references are open, so jSONP resources are accessible to all. The solution is to use the token parameter in JSONP to verify A’s identity by sharing the same set of cookies between DOMAINS A and B.

2. Data can only be obtained in GET mode but cannot be obtained in POST mode.

3. Can be injected malicious code such as? callback=alert(1); This problem can only be solved by using the regular filter string method. The content after the filter callback cannot have parentheses.

2.3 withCredentials attribute

By default, cross-source requests do not provide credentials (cookies, HTTP authentication, client SSL certificates, and so on). By setting the withCredentials property to true, you can specify that a request should send credentials.

Usage:

  • The client must be inAJAXThe withCredentials attribute is enabled in the request
  • The server sets the response headerAccess-Control-Allow-Credentials: true
  • The server sets the response headerAccess-Control-Allow-OriginIs used to specify the domain name that is allowed across domains and must be an identified domain name. Wildcards such as * cannot be used.