Blank UI screen - Githubissues

iRon7 commented 2 years ago

Blank UI screen (also in developer mode)

To Reproduce

Install Visual Studio 2022 ➔ Community ➔ .Net developing (default selections)
run Vault (as usual): Vault Server -Dev
Open de UI: http://127.0.0.1:8200/ui/

Expected behavior The vault UI to be visible

Actual behavior Blank screen

Developer Console Errors

```Console 127.0.0.1/:1 Refused to load the font 'data:font/truetype;charset=utf-8;base64, d09GRgABAAAAALM7AA8AAAABq0AAAAAAAACyRAAAAPcAAAHiAAAAAAAAAABHUE9TAACIDAAAIgQAAH82Ol56cUdTVUIAAKoQAAAIMwAAFD6gNKPBT1MvMgAAAdAAAABVAAAAYGbqc4pjbWFwAAAGbAAAA3wAAAU4Vch3gWN2dCAAAAwYAAAAQAAAAEAQPwNiZnBnbQAACegAAAEDAAABcwZZnDdnbHlmAAAQvAAAbJ4AAOZUwSn/MmhlYWQAAAFYAAAANgAAADYGApswaGhlYQAAAZAAAAAgAAAAJAdbBRtobXR4AAACKAAABEIAAAjwrN1ggGxvY2EAAAxYAAAEYgAABHqHyk9obWF4cAAAAbAAAAAgAAAAIARWA2ZuYW1lAAB9XAAAAoEAAAZuOd88j3Bvc3QAAH/gAAAIKgAAEi5ynk2NcHJlcAAACuwAAAEqAAACpAoaNTMAAQAAAAEAAA...STdLpgIn7fZCqSu5rDezyzyKpZz7vqhExLsEP0L+KQltJygoVYTqVM+PxDJaFaVekJvaE39RY7sTO7sCu7sbtQL3VQf92n+/WAHtRDehiopT2d6UU/BrAAS7EsK7Em67IBO/KnjVXM1dKhE3yixfOtb3pmZY70/HBUmjxmflv/BTgtM3AAeAGFUUV3wzAM/it6vowXOA1cj5nxrueojZPWynPUDv58uWO4iT+Q7pBghoLQo1A79g2VrMbK6B75jAN47FBDPU56EMfDZhxDGsfrCrqh3VC5SLURRZY7HQrWYVteKlodpgoio9vOkq8JXPbzETifDPx3LGpP54wWehazx17QCjjf5O3v49DkAG/Yfph1UIbYOhpv69k5oy1XL8G1cpkent9bGPPae7sJ96Ojb5sfFwJm1MFQTnePAla5K8HVgPDWBG5+vRbd2fwJg7xahhNv34+/Lb05R9MPTH3KQBiu2ZYkY43dmoA9tEiqcfHN+Gj2VzMA6Y+oeQ==' because it violates the following Content Security Policy directive: "font-src 'self'". 127.0.0.1/:1 Refused to load the font 'data:font/truetype;charset=utf-8;base64, d09GRgABAAAAAMjjABIAAAAB2mAAAAAAAADH7AAAAPcAAAHiAAAAAAAAAABHUE9TAACdfAAAIjcAAH80VqR1REdTVUIAAL+0AAAINwAAFD6g7KTPTFRTSAAABwQAAABHAAACQYV/Ri1PUy8yAAACDAAAAFQAAABgZ050kmNtYXAAAB1cAAAChQAAA/wdE0d/Y3Z0IAAAIdQAAAA0AAAANAq+BC1mcGdtAAAf5AAAAQUAAAFzBpmcN2dhc3AAAJ1wAAAADAAAAAwABwAHZ2x5ZgAAJnAAAGxKAADg/GpVnLBoZG14AAAHTAAAFhAAADPIAPyiAmhlYWQAAAGUAAAANQAAADYF/aZQaGhlYQAAAcwAAAAgAAAAJAdxBTBobXR4AAACYAAABKIAAAj0wQRTzWxvY2EAACIIAAAEZwAABHxHMIAQbWF4cAAAAewAAAAgAAAAIARXAs1uYW1lAACSvA...2hawUjGKWSTHlyN3B4j2cWs3I2964qIdNK7Bn7l3NIq2gNwdKsrkImONznSahSZTpEh+owvcW+7Mf+HMCBHCTUSS3UXS/oRb2kl/WKXkVU0IxWdKQr3VmSlVmNtdmIzdiSffjdhinO1apRR/hEi8+3rumZFRzp+eEo1XnM/Kz/ABXXNDcAeAGFUUV3wzAM/it6vowXOA1cj5nxrueojZPWynPUDv58uWO4iT+Q7pBghoLQo1A79g2VrMbK6B75jAN47FBDPU56EMfDZhxDGsfrCrqh3VC5SLURRZY7HQrWYVteKlodpgoio9vOkq8JXPbzETifDPx3LGpP54wWehazx17QCjjf5O3v49DkAG/Yfph1UIbYOhpv69k5oy1XL8G1cpkent9bGPPae7sJ96Ojb5sfFwJm1MFQTnePAla5K8HVgPDWBG5+vRbd2fwJg7xahhNv34+/Lb05R9MPTH3KQBiu2ZYkY43dmoA9tEiqcfHN+Gj2VzMA6Y+oeQ==' because it violates the following Content Security Policy directive: "font-src 'self'". 127.0.0.1/:1 Refused to execute script from 'http://127.0.0.1:8200/ui/assets/vendor-381b4c5f5d6fcd5e52d706609c7a6207.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. 127.0.0.1/:1 Refused to execute script from 'http://127.0.0.1:8200/ui/assets/vault-e54c049312c92861e7d4e01d93eeea78.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. 127.0.0.1/:1 Refused to execute script from 'http://127.0.0.1:8200/ui/sw-registration-1b862bc1e33e4a8a41781d56c3469209.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. ```

