Storybook on Chrome fails to load due to HSTS forwarded by Vite proxy from Teleport cluster (ERR_SSL_PROTOCOL_ERROR)

[kimlisa]

When running yarn storybook, it will auto open browser with http://localhost:9000, at some point with all our upgrades, it stopped working.

Workaround was to use the generated network address or use 127.0.0.1:9000:

This happens because when people work on the Web UI through yarn start-teleport, the Vite proxy is served over localhost:3000. The Teleport cluster sends the Strict-Transport-Security header which tells Chrome to use HTTPS for the whole localhost domain.

By going to chrome://net-internals/#hsts, then typing localhost under "Delete domain security policies" and clicking Delete, you can remove this policy from localhost and Storybook will work over http, but once you open a Teleport cluster on localhost, Chrome will require https for localhost again.

We can just one of two solutions:

1. Use HTTPS for Storybook.
   • Pros:
     • Storybook always works over https.
   • Cons:
     • Requires extra setup as we need to provide the cert and the key as well.
       • We could reuse the cert and key people use for the Vite proxy. That is not ideal as it'd still require other people not familiar with our workflows to set up the cert with mkcert, say backend devs who occasionally do something with Teleport or the design team.
2. Configure the Vite proxy to overwrite the headers and set Strict-Transport-Security: max-age=0.
   • This should turn off HSTS for localhost.
   • It should be doable by passing the configure field to each proxy target and then calling proxy.on('proxyReq', function(proxyReq, req, res, options) { … }) and setting the header on res. Kind of like in the example with rewriting request headers, but instead we have to rewrite response headers. I'm not 100% sure if this will work.
   • Pros:
     • No setup required before starting Storybook for the first time.
   • Cons:
     • It'll break whenever you access another website over localhost that also sends Strict-Transport-Security.
     • People already affected by this will need to perform a one-time removal of localhost under chrome://net-internals/#hsts anyway.

[ravicious]

I'm not sure if I understand the issue correctly as it never stopped working for me, it always opens http://localhost:9002. 🤔

[ravicious]

Do you still have this problem with regards to the port? What error do you get?

I recently created another issue for tracking the msw problems specifically. #34450

[kimlisa]

Do you still have this problem with regards to the port? What error do you get?

I recently created another issue for tracking the msw problems specifically. #34450

yes, it used to work outside of the box, and one day it just stopped working:

i wasn't the only one affected. i tried looking into it once, but couldn't figure it out. i also can't run storybook with localhost on cloud either

[kimlisa]

wait a minute... do you use firefox to dev? i just tried it out on firefox and localhost:9002 works, but chrome doesn't (i've always devved in chrome)

works on firefox/edge, but not chrome/brave

[ravicious]

I think I've figured it out, I updated the issue description.

I don't have time at the moment to pick the right solution and implement it unfortunately.

[zmb3]

I think we can close this now that storybook uses https, right?

[ravicious]

Addressed in #44041.