[Project-level interview questions] Can you talk about the front-end authentication in detail?

If someone asks you: "You have been developing for so many years, can you talk about the front-end authentication in detail?". How should you answer, do you have a complete idea in your mind?

Can you handle concepts such as Token, Cookie, Session, JWT, single sign-on , their functions, application scenarios, how to use and store, how to ensure security, etc.?

Digital management platform
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
personal blog

Another example is authentication, authorization, authentication, authority control and the relationship between them. Do you really understand thoroughly?

1. Authentication, Authorization, Authentication, Authority Control

1.1 What is certification?

认证(Identification)Refers to confirming the identity of the declarant based on identifying information unique to the declarant.

The vernacular means: 你需要用身份证证明你自己是你自己.

For example, our common authentication technology:

• ID card
• user name and password
• User's mobile phone: mobile phone text message, mobile phone QR code scanning, gesture password
• user's email
• User's biometrics: fingerprints, voice, irises of eyes
• Big data identification of users
• etc.

1.2 What is authorization?

授权(Authorization): In the field of information security, it refers to 资源所有者delegation 执行者, which grants 执行者resource operation rights in a specified range, so as to perform related operations on resources.

In the field of real life, for example: bank card (issued by the bank), access control card (issued by the property management office), key (issued by the landlord), these are the realization of authorization in real life.

In the field of the Internet, for example: the session mechanism of the web server, the cookie mechanism of the web browser, and the issuance of authorization tokens (token), etc. are all authorization mechanisms.

1.3 What is authentication?

鉴权(Authentication)In the field of information security, it refers to the process of identifying and confirming the authenticity of the identity rights declared by a declarant .

If you start from authorization, it will be easier to understand authentication. Authorization and authentication are two upstream and downstream matching relationships, authorization first, and then authentication .

In the field of real life: the access control card needs to pass through the access control card recognizer, and the bank card needs to pass through the bank card recognizer;

In the Internet field: Verify the legitimacy and validity of session/cookie/token

鉴权It is a link between the previous and the next. The upstream accepts the authorized output, verifies its authenticity, and then obtains the permission (permission), which will be ready for the next step of permission control.

1.4 What is permission control?

权限控制(Access/Permission Control)Define executable operations as a permission list, and then determine whether the operation is allowed/prohibited

For permission control, it can be divided into two parts for understanding: one is permission and the other is control. Permission is an abstract logical concept, while control is a concrete implementation.

In the field of real life: Take the implementation of access control card permissions as an example. An access control card has the authority to open all the doors of the company; an access control card has the authority of the administrator role, so it can open all the doors of the company.

In the field of the Internet: through web backend services, to control interface access, allow or deny access requests.

1.5 What is the relationship between authentication, authorization, authentication and authority control?

Seeing this, we should understand that 认证, 授权, 鉴权and 权限控制these four links are one 前后依次发生and 上下游related;

It should be noted that these four links sometimes occur simultaneously. For example in the following scenarios:

• Use the access control card to open the door: the four links of authentication, authorization, authentication, and authority control are completed in one go and happen simultaneously in an instant
• User's website login: When a user logs in with a user name and password, authentication and authorization are completed together, while authentication and permission control occur in subsequent access requests, such as when purchasing items or paying.

2. Front-end authentication scheme

2.1 HTTP basic authentication

In HTTP, 基本认证方案（Basic Access Authentication)it is to allow the client (usually referring to the web browser) to verify the identity of the user by providing the user name and password when requesting.

1. Authentication flow chart

2. Analysis of authentication steps

   • Client (such as a browser): request one from the server 受限的列表数据或资源, for example, the fields are as follows

     GET /list/ HTTP/1.1 Host: www.baidu.com Authorization: Basic aHR0cHdhdGNoOmY=

   • Server : Hello client, this resource is in the security zone baidu.com, which is a restricted resource and requires basic authentication;

     And return a 401 status code (Unauthorized is not authorized) to the client and provide an authentication domain www-Authenticate: Basic realm=”baidu.com”to request authentication;

     Among them Basicis the verification mode, and realm="baidu.com"means that the client needs to enter the user name and password of this security domain, not other domains

     HTTP/1.1 401 Unauthorizedwww-Authenticate: Basic realm= "baidu.com"

   • Client: server, I have brought you the username and password, please take a look; (Note: If the client is a browser, then a pop-up window will automatically pop up at this time, allowing the user to enter the username and password);

     After entering the username and password, the client sends the username and password to the server in Base64 encryption

     The transmission format is as follows (the content of Basic is: user name: ase64 form of password ):

     GET /list/ HTTP/1.1Authorization: Basic Ksid2FuZzp3YW5n==

   • Server: Hello client, I have verified Authorizationyour username and password in the field, and they are correct. This is the resource you want.

     HTTP/1.1 200 OK ...

3. advantage

   Simple, basically all popular browsers support

