Add support for various transports, and mechanism to collect connectivity report #137

amircybersec · 2023-12-03T02:39:19Z

Connectivity Checker GUI Example App is extended to offer report collecting to a remote destination. One simple approach to set up a remote collector using Google Spreadsheet is discussed here.

CHANGELOG:

Add a new report collector url field to the GUI - can be left blank/ optional (front-end)
Add support for any transport and transport chain (e.g. split, socks5, tls, ss, etc)
Sanitize ss:// credentials in report using hash digest(user info): e.g.: split:5|split:10|ss://[email protected]:65496
Collect the connectivity test result (back-end)
Include transport specific setup errors (e.g. split not supported over udp) in response error field
Display error message on the GUI (front-end)
Rename app to Transport Tester
Added pop-up to show information on each field

TODO:

Improve text style in popup and hyperlink to docs
Add tags to errors, e.g.: transport config error, etc

daniellacosse

Do you mind editing the PR title to make it more specific? Something like "add transport support to connectivity test app"

daniellacosse · 2023-12-11T22:38:51Z

x/examples/outline-connectivity-app/shared_backend/main.go

 	// Observations
 	Time       time.Time              `json:"time"`
 	DurationMs int64                  `json:"durationMs"`
 	Error      *ConnectivityTestError `json:"error"`
 }

