support http2 alpn handshake (#2354)

* support http2 alpn handshake

* fix protocol name

* switch to https for tor

* update setup wizard and main ui to accommodate https (#2356)

* update setup wizard and main ui to accommodate https

* update wording in download doc

* fix accidential conversion of tor https for services and allow ws still

* redirect to https if available

* fix replaces to only search at beginning and ignore localhost when checking for https

---------

Co-authored-by: Lucy <12953208+elvece@users.noreply.github.com>

frontend/projects/ui/src/app/app.component.ts

@@ -38,7 +38,15 @@ export class AppComponent implements OnDestroy {
     readonly themeSwitcher: ThemeSwitcherService,
   ) {}
 
-  ngOnInit() {
+  async ngOnInit() {
+    if (location.hostname !== 'localhost' && location.protocol === 'http:') {
+      // see if site is available securely
+      const res = await fetch(window.location.href.replace(/^http:/, 'https:'))
+      if (res && res.status === 200) {
+        // redirect
+        window.location.protocol = 'https:'
+      }
+    }
     this.patch
       .watch$('ui', 'name')
       .subscribe(name => this.titleService.setTitle(name || 'StartOS'))

frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { ModalController, ToastController } from '@ionic/angular'
-import { getPkgId, copyToClipboard } from '@start9labs/shared'
+import { copyToClipboard, getPkgId } from '@start9labs/shared'
 import { getUiInterfaceKey } from 'src/app/services/config.service'
 import {
   DataModel,
@@ -51,6 +51,7 @@ export class AppInterfacesPage {
           'lan-address': uiAddresses['lan-address']
             ? 'https://' + uiAddresses['lan-address']
             : '',
+          // leave http for services
           'tor-address': uiAddresses['tor-address']
             ? 'http://' + uiAddresses['tor-address']
             : '',
@@ -69,7 +70,8 @@ export class AppInterfacesPage {
               ? 'https://' + addresses['lan-address']
               : '',
             'tor-address': addresses['tor-address']
-              ? 'http://' + addresses['tor-address']
+              ? // leave http for services
+                'http://' + addresses['tor-address']
               : '',
           },
         }

frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.ts

@@ -65,7 +65,9 @@ export class AppShowPage {
   }
 
   async launchHttps() {
-    const { 'lan-address': lanAddress } = await getServerInfo(this.patch)
-    window.open(lanAddress)
+    const onTor = this.config.isTor()
+    const { 'lan-address': lanAddress, 'tor-address': torAddress } =
+      await getServerInfo(this.patch)
+    onTor ? window.open(torAddress) : window.open(lanAddress)
   }
 }

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts

@@ -2,8 +2,8 @@ import { Component, Inject } from '@angular/core'
 import {
   AlertController,
   LoadingController,
-  NavController,
   ModalController,
+  NavController,
   ToastController,
 } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
@@ -306,8 +306,10 @@ export class ServerShowPage {
   }
 
   async launchHttps() {
-    const { 'lan-address': lanAddress } = await getServerInfo(this.patch)
-    window.open(lanAddress)
+    const onTor = this.config.isTor()
+    const { 'lan-address': lanAddress, 'tor-address': torAddress } =
+      await getServerInfo(this.patch)
+    onTor ? window.open(torAddress) : window.open(lanAddress)
   }
 
   addClick(title: string) {

frontend/projects/ui/src/app/services/api/mock-patch.ts

@@ -47,7 +47,7 @@ export const mockPatchData: DataModel = {
     version: '0.3.4.3',
     'last-backup': new Date(new Date().valueOf() - 604800001).toISOString(),
     'lan-address': 'https://adjective-noun.local',
-    'tor-address': 'http://myveryownspecialtoraddress.onion',
+    'tor-address': 'https://myveryownspecialtoraddress.onion',
     'ip-info': {
       eth0: {
         ipv4: '10.0.0.1',

frontend/projects/ui/src/app/services/config.service.ts

@@ -69,6 +69,7 @@ export class ConfigService {
     if (this.isLan() && hasLanUi(pkg.manifest.interfaces)) {
       return `https://${lanUiAddress(pkg)}`
     } else {
+      // leave http for services
       return `http://${torUiAddress(pkg)}`
     }
   }