Web Security (1) -- browser homology strategy

List of articles

• Web Security ( One ) --- Browser homology strategy
  • #1 What is browser homology strategy
    • #1.1 What is homology ?
    • #1.2 Restriction of homologous strategy
    • • #1.2.1 Can't read or write Cookie、Session Storage、Local Storage、Cache、Indexed DB
      • #1.2.2 DOM
      • #1.2.3 Asynchronous requests
  • #2 Cross domain
    • #2.1 Solutions to cross domain problems
    • #2.2 Cross-domain resource sharing (CORS)
      • # CORS How to carry Cookie
    • #2.3 Nginx Reverse proxy

Web Security ( One ) — Browser homology strategy

#1 What is browser homology strategy

Browser's homology strategy has always been a common problem in development , It is the core and basic security function of browser , If the same origin policy is missing , The normal function of the browser will be affected

#1.1 What is homology ?

Homology means the same agreement 、 Same as domain name 、 Same port .

notes ：IE No Port number Add to the components of the same source strategy

In the browser , <script> 、<img>、<iframe>、<link> All tags can be loaded across domains , And not limited by the browser's same origin policy , These tapes src Every time the tag of the property is loaded , It's actually launched by the browser once GET request , Different from normal requests (XMLHTTPRequest) Yes. , adopt src Property loaded resources , Browsers limit JavaScript Authority , Make it unreadable src Load the returned content

Browser homology strategy , In addition to the above tags can be loaded across domains , When other cross domain requests occur , The request is sent to a cross domain server , And the server will return data , It's just a browser " Rejection " Returned data

#1.2 Restriction of homologous strategy

The same source strategy of browser aims to protect the information security of users , In order to prevent malicious websites from stealing users' data in the browser , If It's not homologous The site of , The following operations will not be possible :

• Cookie、LocalStorage and IndexDB Unable to read and write
• DOM and Js Object can't get
• AJAX Request cannot be sent

#1.2.1 Can't read or write Cookie、Session Storage、Local Storage、Cache、Indexed DB

Users log in to a site , After the site back-end server verifies that the account password is correct , Returns the Cookie、Token Or the user name and password to the client browser , The browser will save this personal data to Cookie、Session Storage、Local Storage、Cache、Indexed DB One of them ( How to save it , It's up to the website developer ), If the browser doesn't have the same origin policy , When a user visits a malicious website , Malicious websites can get users' data through scripts , This is extremely unsafe behavior

So if it's not homologous , Can't read and write other site settings Cookie、Session Storage、Local Storage、Cache、Indexed DB

#1.2.2 DOM

From a source js You can only read and write from your own source DOM Trees cannot read from other sources DOM Trees

#1.2.3 Asynchronous requests

Generally speaking, from one source js You can only send requests to your own source interface , Cannot send requests to interfaces from other sources . Of course, the essence is , On the one hand, the browser finds a source of js When sending a request to an interface of another source, it will automatically bring Origin The header identifies the source from , Let the server pass through Origin Judge whether to respond to ; On the other hand , If the browser does not find Access-Control-Allow-Origin The domain that sends the request is allowed to request, and that does not allow parsing

#2 Cross domain

Access between different domains is called cross domain , Because of the limitation of the same origin policy , That leads us to communicate between different sources , There is a problem that the browser cannot accept the data returned by the server , This is also the problem that must be solved in the project of separating the front end from the back end

#2.1 Solutions to cross domain problems

• adopt jsonp Cross domain
• document.domain + iframe Cross domain
• location.hash + iframe
• window.name + iframe Cross domain
• postMessage Cross domain
• Cross-domain resource sharing (CORS)
• Nginx Reverse proxy
• nodejs Middleware agent cross domain
• WebSocket Protocol cross domain

The following is mainly about two common methods I usually use to solve cross domain problems CORS and Nginx Reverse proxy

#2.2 Cross-domain resource sharing (CORS)

Only server settings Access-Control-Allow-Origin that will do , There is no need to set the front end , To bring cookie request ： Both front and rear ends need to be set .

• The server needs to set the following response header

Access-Control-Allow-Origin:http://www.admin.minhung.me //  General usage （*, Specify domain , Dynamic setting ）,* It is not allowed to carry the authentication head and cookies 
Access-Control-Allow-Credentials: true  //  Whether to allow subsequent requests to carry authentication information ( Such as :cookies), The value can only be true, Otherwise do not return  
Access-Control-Max-Age: 1800 // Pre check result cache time , This is the cache mentioned above , Company ： second  
Access-Control-Allow-Methods:GET,POST,PUT,POST //  Allow request verb , GET|POST|PUT|DELETE
Access-Control-Allow-Headers:x-requested-with,content-type // Allowed request header fields 

# CORS How to carry Cookie

If you use CORS Solving cross domain problems , In addition to the back-end server needs to configure the above information , The front end also needs to be configured as follows :

//  Indicates whether credentials are required for cross domain requests 
axios.defaults.withCredentials = true // Vue.js frame 

also , Back end server cannot be configured Access-Control-Allow-Origin: *, Remember that , If configured to any , No matter withCredentials Is there any setting ,cookie I can't take it with me

#2.3 Nginx Reverse proxy

adopt nginx Configure a proxy server （ Domain name is different from port number and client ） For detecting , Reverse proxy access api.minhung.me Interface , And it can be modified incidentally cookie in admin.minhung.me Information , Convenient current field cookie write in , Implement cross-domain login .

The front-end project (admin.minhung.me:19700)

The back-end project (api.minhung.me:19800)

In front end projects nginx Add in configuration proxy_pass, Proxy the requested interface to api.minhung.me:19800

#  front end nginx To configure  
server {
    listen       19700;
    server_name  admin.minhung.me;

    location / {
        proxy_pass   http://api.minhung.me:19800;  # Reverse proxy 
        proxy_cookie_domain api.minhung.me:19800 admin.minhung.me:19700; # modify cookie In the domain name 
        index  index.html index.htm;
    }
}

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