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>
2026-03-26 10:21:52 +00:00 · 2023-07-14 14:58:02 -06:00
parent 36c3617204
commit 9ff0128fb1
14 changed files with 182 additions and 104 deletions
--- a/frontend/projects/setup-wizard/src/app/pages/success/download-doc/download-doc.component.html
+++ b/frontend/projects/setup-wizard/src/app/pages/success/download-doc/download-doc.component.html
@@ -27,31 +27,15 @@
      <section
        style="
          padding: 1rem 3rem 2rem 3rem;
-          border: solid #c4c4c5 3px;
          margin-bottom: 24px;
+          border: solid #c4c4c5 3px;
+          border-radius: 20px;
        "
      >
-        <h2 style="font-variant-caps: all-small-caps">
-          Access from home (LAN)
-        </h2>
-        <p>
-          Visit the address below when you are connected to the same WiFi or
-          Local Area Network (LAN) as your server:
-        </p>
-        <p
-          style="
-            padding: 16px;
-            font-weight: bold;
-            font-size: 1.1rem;
-            overflow: auto;
-          "
-        >
-          <code id="lan-addr"></code>
-        </p>
        <div>
          <h3 style="color: #f8546a; font-weight: bold">Important!</h3>
          <p>
-            Be sure to
+            Download your server's Root CA and
            <a
              href="https://docs.start9.com/latest/user-manual/connecting/connecting-lan"
              target="_blank"
@@ -60,12 +44,10 @@
            >
              follow the instructions
            </a>
-            to establish a secure connection by installing your server's root
-            certificate authority.
+            to establish a secure connection with your server.
          </p>
        </div>
-
-        <div style="padding: 2rem; text-align: center">
+        <div style="text-align: center">
          <a
            id="cert"
            [download]="crtName"
@@ -88,12 +70,49 @@
          </a>
        </div>
      </section>
+      <section
+        style="
+          padding: 1rem 3rem 2rem 3rem;
+          border: solid #c4c4c5 3px;
+          border-radius: 20px;
+          margin-bottom: 24px;
+        "
+      >
+        <h2 style="font-variant-caps: all-small-caps">
+          Access from home (LAN)
+        </h2>
+        <p>
+          Visit the address below when you are connected to the same WiFi or
+          Local Area Network (LAN) as your server.
+        </p>
+        <p
+          style="
+            padding: 16px;
+            font-weight: bold;
+            font-size: 1.1rem;
+            overflow: auto;
+          "
+        >
+          <code id="lan-addr"></code>
+        </p>

-      <section style="padding: 1rem 3rem 2rem 3rem; border: solid #c4c4c5 3px">
        <h2 style="font-variant-caps: all-small-caps">
          Access on the go (Tor)
        </h2>
-        <p>Visit the address below when you are away from home:</p>
+        <p>Visit the address below when you are away from home.</p>
+        <p>
+          <span style="font-weight: bold">Note:</span>
+          This address will only work from a Tor-enabled browser.
+          <a
+            href="https://docs.start9.com/latest/user-manual/connecting/connecting-tor"
+            target="_blank"
+            rel="noreferrer"
+            style="color: #6866cc; font-weight: bold; text-decoration: none"
+          >
+            Follow the instructions
+          </a>
+          to get setup.
+        </p>
        <p
          style="
            padding: 16px;
@@ -104,21 +123,6 @@
        >
          <code id="tor-addr"></code>
        </p>
-        <div>
-          <h3 style="color: #f8546a; font-weight: bold">Important!</h3>
-          <p>
-            This address will only work from a Tor-enabled browser.
-            <a
-              href="https://docs.start9.com/latest/user-manual/connecting/connecting-tor"
-              target="_blank"
-              rel="noreferrer"
-              style="color: #6866cc; font-weight: bold; text-decoration: none"
-            >
-              Follow the instructions
-            </a>
-            to get setup.
-          </p>
-        </div>
      </section>
    </div>
  </body>
--- a/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts
+++ b/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts
@@ -49,7 +49,7 @@ export class SuccessPage {
      const ret = await this.api.complete()
      if (!this.isKiosk) {
        this.torAddress = ret['tor-address']
-        this.lanAddress = ret['lan-address'].replace('https', 'http')
+        this.lanAddress = ret['lan-address'].replace(/^https:/, 'http:')
        this.cert = ret['root-ca']

        await this.api.exit()
--- a/frontend/projects/setup-wizard/src/app/services/api/mock-api.service.ts
+++ b/frontend/projects/setup-wizard/src/app/services/api/mock-api.service.ts
@@ -2,10 +2,10 @@ import { Injectable } from '@angular/core'
 import { encodeBase64, pauseFor } from '@start9labs/shared'
 import {
  ApiService,
-  CifsRecoverySource,
  AttachReq,
-  ExecuteReq,
+  CifsRecoverySource,
  CompleteRes,
+  ExecuteReq,
 } from './api.service'
 import * as jose from 'node-jose'

@@ -149,7 +149,7 @@ export class MockApiService extends ApiService {
  async complete(): Promise<CompleteRes> {
    await pauseFor(1000)
    return {
-      'tor-address': 'http://asdafsadasdasasdasdfasdfasdf.onion',
+      'tor-address': 'https://asdafsadasdasasdasdfasdfasdf.onion',
      'lan-address': 'https://adjective-noun.local',
      'root-ca': encodeBase64(rootCA),
    }
--- a/frontend/projects/ui/src/app/app.component.ts
+++ b/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'))
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
+++ b/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']
              : '',
          },
        }
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
+++ b/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)
  }
 }
--- a/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts
+++ b/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) {
--- a/frontend/projects/ui/src/app/services/api/mock-patch.ts
+++ b/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',
--- a/frontend/projects/ui/src/app/services/config.service.ts
+++ b/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)}`
    }
  }