+func (r ConnectivityTestResult) IsSuccess() bool {
+	if r.Error == nil {


Why not just return r.Error == nil?

this is fixed

x/examples/outline-connectivity-app/shared_frontend/pages/connectivity_test/index.ts

daniellacosse · 2023-12-12T02:07:55Z

x/examples/outline-connectivity-app/shared_frontend/pages/connectivity_test/index.ts

+  .popup {
+    display: none;
+    position: absolute;
+    z-index: 1000; /* A high value to ensure it's on top */


Yep, this is why I recommended looking into the popover attribute. High z-indexes are a pretty major CSS code smell and are not scalable. Check it out: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover

If you don't want to use popover, I can guide you to avoiding high z-indices, but it will take some iterations.

@daniellacosse Thanks for the feedback. I got popover working on browser and iOS and desktop app but on Android it does not function as intended. Please see the screen shots below for Android and iOS. I suspect the WebView on Android (emulator pixel 7, API level 33) maybe using a Chrome version older than 114 which does not support popover. I am still investigating that theory. Please also let me know if you have any suggestions on how to best position the popover box on the screen.

iOS:

Android:

You can use feature detection to hide the elements when popovers aren't supported.

With respect to positioning, I think you'll need the wrap the target and the popover in an element that's positioned relatively. Then position the popover element absolutely.

Alternatively we could just center the popover in the page and add a backdrop. That avoids having to write Javascript do deal with the intersection logic.

I managed to get popover working on all platforms.

The issue on Android was due to the fact that Capacitor uses WebView which is not automatically updated on Emulator. Once I logged into Google Play on Emulator and upgrade WebView manually it fixed the issue. I think this should work fine on most recent Android devices but If the device runs a very old version of Android API / WebView, the popover element won't work as expected.

Also, I observed that on iOS tapping outside of the popover window does not hide it as other platforms. This is not a big deal since I added a close button x to the popover window to offer an alternative to close it down.

daniellacosse · 2023-12-12T02:10:07Z

x/examples/outline-connectivity-app/shared_frontend/pages/connectivity_test/index.ts

@@ -598,22 +600,24 @@ export class ConnectivityTestPage extends LitElement {
    // TODO: move language definitions to a centralized place
    return html`<main dir="${this.locale === "fa-IR" ? "rtl" : "ltr"}">
      <header class=${this.platform?.operatingSystem === OperatingSystem.IOS ? "header--ios" : "header"}>
-        <h1 class="header-text">${msg("Outline Connectivity Test")}</h1>
+        <h1 class="header-text">${msg("Transport Tester")}</h1>


If we're changing the title of the app, we'll need to change the folder name as well.

Why not Outline SDK Transport Tester?

The idea behind the name change was that with latest changes users can now test any of the supported transports in the SDK addition to ss/outline. Maybe we can drop SDK and call it Outline Transport Tester?

We can even keep the previous name. I think it will better to keep the title short.

Let's drop "Outline", since this is not an official Outline product. "Connectivity Tester" is probably more user-friendly than "Transport Tester".

Are we sure we want to drop "Outline"? I know it's not an official product, but a) it's free advertising and b) people will want to know the tool they're using.

I'm okay with shortening it to Connectivity Tester if we have a link somewhere explaining what the SDK is. Keeps the name short but serves the same goal of driving people to the SDK.

Good point. Perhaps we add a line somewhere, as a subtitle or perhaps a footer, saying Powered by the Outline SDK? We could link to it too.

I looked through the branding guideline and used the Powered By Outline SVG logo at the bottom of the page. This way we can keep the title short and still attribute to Outline SDK. I am fine with either Transport Tester or Connectivity Tester for the title, but I think the former rhymes better :)

amircybersec · 2024-01-04T00:29:18Z

converting to draft as it needs rebase & some refactoring

This PR introduces `tlsfrag:<len>` to the config format.

Co-authored-by: Vinicius Fortuna <[email protected]>

Explain what can be done with the SDK, expand integration documentation and create command line tools section.

Bumps [golang.org/x/crypto](https://github.com/golang/crypto) from 0.7.0 to 0.17.0. - [Commits](golang/crypto@v0.7.0...v0.17.0) --- updated-dependencies: - dependency-name: golang.org/x/crypto dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]>

Bumps [golang.org/x/crypto](https://github.com/golang/crypto) from 0.14.0 to 0.17.0. - [Commits](golang/crypto@v0.14.0...v0.17.0) --- updated-dependencies: - dependency-name: golang.org/x/crypto dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]>

Bumps [golang.org/x/net](https://github.com/golang/net) from 0.10.0 to 0.17.0. - [Commits](golang/net@v0.10.0...v0.17.0) --- updated-dependencies: - dependency-name: golang.org/x/net dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]>

Let me know if you'd like more detail.

This reverts commit e793764.

amircybersec · 2024-01-22T07:23:24Z

I had to rebase and refactor this PR and it ended up getting a bit messy. I decided to create a new branch off of main and related cherry pick commits into it. The result is a new PR #170. I am going to close this PR as a result.

amircybersec added 4 commits December 2, 2023 18:12

feature: add report field to the frontend

909904e

feat: collect reports in backend +retry/sampling

2d7a657

UI: remove prefix, transport optional, add error

87da88a

Backend: support for any transport, sanitize ss://

40f4ef1

amircybersec changed the title ~~Add report collecting mechanism to GUI app with report package~~ Revamp GUI connectivity tester app Dec 6, 2023

amircybersec added 2 commits December 10, 2023 13:33

collect report on on stdout

651c520

define custom popup info element

b4d82ac

amircybersec marked this pull request as ready for review December 11, 2023 17:43

fortuna requested review from daniellacosse and fortuna December 11, 2023 17:44

daniellacosse requested changes Dec 12, 2023

View reviewed changes

amircybersec changed the title ~~Revamp GUI connectivity tester app~~ Add support for various transports, and mechanism to collect connectivity report Dec 12, 2023

amircybersec added 5 commits December 12, 2023 13:58

reimplment info with popover

d608959

add logo element

5854d2c

refactor and improve popover element

2feeaea

add logo and popover to the app

87868ea

made IsSuccess more readable

79f7fb8

This was referenced Dec 28, 2023

chore: update examples to use new dns package #145

Merged

refactor: clean up outline-connectivity #146

Merged

amircybersec marked this pull request as draft January 4, 2024 00:28

fortuna and others added 9 commits January 21, 2024 16:41

chore: move tls library to transport (#139)

bcd51aa

feat(example): config for TLS fragmentation by fixed bytes (#135)

3461299

This PR introduces `tlsfrag:<len>` to the config format.

Fix command

b288ec5

refactor: clean up outline-connectivity (#146)

a31dc3e

add startTime & Duration to conn operations

6e73d19

sanitize config + get hostnames for dns test

3d6e2b5

revert timestamp changes

b28f3b0

generalize config sanitizer remove gethostnames

4e22395

clean up

d76a38f

amircybersec and others added 27 commits January 21, 2024 16:56

clean up and extend tests

28a815e

clean up sanitizer logic

33e7ac4

parse SIP002 first then fall back to legacy base64

2ef51e4

sanitize socks5 specifically; removed vless

6433f44

cleaned up tests

fcaec8a

Update x/config/shadowsocks.go

a2026b9

Co-authored-by: Vinicius Fortuna <[email protected]>

Update x/config/shadowsocks.go

48300e6

Co-authored-by: Vinicius Fortuna <[email protected]>

Update x/config/config.go

1d05ef1

Co-authored-by: Vinicius Fortuna <[email protected]>

chore: revamp README (#151)

5d37408

Explain what can be done with the SDK, expand integration documentation and create command line tools section.

feat: introduce Func Endpoints and Dialers (#153)

cb14031

chore: test Mobileproxy on CI (#147)

04305b2

feat: introduce address override (#155)

f95745b

feat: create DNS library (#141)

b38b491

chore: update examples to use new dns package (#145)

6091a61

add dynamic config support

e6695ad

feat: create graphical local proxy app (#164)

4c01a7b

BREAKING: Cleanup core transport library (#165)

80a4648

Update iOS WebView interception instructions

7d73010

Let me know if you'd like more detail.

Revert "add dynamic config support"

1c7b24e

This reverts commit e793764.

rename accessKey to transport

ed94c54

rename accessKey to transport

4cc5676

refactor: new dns pkg & config sanitizer

4e465d7

tidy packages

64aca1d

amircybersec mentioned this pull request Jan 22, 2024

Transport Tester GUI App: add support for generic transport, send report, UI polish #170

Closed

amircybersec closed this Jan 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for various transports, and mechanism to collect connectivity report #137

Add support for various transports, and mechanism to collect connectivity report #137

amircybersec commented Dec 3, 2023 •

edited

Loading

daniellacosse left a comment

daniellacosse Dec 11, 2023 •

edited

Loading

amircybersec Dec 26, 2023

daniellacosse Dec 12, 2023

amircybersec Dec 12, 2023

daniellacosse Dec 13, 2023 •

edited

Loading

amircybersec Dec 26, 2023

daniellacosse Dec 12, 2023

amircybersec Dec 12, 2023

fortuna Dec 13, 2023

daniellacosse Dec 13, 2023 •

edited

Loading

fortuna Dec 13, 2023

amircybersec Dec 26, 2023

amircybersec commented Jan 4, 2024

amircybersec commented Jan 22, 2024

Add support for various transports, and mechanism to collect connectivity report #137

Add support for various transports, and mechanism to collect connectivity report #137

Conversation

amircybersec commented Dec 3, 2023 • edited Loading

daniellacosse left a comment

Choose a reason for hiding this comment

daniellacosse Dec 11, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

daniellacosse Dec 13, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

daniellacosse Dec 13, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amircybersec commented Jan 4, 2024

amircybersec commented Jan 22, 2024

amircybersec commented Dec 3, 2023 •

edited

Loading

daniellacosse Dec 11, 2023 •

edited

Loading

daniellacosse Dec 13, 2023 •

edited

Loading

daniellacosse Dec 13, 2023 •

edited

Loading