In? How about cognate strategy and CORS?

Time:2021-2-23

Homology strategy and CORS

1: Homologous strategy

What is homology strategy?

The same origin policy is a kind of convention. Web is built on the same origin policy, and browser is an implementation of the same origin policy. At first, the homology strategy means that the cookie of a web page with different homology can not be obtained by B web page. Later, the extension limits DOM operation and XMLHttpRequest

What is homology?
  • The agreement is the same
  • Same domain name
  • Same port

Only when the above three conditions are met at the same time can it be called homology

Three aspects of homology strategy
  1. Cookie homology policy: different source cookies are not shared
  2. DOM homology policy: forbid DOM operation on different source pages, mainly for iframe cross domain
  3. XMLHttpRequest homology policy: it is forbidden to use xmlhttprequet to make requests to different domains, such as Ajax requests

Let’s take a look at Ajax cross domain request, browser display

<!DOCTYPE html>
<html>
<head>
 < title > Ajax cross domain testing
 <script></script>
</head>
<body>
< button class = "BTN" > request Baidu < / button >
<script>
 $(".btn").click(function(){
 $.ajax({
 url:"http://www.baidu.com",
 type:"get"
 })
 })
</script>
</body>
</html>

Click button, AJAX initiates cross domain request

Take a look at the chrome display

In? How about cognate strategy and CORS?

Foxes
In? How about cognate strategy and CORS?

Why is there a homologous strategy

The purpose of homologous strategy is to protect the information security of users and prevent malicious websites from stealing data. The following is explained by Dom and XMLHttpRequest

If there is no DOM homology policy
  1. Now there is a fake website, which is embedded in a bank website through iframe
  2. By setting the width as like as two peas, the website can be made to be different from URL.
  3. The user enters the password and account name in the iframe nested bank website
  4. In the outer layer of iframe, the user’s password and account are obtained through DOM operation
  5. In this way, the user’s password and account information are stolen
If there is no XMLHttpRequest homology policy
  1. The user logs in to the bank website, submits the login form, and the bank server passes the verification. In order to maintain the conversation, the cookie is returned
  2. At this time, the user browses another website, and this website is a malicious website
  3. The malicious website background sends Ajax request to the bank website, and the request carries the cookie of the first step bank. The bank server verifies the user’s identity through the cookie, and responds to the request of the fake user
  4. In this way, the user’s information is leaked again, and the Ajax request is initiated in the background, so the user will not be aware of this process

So under the protection of homologous strategy, we can access the Internet safely

CORS

Cross domain restrictions

Because of the same origin policy, the browser’s cross domain requests are limited, but sometimes cross domain operations are necessary. For example, in the process of implementing SSO in CAS, it is necessary to redirect the browser to CAS server when accessing the subsystem.

Cors of solution

CORS (cross origin resource sharing) is a W3C standard, which allows browsers to send XMLHttpRequest requests to servers of different origins, thus overcoming the limitation that Ajax and redirection can only be used in the same origin

The implementation of CORS requires the support of both browser and server. The whole CORS communication process is carried out in the background without the participation of users. The browser will automatically add some additional fields to the request header according to the cross domain request. For some cross domain requests, a preflight request will be sent before the real cross domain request.

At present, all browsers support CORS, and the version of IE browser can’t be lower than ie10, so the key to realizing CORS is the server. I think this is normal, because you are cross domain access to me, not my person, and you must ask for my permission for the resources you want.

Two requests

The browser divides CORS requests into two categories: simple requests and non simple requests

A simple request needs to satisfy both of the following conditions

  1. The request method is one of head, get and post
  2. HTTP header fields cannot exceed the following
Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content type: only three values application / X- www.form-urlencded ,multipart/form-data,text/plain

What is not a simple request is not a simple request (bullshit!)

Simple request cross domain process

  1. For simple cross domain request, the browser will directly send the request to the server, and add the origin field in the request header to explain the source information, such as the protocol port domain name.
  2. The server can use this field to decide whether to approve the request or not. If the source of origin is within the range allowed by the server, the server will add an access control origin: true to the response. If the server does not allow it, an error will be thrown when the browser finds that there is no access control origin field in the response.
  3. The default browser will not carry cookies across domains. If necessary, the Ajax request needs to set the property withcredentials to true, and the server needs to set the corresponding header access control allow CR edentials:true

Non simple request cross domain process

For non simple cross domain requests, the browser will send a preflight request to the server before the real request. The request method uses options, and the following information will be added to the header

Origin: source information
Access control request method: lists the methods used by the request
Access control request headers: custom header information

Let’s take an example and practice leads to true knowledge

$(".btn").click(function(){
 $.ajax({
 url:"https://www.baidu.com",
 type:"get",
 headers:{
 "CONTENT":"TEST"
 }//Added custom headers, so it's not a simple request
 })
})

The browser F12 looked at the network, and sure enough, the browser sent a preflight request in advance, and added related fields

In? How about cognate strategy and CORS?

After sending preflight, the server can decide whether to allow the request according to origin, access control request method and access control request headers. The following fields will be added to the allowed response

Access control allow origin: same as simple request. *Delegate agrees to any cross domain request
Access control allow methods: allowed methods. Multiple methods are separated by commas.
Access control allow headers: allowed headers. Multiple methods are separated by commas.
Access control Max age: how long (in seconds) should this preflight request be cached.
Access control allow credentials: allow cookies

If it is not allowed, the server will return a normal HTTP response without any CORS related header information, and the browser will determine that the server does not agree with the pre check request, thus triggering an error

If allowed, every normal CORS request from the browser will be the same as the normal request.

The specific server can set an interceptor

@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
 String originHeader = request.getHeader("Origin");
 response.setHeader("Access-Control-Allow-Origin", originHeader);
 response.addHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With,accessToken");
 response.addHeader("Access-Control-Allow-Credentials", "true");
 response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
 return true;
}

This article refers to

http://www.ruanyifeng.com/blo…

https://www.ruanyifeng.com/bl…

https://juejin.im/post/684490…


Heavy resources!!!

followXiaobai doesn’t want to be a yard farmerThe official account of WeChat.

Backstage replyJava core technology volumeKeyword collection《Java core technology volume》pdf

replyjvmCollect《Deep understanding of Java virtual machine》PDF and《Write JVM by yourself

replyDesign patternCollect《Headfirst design pattern》pdf

replycomputer networkCollect《Computer network top down》pdf

last

I don’t want to be a coder. I usually write some technical blogs, recommend excellent programmer bloggers to you, and have excellent java learning resources I met. I hope to make progress and grow together with you.

If there are any mistakes in the above contents, please point them out. Thank you

Official account click on the exchange, add my WeChat, exchange programming together!

The official account: Xiao Bai does not want to be a code farmer.
In? How about cognate strategy and CORS?