Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remote connection to localhost iso address of the remote server #591

Open
louisvangeldrop opened this issue Jul 27, 2023 · 17 comments
Open
Assignees
Labels
bug Something isn't working

Comments

@louisvangeldrop
Copy link

I have started from a chromebook a remote tunnel session to my pc "louis" with ip-address 192.168.0.126.
Using the Devicescript extension I want to connect to my mcu-board connected to my chromebook.
As a result it opens a web-site with URL: localhost:8081/connect?dark=1
I assume it should be something like: 192.168.0.126:8081/connect?dark=1

If I replace localhost with 192.168.0.126 it doesn't connect. It looks like the localhost:8081 webserver is opened with "localhost" iso "internet"

@louisvangeldrop louisvangeldrop added the bug Something isn't working label Jul 27, 2023
@pelikhan pelikhan self-assigned this Jul 28, 2023
@pelikhan
Copy link
Member

Looks like i forgot to resolve the external uri.

pelikhan added a commit that referenced this issue Jul 28, 2023
@pelikhan
Copy link
Member

Try again with v2.14.13. It should already resolve a better URI from the start and try to connect. If the devtools server does not connect yet, you can try to enable the "Devtools - Internet" option in the settings.

@louisvangeldrop
Copy link
Author

I have tried with v2.14.13, but unfortunately it still opens with localhost.
Starting devs devtools src/main with --internet allows me to open the remote server, but there is no "Connect" button

@pelikhan
Copy link
Member

Do you have repro steps for this issue?

The current solution relies on the port forwarding that gets put in place automatically when using WSL/Codespaces. I am not sure yet how to support this scenario.

Could you open the connect page JavaScript console and look at the error messages? If the icon does not load, it sounds like the jacdac-docs page failed to be downloaded.

@pelikhan
Copy link
Member

We use asExternalUri which should take care of port forwarding; so something is going on.

@louisvangeldrop
Copy link
Author

Started remote tunnel session.
devs devtools src/main.ts --internet
Open 192.168.0.126:8081 and opened the Chrome developer tab =>

Mixed Content: The page at 'https://microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.564602934302401' was loaded over HTTPS, but requested an insecure font 'http://themes.googleusercontent.com/static/fonts/rosarivo/v1/OGdIq-p0tOtBN2VMVvO9W_esZW2xOQ-xsNqO47m55DA.woff'. This request has been blocked; the content must be served over HTTPS.
microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.564602934302401:74 Mixed Content: The page at 'https://microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.564602934302401' was loaded over HTTPS, but requested an insecure font 'http://themes.googleusercontent.com/static/fonts/inconsolata/v5/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff'. This request has been blocked; the content must be served over HTTPS.
Sender.js:568 POST https://dc.services.visualstudio.com/v2/track 400
_xhrSender @ Sender.js:568
_self. @ Sender.js:322
dynProtoProxy @ dynamicproto-js.js:374
_self.flush @ Sender.js:108
dynProtoProxy @ dynamicproto-js.js:374
(anoniem) @ ChannelController.js:168
_iterateChain @ ProcessTelemetryContext.js:161
(anoniem) @ ChannelController.js:163
(anoniem) @ ChannelController.js:51
HelperFuncs_arrForEach @ HelperFuncs.js:343
_processChannelQueue @ ChannelController.js:44
flush @ ChannelController.js:162
_flushChannels @ BaseCore.js:572
dynProtoProxy @ dynamicproto-js.js:374
_flushChannels @ PageViewManager.js:26
(anoniem) @ PageViewManager.js:51
setInterval (asynchroon)
_addQueue @ PageViewManager.js:32
_self. @ PageViewManager.js:113
dynProtoProxy @ dynamicproto-js.js:374
_self. @ AnalyticsPlugin.js:196
dynProtoProxy @ dynamicproto-js.js:374
(anoniem) @ HelperFuncs.js:641
dynProtoProxy @ dynamicproto-js.js:374
92513 @ useAnalytics.tsx:58
webpack_require @ bootstrap:19
37862 @ useServices.ts:17
webpack_require @ bootstrap:19
5355 @ wifiserver.ts:31
webpack_require @ bootstrap:19
28926 @ TransportIcon.tsx:42
webpack_require @ bootstrap:19
49501 @ strip-prefix.js:20
webpack_require @ bootstrap:19
13165 @ api-runner-browser-plugins.js:23
webpack_require @ bootstrap:19
80064 @ api-runner-browser.js:1
webpack_require @ bootstrap:19
55309 @ page-renderer.js:59
webpack_require @ bootstrap:19
webpack_exec @ index.modern.mjs:3
(anoniem) @ index.modern.mjs:3
webpack_require.O @ chunk loaded:25
(anoniem) @ index.modern.mjs:3
webpackJsonpCallback @ jsonp chunk loading:74
(anoniem) @ app-4d30d40291f810e06489.js:1
Sender.js:568 POST https://dc.services.visualstudio.com/v2/track 400
_xhrSender @ Sender.js:568
_self. @ Sender.js:322
_self.flush @ Sender.js:108
(anoniem) @ ChannelController.js:168
_iterateChain @ ProcessTelemetryContext.js:161
(anoniem) @ ChannelController.js:163
(anoniem) @ ChannelController.js:51
HelperFuncs_arrForEach @ HelperFuncs.js:343
_processChannelQueue @ ChannelController.js:44
flush @ ChannelController.js:162
_flushChannels @ BaseCore.js:572
_flushChannels @ PageViewManager.js:26
(anoniem) @ PageViewManager.js:51
setInterval (asynchroon)
_addQueue @ PageViewManager.js:32
_self. @ PageViewManager.js:113
_self. @ AnalyticsPlugin.js:196
(anoniem) @ HelperFuncs.js:641
push.92513.page @ useAnalytics.tsx:62
(anoniem) @ gatsby-browser.js:51
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
(anoniem) @ asyncToGenerator.js:32
(anoniem) @ asyncToGenerator.js:21
onRouteUpdate @ gatsby-browser.js:50
(anoniem) @ api-runner-browser.js:26
push.80064.exports.h @ api-runner-browser.js:17
onRouteUpdate @ navigation.js:44
componentDidMount @ navigation.js:224
lk @ react-dom.production.min.js:261
jk @ react-dom.production.min.js:260
ik @ react-dom.production.min.js:259
Xk @ react-dom.production.min.js:283
Qk @ react-dom.production.min.js:281
Hk @ react-dom.production.min.js:270
J @ scheduler.production.min.js:13
R @ scheduler.production.min.js:14
InstrumentHooks.js:97 POST https://dc.services.visualstudio.com/v2/track 400
(anoniem) @ InstrumentHooks.js:97
_doFetchSender @ Sender.js:646
_fetchKeepAliveSender @ Sender.js:578
_doUnloadSend @ Sender.js:489
_self. @ Sender.js:319
_self.onunloadFlush @ Sender.js:119
dynProtoProxy @ dynamicproto-js.js:374
(anoniem) @ Initialization.js:128
HelperFuncs_arrForEach @ HelperFuncs.js:343
(anoniem) @ Initialization.js:126
HelperFuncs_arrForEach @ HelperFuncs.js:343
_self. @ Initialization.js:125
dynProtoProxy @ dynamicproto-js.js:374
performHousekeeping @ Initialization.js:231
_handlePageVisibility @ EventHelpers.js:414