Environment: Happens (at least) on Windows 10 and 11 Browser independent (check Chrome, Edge IE and FireFox)

Key             Value
---             -----
Seal Type       shamir
Initialized     true
Sealed          false
Total Shares    1
Threshold       1
Version         1.9.0
Storage Type    inmem
Cluster Name    vault-cluster-e0908e84
Cluster ID      43c5fd57-cb4f-0a4b-4941-81302d7f386e
HA Enabled      false

Vault server configuration file(s): (not related, also happens in developer mode)

Related

#1307 website: force JS/CSS mime-types on deploy

Possible solution I assume that the correct solution to this is to have explicit mime types (such as type="application/javascript") defined for the concerned scripts, fonts and whatever is loaded next.

joshgreifer commented 2 years ago

Confirmed this issue in Edge and Chrome:

Refused to execute script from 'http://localhost:8200/ui/assets/vendor-381b4c5….js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
localhost/:1 
 Refused to execute script from 'http://localhost:8200/ui/assets/vault-e54c049….js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
localhost/:1 
 Refused to execute script from 'http://localhost:8200/ui/sw-registration-1b862bc….js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
localhost/:1 
 Refused to execute script from 'http://localhost:8200/ui/assets/vendor-381b4c5….js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
localhost/:1 
 Refused to execute script from 'http://localhost:8200/ui/assets/vault-e54c049….js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
localhost/:1 
 Refused to execute script from 'http://localhost:8200/ui/sw-registration-1b862bc….js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

arnav28 commented 2 years ago

Hi @joshgreifer Is this issue happening only on Windows machine? Also can provide the output of this command: echo $VAULT_CLOUD_ADMIN_NAMESPACE from CLI.

fourdim commented 2 years ago

https://github.com/golang/go/issues/32350

LiviuSosu commented 2 years ago

At the moment of writing this comment, the latest version that has a proprty UI working is: v1.8.8.

Everything above until the latest, gives us the error mentioned by the @joshgreifer. The current latest version is: 1.9.3

latdev commented 2 years ago

Version: Vault v1.10.3 Same prooblem.

That is old bug from golang's MIME module. Windows cannot provide valid MIME type for golang .css request.

fix also very simple:

add this two lines on program load _ = mime.AddExtensionType(".css", "text/css") _ = mime.AddExtensionType(".js", "application/javascript")

Also that can be fixed inside OS...

open registry:

HKEY_CLASSES_ROOT\.css\Content Type and replace value from text/plain to text/css

LiviuSosu commented 2 years ago

Hello @latdev

I have a question regarding your comment:

"_ = mime.AddExtensionType(".css", "text/css")"

what type of mime is?

Thanks!

VeraSimon commented 2 years ago

I'm only using Visual Studio 2019 Community Edition, but ran into the same issue on Windows 10 Pro 21H1 and Vault 1.11.0 with the javascript type association and no '-dev' flag. Based on stuff I've seen in this issue and elsewhere online, I thought I'd just type up this workaround for anyone else that might run into it. Just save it as a .reg file and import into the Windows registry.

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\.css]
"Content Type"="text/css"

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\.css]
"Content Type"="text/css"

[HKEY_CLASSES_ROOT\.js]
"Content Type"="application/javascript"

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\.js]
"Content Type"="application/javascript"

Edit:

For the dev(s) working on this, here's the issue with Visual Studio that's cascading down and causing issues with a number of languages, including golang. Maybe another company coming for them will light the fire needed to get it fixed.

aphorise commented 2 years ago

golang/go#32350

Given then above merger - this issue will likely resolve as and when Vault adopts go 1.9.x which may be likely by Vault 1.13.x in 2023 (current track for core: Bump Go version to 1.18.5 in Vault 1.12.0).

zofskeez commented 1 year ago

Closing since a fix was added to Go 1.19 and the issue should be resolved in Vault version >= 1.11.7

hashicorp / vault

Blank UI screen #13357