feat: secure allowance creationby including protocol information

src/app/components/Enable/WeblnEnable.tsx

@@ -4,6 +4,7 @@ import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import Alert from "~/app/components/Alert";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
 import { USER_REJECTED_ERROR } from "~/common/constants";
@@ -15,6 +16,7 @@ type Props = {
 };
 function WeblnEnableComponent(props: Props) {
   const [loading, setLoading] = useState(false);
+  const hasHttp = props.origin.domain.startsWith("http://");
   const { t } = useTranslation("translation", {
     keyPrefix: "webln_enable",
   });
@@ -62,6 +64,14 @@ function WeblnEnableComponent(props: Props) {
             isSmall={false}
           />
 
+          <div className="pt-3">
+            {hasHttp && (
+              <Alert type="warn">
+                ⚠️ you are connecting to a unsecure domain
+              </Alert>
+            )}
+          </div>
+
           <div className="dark:text-white pt-6">
             <p className="mb-2">{tCommon("enable.allow")}</p>
 
@@ -75,6 +85,7 @@ function WeblnEnableComponent(props: Props) {
             </div>
           </div>
         </div>
+
         <div className="text-center flex flex-col">
           <ConfirmOrCancel
             disabled={loading}

src/common/utils/helpers.ts

@@ -21,8 +21,8 @@ export function getHostFromSender(sender: Sender) {
   // from a privileged page, otherwise use MessageSender.url
   // MessageSender.origin is more reliable as it is not spoofable by a
   // compromised renderer.
-  if (sender.origin) return new URL(sender.origin).host;
-  else if (sender.url) return new URL(sender.url).host;
+  if (sender.origin) return sender.origin;
+  else if (sender.url) return new URL(sender.url).origin;
   else return null;
 }
 

src/extension/background-script/migrations/index.ts

@@ -1,10 +1,8 @@
-// import db from "../db";
-// import state from "../state";
+import db from "~/extension/background-script/db";
+import state from "../state";
 
 export type Migration = keyof typeof migrations;
 
-/*
-
 // TS does not want unused code.
 // we need this for the next migration again
 
@@ -30,19 +28,28 @@ const setMigrated = (name: Migration): Promise<void> => {
   return state.getState().saveToStorage();
 };
 
-*/
-
-const migrations = {};
+const migrations = {
+  migrateAllowanceDomainProtocol: async () => {
+    const allowances = await db.allowances.toArray();
+
+    allowances.forEach(async (allowances) => {
+      allowances.id &&
+        (await db.allowances.update(allowances.id, {
+          host: `https://${allowances.host}`,
+        }));
+    });
+  },
+};
 
 const migrate = async () => {
   // going forward we can iterate through the the migrations object above and DRY this up:
   // Object.keys(migrations).forEach((name: string) => {
   // example:
-  //if (shouldMigrate("migratePermissionsWithoutAccountId")) {
-  //  console.info("Running migration for: migratePermissionsWithoutAccountId");
-  //  await migrations["migratePermissionsWithoutAccountId"]();
-  //  await setMigrated("migratePermissionsWithoutAccountId");
-  //}
+  if (shouldMigrate("migrateAllowanceDomainProtocol")) {
+    console.info("Running migration for: migrateAllowanceDomainProtocol");
+    await migrations["migrateAllowanceDomainProtocol"]();
+    await setMigrated("migrateAllowanceDomainProtocol");
+  }
 };
 
 export default migrate;