Once I

Cookies come with the browser transmission; balabala…

Session is the server; Save some user information……. balabala….

Now of I

Start from the following angles

HTTP protocol is stateless;

Cookies and sessions can make up for this when developing state-specific interfaces

  • For HTTP protocol, cookie is only a field in the request header, which is not particularly different from other fields.
  • Browsers support cookies by default, but they also limit them. For example, same-origin policy;
    • What is the same origin policy?
      • The same origin policy is domain name, port, protocol; They must all be the same to access the contents of the cookie
    • Why the same Origin policy?
      • The same-origin policy is a mechanism for browsers to restrict access to the content of cookies from the same domain based on security

2. When we want to do sso function

  • What is single sign-on and SSO?
    • Single Sign On, or SSO for short, is one of the more popular solutions for enterprise business integration.
    • The simplest example is that when we open Taobao.com, when we open a commodity details page, we may open a new page, then the information we just logged in May disappear. If we need to log in every time we open a page, it will be very troublesome
      • In this case, you need cookies; We can think about domain names under accessible domain names, usually secondary domain names
        • What is primary, secondary, tertiary…. Domain name?
        • For example: www.taobao.com
          • Level 1 domain name refers to COM (also known as the top-level domain name; Wikipedia, click me!!
          • The secondary domain name is Taobao
          • So the level 3 domain name is WWW
      • So we in taobao this domain name under all pages can be unimpeded
      • But there is also the risk of information leakage
        • Although the limitation can be used but the effect is not very good
        • Secure Cookie mechanism
          • Cookies can only be transmitted over HTTPS, not HTTP
          • But it’s not foolproof, because you can still read and write on the client side;
        • HTTPOnly attribute
          • The HttpOnly attribute of the Cookie, which means that the browser should not expose the Cookie except for HTTP (and HTTPS) requests.
          • This prevents non-HTTP attacks, such as JavaScript
        • Same – Site property
          • cookiesSameSiteProperty is used to limit third-party cookies, thereby reducing security risks.
            • The main purpose is to limit CSRF attacks
              • What is a CSRF attack?
                • A cross-site request attack, simply put, is a technique by which an attacker tricks a user’s browser into visiting a previously authenticated web site and performing operations (such as emailing, sending messages, or even property operations such as transferring money or buying goods).
              • It can also be used to track user information, such as putting one inside your site that you can’t see
              • <img src="facebook.com" style="visibility:hidden;" >
              • This will help you know which sites you visit and make recommendations accordingly
              • So some of you might think; For example, I looked at the iPhone11 in pinduoduo; Go to see circle of friends is likely to have the corresponding recommendation, these I guess may be PDD directly sold your information to Tencent, or made a deal (escape
            • The three specific values Strict; Lax; None; Those of you who are interested can look it up on your own and I won’t expand it here
        • Cookies are divided into local cookies and memory cookies
          • Local cookies differ from in-memory cookies in the expires field set by the cookie. If no expiration time is set, it is a memory cookie. Disappears from memory as the browser closes.
          • It’s still the same risk of disclosing user information
          • Even an in-memory cookie attacker can set a timer to make it a local cookie

Three sessions.

A session is an independent space created by the server for web users, which can contain user information and so on

  • If it’s a single server it’s fine, but if it’s multiple servers or multiple layers of forwarding it can cause a problem, session hit problem; So we need to store the information in MySQL or Redis

Four token.

Other than sessions and cookies to assist HTTP stateless requests, what else can be done?

  • token
    • There are many kinds of tokens, such as JWT, sessionId, MAC address and so on
    • Tokens can be stored in many places, such as local localStorage or sessionStorage, and carried in the request header

Five sessionStorage.

SessionStorage; Here’s a problem I had

  • SessionStorage If a new TAB is opened, is its sessionStorage shared?
  • Let’s think about it and see what the answer is

The old me thought we could share. It’s half wrong and half right

Why do you say so?

That’s what MDN says

…data stored in sessionStorage gets cleared when the page session ends…Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

You can do an experiment

  1. Open this index.html in your browser, and call it TAB PAGE A. Note: HTTP protocol is required to open! For example, http://localhost/index.html
  2. Click on the link on the page and TAB B pops up.
  3. Open the console on TAB B and executesessionStorage.getItem('j'),'s'
  4. Create a new TAB D and type it in the address barhttp://localhost/index.htmlOpen the same page and executesessionStorage.getItem('j') 。

I would have expected TAB D to return an ‘s’, since I thought sessionStorage data was shared between multiple tabs on the same site. But I was wrong, and I got null.

Careful students may have found it

As you might have noticed, the only difference between TAB B and TAB D is the way they are opened: TAB B is opened by clicking A link in TAB A, but TAB D is opened by typing an address into the browser address bar.

So now I understand: new tabs opened by clicking on links (or window.open) belong to the same session, but opening a new TAB always initializes a new session, even if the site is the same, they don’t belong to the same session.

After watching

Feel free to interact in the comments section if there is something wrong or if you have any questions.