当前位置:网站首页>Web Security (2) -- cross domain resource sharing

Web Security (2) -- cross domain resource sharing

2020-11-07 20:56:34 Coxhuang

List of articles

  • Cross-domain resource sharing (CORS)
    • #1 What is? CORS
    • #2 Two requests
    • #3 Request process
      • #3.1 A simple request
      • #3.2 Complex request

Cross-domain resource sharing (CORS)

#1 What is? CORS

CORS It's a W3C standard , The full name is " Cross-domain resource sharing "(Cross-origin resource sharing).

It allows the browser to cross to the source server , issue XMLHttpRequest request , To overcome AJAX A restriction that can only be used with the same origin .

Whole CORS Communication process , It's all done automatically by the browser , No user involvement is required . For developers ,CORS Correspondence and homology AJAX There is no difference in communication , The code is exactly the same . Once the browser finds AJAX Request cross source , Will automatically add some additional header information , Sometimes there is an additional request , But users don't feel .

therefore , Realization CORS The key to communication is the server . As long as the server implements it CORS Interface , You can communicate across sources .

#2 Two requests

The browser will CORS Requests fall into two categories : A simple request (simple request) And not a simple request (not-so-simple request).

  1. A simple request

As long as the following two conditions are met , It's a simple request .

  • The request method is one of three :
    • HEAD
    • GET
    • POST
  • HTTP The header information of does not exceed the following fields :
    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type: Three values only application/x-www-form-urlencoded、multipart/form-data、text/plain

If the above two conditions are not met at the same time , It's not a simple request .

2. Complex request

Not satisfied with the above simple , It's all complex requests

#3 Request process

#3.1 A simple request

When browsers find cross domain Ajax It's a simple request , Will go through the following process :

  • browser : brother , You need cross domain request ! I have to ask the server elder brother to agree , I'm in your header Riga Origin Information , Let the server know where you are from
  • The server : Who are you from , Show your Origin Show me ( Big brother of the server has Origin And your own Origin Compare ), Within my permission , Allow access to the server

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-aKvZLMX8-1584912081477)(https://raw.githubusercontent.com/Coxhuang/yosoro/master/20200323031039.png)]

Server configuration CORS

// Specifies that other domains are allowed to access 
'Access-Control-Allow-Origin:http://admin.minhung.me:19700'// General usage (*, Specify domain , Dynamic setting ),3 Because * It is not allowed to carry the authentication head and cookies
// Whether to allow subsequent requests to carry authentication information (cookies), The value can only be true, Otherwise do not return 
'Access-Control-Allow-Credentials:true'

Access-Control-Allow-Origin There are many ways to set it :

  • Set up It's the simplest and most crude , But the server is for security reasons , Definitely not , and , If it is Words , The viewer will not send cookies, Even if your XHR Set up withCredentials
  • Dynamically set to request domain , When many people work together , Multiple front ends to one back end , It's convenient

#3.2 Complex request

The most common situation is , When we use PUT perhaps DELETE When asked , The browser will send option( preview ) request

Unlike simple requests ,option More requests 2 A field :

  • Access-Control-Request-Method: This field is required , Used to list the browser's CORS What will be used in the request HTTP Method .
  • Access-Control-Request-Headers: This field is a comma separated string , Specify browser CORS The request will send additional header information fields

Access-Control-Request-Method,Access-Control-Request-Headers It returns all requests that satisfy the server's requirements , Request header , Not limited to the request , Server received " preview " After the request , Checked Origin、Access-Control-Request-Method and Access-Control-Request-Headers After fields , Confirm that cross source requests are allowed , You can respond .

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://api.minhung.me:19800
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

above HTTP Responding , The key is Access-Control-Allow-Origin Field , Express http://api.minhung.me:19800 Can request data . This field can also be set to asterisk , Indicates consent to any cross source request .

If the browser denies " preview " request , Will return to a normal HTTP Respond , But nothing CORS Related header information fields . At this time , The browser will assume that , The server does not agree with the pre check request , So trigger an error , By XMLHttpRequest Object's onerror Callback function capture . The console will print out the following error message .

Once the server passes " preview " request , Every time the browser is normal CORS request , Just like a simple request , There will be one. Origin Header information field . Server response , There will always be one Access-Control-Allow-Origin Header information field .

Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .

版权声明
本文为[Coxhuang]所创,转载请带上原文链接,感谢