Vue.js (v3) mixed content error

[kevinadhiguna]

Bug description

Hi, I can not run my Vue.js v3 app. It said :

Mixed Content: The page at 'https://8080-kevinadhiguna-jiyu-tyali2phkgh.ws-us51.gitpod.io/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://10.0.5.2:8080/ws'. This request has been blocked; this endpoint must be available over WSS.

Steps to reproduce

1. Open Gitpod workspace
2. Open a terminal inside the workspace
3. Install @vue/cli globally using npm : npm install -g @vue/cli
4. Create a Vue.js app (v3.2.13) : vue create modal-project-vue3
5. Navigate to the directory
6. Add allowedhosts: 'all' to vue.config.js (otherwise it showed me Invalid Hosts error) :

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  ...
  // options
  devServer: {
    allowedHosts: 'all',
  },
  ...
})

7. Run the app : yarn serve
8. Open a preview in a new tab.
9. It showed me nothing, so I looked at the console and saw the error.

Workspace affected

kevinadhiguna-jiyu-tyali2phkgh.ws-us51

Expected behavior

A Vue.js app display (I ran the project in localhost) :

Example repository

The repository is here : https://github.com/kevinadhiguna/jiyu/tree/master/modal-project-vue3

Anything else?

Any help is much appreciated.

[axonasif]

Hey @kevinadhiguna, can you try opening your workspace on Desktop VSCode?

[kevinadhiguna]

Sure I can. I did and it worked normally but why did you recommend to open in Desktop VSCode ?

Is there any difference ?

[axonasif]

It uses SSH and SSH port forwarding to your localhost under the hood. So your programs get to fetch stuff for example from http://localhost:port/stuff but not the gitpod mapped subdomain that you'd get on Gitpod web.

So, let me reiterate:

there are two things you can do to workaround this until #459 is resolved, right now you might be accessing via the gitpod.io mapped URLs for your ports, which doesn't work by default for some configurations.

You can:

• Open your workspace on Desktop VSCODE, so all ports are forwarded to your PC localhost:[port]
  See https://www.gitpod.io/docs/ides-and-editors/vscode

• Or you can use image: gitpod/workspace-full-vnc on your .gitpod.yml to use a chrome browser from inside Gitpod through noVNC, so that you can access your app via localhost but continue using Gitpod from your browser.

So, ideally, things should work the same way on gitpod as they would on your local machine this way.
Hope this helps!

[kevinadhiguna]

Thank you @axonasif , but what if I already have an image in .gitpod.yml ?

image:
  file: .gitpod.Dockerfile
...

How do I add image: gitpod/workspace-full-vnc ?

[pawlean]

How do I add image: gitpod/workspace-full-vnc ?

You configure it in the .gitpod.Dockerfile itself, see documentation here.

[mustard-mh]

@kevinadhiguna You can try with code below, it works well in your repo for me. Check doc here https://webpack.js.org/configuration/dev-server/#websocketurl

Tip
To get protocol/hostname/port from browser use webSocketURL: 'auto://0.0.0.0:0/ws'.

Feel free to reopen it if it not works for you.

diff --git a/modal-project-vue3/vue.config.js b/modal-project-vue3/vue.config.js
index 6ed010a..39181c1 100644
--- a/modal-project-vue3/vue.config.js
+++ b/modal-project-vue3/vue.config.js
@@ -1,4 +1,10 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true,
+  devServer: {
+    allowedHosts: 'all',
+    client: {
+        webSocketURL: 'auto://0.0.0.0:0/ws'
+    }
+  },
 });

[kevinadhiguna]

Much Appreciated @mustard-mh , that worked well. However, does that configuration create a security issue ?

[mustard-mh]

Does that configuration create a security issue ?

@kevinadhiguna No, others can visit the port you opened only once you make that port public in Gitpod https://www.gitpod.io/docs/config-ports#specifying-port-names--descriptions

The property visibility configures who can access a port:

private (default) - Only allow users with workspace access to access the port.
public - Allows everyone with the port URL to access the port.

Account A (Owner)	Account B