@louisvangeldrop
Copy link
Author

I have started a Chromebook remote tunnel session again and in the console I run: devs devtools src/main.ts --internet -s.
On my pc - where the code tunnel service runs, with address 192.168.0.126 the url: http: //localhost:8081/connect works and shows the connect button.
However on the same pc the url: http://192.168.0.126:8081/connect doesn't show the connect button

@louisvangeldrop
Copy link
Author

BTW: if one enters a special character e.g. "?" in the filter field it returns: Something went wrong. Please reload the page.

@pelikhan
Copy link
Member

(? ... there seems to be some parsing issues in the console ui)

I suspect that since you are not going through vscode and using the cli directly, the port forwarding is not put in place.

@louisvangeldrop
Copy link
Author

I have also used the vscode extension, but then only the url: localhost:8081/connect is supported. It will not find e.g. 192.168.0.126:8081/connect

@pelikhan
Copy link
Member

Did you try to enable the "internet" flag in the developer tools settings in vscode?

It should add the --internet flag when starting the devtools server

@louisvangeldrop
Copy link
Author

Used command: devs devtools src/main.ts --internet -s

@pelikhan
Copy link
Member

Try enabling this flag in vscode
image

@louisvangeldrop
Copy link
Author

Now I can open url: 192.168.0.126:8081/connect, but the "Connect" button is missing

@pelikhan
Copy link
Member

What browser are you using? Is there any error in the JavaScript console?

@louisvangeldrop
Copy link
Author

At my chromebook Chrome. At my latop Edge.
Error in the browser development window:

Unrecognized feature: 'vr'.
about:blank:1 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
ServiceManagerContext.tsx:110 starting hosted services

@louisvangeldrop
Copy link
Author

With Chromebook Chrome browser I do get after starting devs devtools .......

the error:
microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.5838419806994697:74 Mixed Content: The page at 'https://microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.5838419806994697' was loaded over HTTPS, but requested an insecure font 'http://themes.googleusercontent.com/static/fonts/inconsolata/v5/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff'. This request has been blocked; the content must be served over HTTPS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants