401 when using remote tunnel

[jayenashar]

Using http://127.0.0.1:3000/index.html works fine, but requires the remote machine to be 127.0.0.1

Using https://90cmx3jb-3000.aue.devtunnels.ms/index.html returns a 401.

[jayenashar]

seems to require the host header to be 127.0.0.1. i used mitmproxy --listen-port 8000 --mode reverse:http://127.0.0.1:3000 and setup a port tunnel for port 8000 and it works good.

[andreamah]

Related: #381

[jayenashar]

:( even localhost doesn't work

[shirakaba]

Thanks @jayenashar for the workaround!

Another way to make the reverse proxy (if you don't have mitmproxy but do have ngrok) whilst adding the expected permissive host header is:

ngrok http --request-header-add 'host:localhost' 3000

For example, if your desktop device is hosting the live preview server locally on http://127.0.0.1:3000, ngrok would create a globally-accessible forwarding address for it:

# (Example randomly-generated forwarding address)
https://0b95-126-126-99-39.ngrok-free.app -> http://localhost:3000

External devices (e.g. your mobile phone) can then connect to that forwarding address even if they're forbidden from connecting directly to the live preview server.

[thorgrimjansrud]

Would like to fix this as the tunneling option is awesome! I'm experiencing similar thing connectiong to my industrial arm 32 bit edge device. What I would like to achieve is to preview my "administration page" located allready on Lighttpd server from inside vscode remotely. Then if the code tunnel allready excists to it i can admin/commissioning from here.

As I understand from reading here the extension server is listening to 127.0.0.1:3000 at my remote device but the webview in vscode running on my pc located somewhere else do not manage to route to this localhost through the tunneling..

From above I read that we can use a ngrok proxy installed remote but I guess this would create yet another "tunnel" bypassing the vscode remote tunnel extension (?). Please correct me if I'm wrong..

EDIT: hm.. I think I was looking for something like the "Simple Browser" function because I also want to control the website at my lighttpd. But this does not work either (white screen). Seems like the "simple browser" is not integrated into any tunneling connection but acts like a normal client on the and hence can not route between networks. So how to control remote websites with this great tunneling option.....

[jayenashar]

the issue isn't that it's listening only on 127.0.0.1. the issue is that it requires the HTTP Host header to be 127.0.0.1. It doesn't even accept localhost.

[thorgrimjansrud]

@jayenashar ok not sure if I'm heading the correct way but a brief look inside 'webviewComm.ts' there is a 'constructAddress' but I'm not so skilled in typescript/java that I can see exactly where to fix this.. At the server side 'httpServer.ts' there is also some host header checking in 'resolveExternalHTTPUri' function..

[jayenashar]

thanks. i see the code in https://github.com/microsoft/vscode-livepreview/blob/28f4a25278d8840f6138483f21148d8bd66089eb/src/server/httpServer.ts#L172-L181 . i assume it's for security and can't be simply removed. maybe if there is a way to add a whitelist of valid host & origin headers in the plugin settings, that's probably the best fix and may be accepted in a pull request.

[thorgrimjansrud]

Cool, so by your opinion the 401 tunneling problem could be fixed by rewriting the server host checking above? I can debug the extension locally but have not figured out how to debug the extension server remote...

[jayenashar]

yes, that is my opinion.

i don't know much about writing vscode extensions so i can't really be of much help. but if you can modify the extension locally, i assume there is a way to install your modified version on the remote.

[andreamah]

thanks. i see the code in

https://github.com/microsoft/vscode-livepreview/blob/28f4a25278d8840f6138483f21148d8bd66089eb/src/server/httpServer.ts#L172-L181

. i assume it's for security and can't be simply removed. maybe if there is a way to add a whitelist of valid host & origin headers in the plugin settings, that's probably the best fix and may be accepted in a pull request.

I haven't looked too much into this yet, but is there a specific IP address that we can resolve and whitelist?

[thorgrimjansrud]

Wild guess, if there is an active tunnel I guess one can fetch the information from this spesific connection and bypass (?).

If you have a short description (or link to guide) on how to debug this remote extension.. after debugging it locally I tried copying the complete folder from installation to remote device .vscode-server/extensions but it does not show up in the extension list remote.. making new extension from scratch worked..

[jayenashar]

I haven't looked too much into this yet, but is there a specific IP address that we can resolve and whitelist?

@andreamah i didn't understand your question. do you mean like 127.0.0.1?

Wild guess, if there is an active tunnel I guess one can fetch the information from this spesific connection and bypass (?).

i don't understand what you are suggesting. if there is a tunnel, how can the live preview extension know about it? probably easier for the whitelist to allow regular expressions like .*\.devtunnels\.ms

[andreamah]

i didn't understand your question. do you mean like 127.0.0.1?

Yeah, I just mean how to get the host address that we can use to access the page. I'm assuming that the port is forwarded from the tunnelling machine to the local machine for access somehow, so getting that would help. I can also look into this when I have time, since I haven't took a look at what actually happens in a while.

[jayenashar]

the remote tunnels extension is a different extension. i'm not sure if you can get data from it, but i wouldn't do it that way. instead, i might create a similar interface in this extension that lists the Host/Origin headers, and has a quick button to whitelist those values/hostnames.

that's a bit more work though, so i think start simple with a whitelist that a user can set in the extension settings. default to 127.0.0.1 and localhost

[thorgrimjansrud]

@jayenashar but the server allready knows about the tunnel URL (?). No need to type anything because it knows the origin of the connection (?).

This was my idea; that this connection should just pass through as valid.

Seems like it is the "vscode.env.asExternalUri" in "connection.ts" that have some information and can be impemented anywhere. So I think @andreamah is on the right track..

https://github.com/microsoft/vscode-livepreview/blob/9f3ae774a80b7e571a546454aac5f012002dbe86/src/connectionInfo/connection.ts#L72-L86

EDIT: I guess it fails 401 at this point that the URL is not valid because its returning the tunnel "https://xxx-3000.devtunnels.ms" and dont expect that.. but hard for me to see exactly..

https://github.com/microsoft/vscode-livepreview/blob/28f4a25278d8840f6138483f21148d8bd66089eb/src/server/httpServer.ts#L177

[jayenashar]

@thorgrimjansrud i've never seen that. have a look at my screenshot at the start of this issue. mine has only ever shown 127.0.0.1

[thorgrimjansrud]

@jayenashar look here. Testing on WSL:

[andreamah]

Yes. Port forwarding is implemented in the core editor, so we can also use the vscode API to resolve the IP or URL and port number that you can use to access it locally. Ideally, we have something that looks like

1. tunnels starts the service on their side and there's a forwarded port and way to access the address locally.
2. live preview gets that address and whitelists it. I think I tried to resolve the external host already when looking at what to whitelist, but I'll need to take another look; perhaps it's a timing issue or I overlooked what happens when there's a custom URL like that.

[jayenashar]

@thorgrimjansrud you can see in my screenshot i've got the same things open but it still doesn't list the devtunnels.ms in the debug logging. My setup is a https://vscode.dev/ frontend with a vscode server running on linux.

Even if the external uri method does work, I have the same issue without an external uri. Just open vscode on my desktop, start live preview, and localhost is not accepted. No remote, no port forward.

[thorgrimjansrud]

EDIT.

@jayenashar now I got it running like you did in vscode.dev so what you say is clearer to me. I also need to add the port 3000 forwarding manually.

The connection symbol in vscode.dev and desktop IDE is not similar. Here vscode.dev:

Here desktop IDE:

When "closing" the connection vscode.dev says "close workspace" while desktop IDE says "close remote connection".

So, if this must mean there is some difference in these implementations. We can access the live-preview server running on 127.0.0.1 remotely from vscode.dev but not with connecting desktop IDE and the tunneling extension.

Desktop IDE trying 127.0.0.1 (but the server runnes on uri..):

[metacop]

i have same problem. make a rest api. and when I consult it with postman it returns 401

[Emmanuel-Edidiong]

Hi @metacop, I'm having the same problem for rest api calls. Were you able to find a way around it?

[metacop]

Hi @metacop, I'm having the same problem for rest api calls. Were you able to find a way around it?

No friend, I won't be able to solve it. use ngrok https://ngrok.com/ just download it and run the command ngrok http 80

and clearly pull up the app locally with port 80 to match ngrok. That's right, ngrok is a little slow, but for development it is very good.

[Emmanuel-Edidiong]

Okay sadly, thanks. But I somehow found a way around it. When you change the port's visibility from private to public it works and won't return 401.

However, it still times out and returns no response

[Emmanuel-Edidiong]

Hi @metacop, I'm having the same problem for rest api calls. Were you able to find a way around it?

No friend, I won't be able to solve it. use ngrok https://ngrok.com/ just download it and run the command ngrok http 80

and clearly pull up the app locally with port 80 to match ngrok. That's right, ngrok is a little slow, but for development it is very good.

Seems like ngrok will still do for now