Don’t let Chrome rule the Web and Javascript

Edwardon

I will continue update this post

.dev TLD not working for localhost

I use to be using web.dev for years as localhost, after upgrade Chrome like v63 above, this TLD not working anymore.
See these posts for more detail.
Answer: I changed to .test TLD on my localhost dev Macbook via file /etc/hosts
127.0.0.1 web.test
::1 web.test
After you edit hosts file with sudo permission, remember to check it,
Clear DNS Cache, sudo killall -HUP mDNSResponder && echo macOS DNS Cache Reset
Then, try to dig the domain
dscacheutil -q host -a name web.test will return 127.0.0.1 and ::1
Make sure your /etc/hosts file exactly these attributes
-rw-r--r-- 1 root wheel 1004 Jan 3 16:03 /etc/hosts

Damn HSTS, sucks

  1. Open chrome://net-internals/#hsts
  2. Under `Delete domain security policies` section, key in the domain that you gonna whitelisted
  3. Press, button DELETE
  4. Clear browser cache, cookie… EVERYTHING

Prevent Chrome redirect localhost from HTTP to HTTPS

Quick and dirty way

RESET everything: chrome://settings/resetProfileSettings?origin=userclick

Clear cache and hard reload

If you click for a couple second on REFRESH button, nothing pop-up, here is the quick fix. CMD + SHIFT + I on Firefox
On Mac, press keys, ALT + SHIFT + I then click the REFRESH icon for couple second, will pop-up a UI and here you go.

NGINX server disable HSTS

// disable HTTP Strict Transport Security 
server {
#...
        ssl on;
#...
        add_header Strict-Transport-Security "max-age=0;";
#...
}
// with subdomain
REMOVE "includeSubdomains", and restart NGINX
add_header Strict-Transport-Security "max-age=31536000; includeSubdomains;

Only load data from same-origin

Using CSP (Content-Security-Policy ) to allow, MDN example

// This only allow content from localhost and subdomain
<meta http-equiv="Content-Security-Policy" content="default-src 'self' *.test">

References
1. https://apple.stackexchange.com/questions/92710/why-is-safari-ignoring-my-etc-hosts-file
2. https://superuser.com/questions/565409/how-to-stop-an-automatic-redirect-from-http-to-https-in-chrome
3. https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#Example_1