当前位置:网站首页>Web Security (1) -- browser homology strategy

Web Security (1) -- browser homology strategy

2020-11-07 20:56:33 Coxhuang

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 .

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