Chrome disables the localhost development environment from using third-party cookie pits

Error: Umi project development environment localhost:8000 cannot be opened after sso in Chrome. Edge and Firefox are normal

Reason: third-party cookies are disabled after chrome84. In localhost development environment request site.example.com/api/current… The interface does not carry the cookie after authorization. Authentication failed and redirected to SSO.. example.com

Login Flowchart

Open graph TD localhost: 8000 - - > B Request [https://site.example.com/api/currentUserInfo] - the Request Headers carry cookies, Set -cookie <br> domain=example.com, path= API --> A{ Verify login} A -- logged in --> Successfully entered the development environment A -- not logged in --> Redirect to https://sso.. Example.com authorization login - > C/login successful C - > | set new cookie | redirected to localhost - > B

There is a loop that, in Chrome, jumps back and forth between localhost and site.example.com. The reason is that localhost is not authorized to redirect to site, but site is authorized to redirect to Localhost

The solution

The idea is to solve the problem of crossing cookies

Umi sets proxy to resolve the cross-domain cookie problem
Change hosts. Create a new domain name dev.example.com as the development environment domain name
set with SameSite=None and SecureEnable third-party cookies
Chrome was downgraded to 83 and below
Use the Nginx proxy

Proxy Problems

– Fixed cross-domain problem, but set-cookie set domain, localhost still does not carry cookies

Change the hosts

Configure 127.0.0.1 dev.example.com for the hosts file

Open dev.example.com:8000 as the development environment

Problem: the calling interface was rejected by the server. It may be a firewall or interface configuration problem

SameSite

A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. A cookie with the Secure attribute is sent to the server only with an encrypted request over the HTTPS protocol,

SameSite and Secure configurations for set-cookie cannot be turned on without background code

Use the Nginx proxy

Nginx configuration

server { listen 443 ssl; server_name dev.nfapp.southcn.com; ssl_certificate server.crt; ssl_certificate_key server.key; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:! aNULL:! MD5; ssl_prefer_server_ciphers on; location / { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; Proxy_pass http://127.0.0.1:8000; }}Copy the code

Server certificate server.crt

Server key server.key

Root domain name certificate root. CRT, import the PC trusted certificate

Dev.nfapp.southcn.com: 8000 as a development environment, sso.. Example.com redirect to locahost after authorization, need to open dev.nfapp.southcn.com: 8000

WebSocket is used in the project and WSS is required for the protocol

document.location.protocol === "https:"
      ? `wss://${webSocketIP}`
      : `ws://${webSocketIP}`.Copy the code

Login flowchart after proxy

Open graph TD D [https://dev.nfapp.southcn.com:8000] -- > B Request [https://site.example.com/api/currentUserInfo] - the Request Set -cookie <br> domain=example.com, path= API --> A{ Verify login} A -- logged in --> Successfully entered the development environment A -- not logged in --> Redirect to https://sso.. Example.com authorization login - > C/login successful C - > | set new cookie | redirected to localhost - > manual jump | | D

amendments

https://sso. After login authorization, place the token after the URL.
After authorization, reset the URL opened by the user

// koa
ctx.redirect(ctx.request.origin + '? token=xxxx');
Copy the code

Umi 2 x pit

Webpack DevServer configuration is not supportedhttps: trueconfiguration

Umi 3.x HTTPS localhost can be enabled

reference

Medium.com/swlh/7-keys…

Self-signed HTTPS certificate