4. shortcoming

   • Not safe:

     Because it is based on HTTP transmission, it is almost streaking on the network. Although it uses Base64 to encode, this encoding can be easily decoded.

     Even if the authentication content cannot be decoded into the original user name and password, it is not safe. Malicious users can use their continuous sharing server to initiate requests after obtaining the authentication content. This is the so-called replay attack.

   • Unable to actively log out :

     Because the HTTP protocol does not provide a mechanism to clear the Basic authentication information in the browser, unless the tab or browser is closed, or the user clears the history.

5. scenes to be used

   Internal network, or a network that does not have high security requirements.

Almost all online websites will not use this certification scheme, so everyone can understand this scheme

2.2 Session-Cookie Authentication

• Session-CookieAuthentication is a front-end and back-end communication authentication mode realized by using the Session (session ) on the server side and the cookie on the browser (client side) .

• Before understanding this sentence, let's briefly understand 什么是 Cookieand 什么是 Session?

• 1. what are cookies

     As we all know, HTTP 是无状态的协议(there is no memory ability for transaction processing, and the server will not save any session information every time the client and server session is completed);

     Therefore, in order for the server to distinguish different clients, it must actively maintain a state, which is used to inform the server whether the two requests before and after come from the same browser. And this state can be Cookieachieved by going.

     Features:

     • Cookies are stored on the client side and can be tampered with at will, which is not safe

     • There is a size limit, up to 4kb

     • There is a limit on the number of cookies. Generally, a browser can only store no more than 20 cookies for a website, and a browser generally only allows 300 cookies to be stored.

     • Android and IOS do not support cookies well

     • Cookies are not cross-domain, but the first-level domain name and the second-level domain name are allowed to be shared (depending on the domain)

  2. What is Session

     1. The abstract concept of Session is a session, which is an abstraction of the interaction between the user and the server in order to realize the interruption/continuation operation in the stateless protocol communication process;

     2. Specifically, it is a session structure generated by the server, which can be saved in various ways, such as memory, database, files, etc. Large websites generally have dedicated session server clusters to save user sessions;

     3. Principle process:

     4. 1. Client: the user sends a request to the server for the first time;
        2. Server: Receive the data and automatically create a specific Session / Session ID for the user to identify the user and track the user's current session process;
        3. Client: The browser receives the response to obtain session information, and will bring the Session / Session ID in the next request;
        4. Server: After extraction, the server will compare it with the locally saved Session ID to find the session of the specific user, and then obtain the session status;
        5. So far, the communication between the client and the server has become a stateful communication;

     5. Features:

     6. • Session is saved on the server;
        • Through the encryption protocol that comes with the server;

     7. Differences from cookies:

     8. • Security: Since cookies are stored on the client side, they can be tampered with at will, while sessions are stored on the server side differently and cannot be forged, so sessions are more secure;
        • The types of access values ​​are different: Cookie only supports string data, and Session can store any data type;
        • The validity period is different: Cookie can be set to be kept for a long time, and Session generally has a shorter expiration time;
        • The storage size is different: the data saved by the cookie cannot exceed 4K;

     9. Seeing this, some students may have thought of it, Session-Cookieis it just Sessionstored in the client's Cookie?

        Bingo , that’s true, let’s move on

  3. Session-Cookie Authentication Flowchart

4. Session-Cookie Authentication Step Analysis

   • Client: Send login information username/password to the server to request login verification;

   • Server: Verify the login information, automatically create a Session after the verification is passed (save the Session in memory, or in Redis), and then generate a unique identification string session identity credential (commonly referred to as ) for this Session session_id, sidand Set-CookieSet this unique identifier in the response header ;

     Note: You can use the signature to sidencrypt , and the server will secretdecrypt it according to the corresponding key (not a necessary step)

   • Client: After receiving the response from the server, it will parse the response header and automatically sidsave in the local Cookie, and the browser will automatically attach the Cookie information under the domain name to the request header in the next HTTP request;

   • Server: When receiving a request from a client, it will parse the cookie in the header of the request , and then go to the client saved by the server sidbased on this , and then judge whether the request is legal;sidsid

5. Advantages of Session-Cookies

6. • Cookies are easy to use
   • Session data is stored on the server side, which is easier to manage than JWT, that is, when a user logs in and actively logs out, you only need to add and delete the corresponding Session, which is convenient for management
   • Only the back-end operation is required, and the front-end can be operated without any sense;

7. Disadvantages of Session-Cookies

8. • Rely on cookies, once the user disables cookies on the browser side, then GG Smecta;
   • Very insecure, cookies expose data to the browser, increasing the risk of data theft (easy to be attacked by CSRF);
   • Session is stored on the server side, which increases the overhead of the server side, and will greatly reduce server performance when the number of users is large;
   • Not friendly to mobile support;

9. scenes to be used

10. • Generally, medium and large websites are applicable (except APP mobile terminal);
    • Since the general Session needs to be stored centrally on the memory server (such as Redis), this will increase the budget of the server, so please choose carefully if the budget is not enough;

11. Recommended Session libraries commonly used in the front end

12. • Use express: express-session [1]
    • Also used: koa-session [2]