ready

tlsnotary · Nov 11, 2023 · bb78f9d · bb78f9d
1 parent 7ec1336
commit bb78f9d
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 96 deletions.
diff --git a/src/components/Notarize/index.tsx b/src/components/Notarize/index.tsx
@@ -9,10 +9,10 @@ import React, {
   useRef,
 } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router';
-import {notarizeRequest, useRequest} from '../../reducers/requests';
+import { notarizeRequest, useRequest } from '../../reducers/requests';
 import Icon from '../Icon';
-import {urlify} from "../../utils/misc";
-import {get, NOTARY_API_LS_KEY, PROXY_API_LS_KEY} from "../../utils/storage";
+import { urlify } from '../../utils/misc';
+import { get, NOTARY_API_LS_KEY, PROXY_API_LS_KEY } from '../../utils/storage';
 import { useDispatch } from 'react-redux';
 
 const maxTranscriptSize = 16384;
@@ -23,8 +23,8 @@ export default function Notarize(): ReactElement {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const [step, setStep] = useState(0);
-  const [secrets, setSecrets] = useState<string[]>([]);
-  const [reveals, setReveals] = useState('');
+  const [secretHeaders, setSecretHeaders] = useState<string[]>([]);
+  const [secretResps, setSecretResps] = useState<string[]>([]);
 
   const notarize = useCallback(async () => {
     if (!req) return;
@@ -56,23 +56,35 @@ export default function Notarize(): ReactElement {
         maxTranscriptSize,
         notaryUrl,
         websocketProxyUrl,
-        secrets,
-        reveals: [reveals],
+        secretHeaders,
+        secretResps,
       }),
     );
     navigate(`/history`);
-  }, [req, secrets, reveals]);
+  }, [req, secretHeaders, secretResps]);
 
   if (!req) return <></>;
 
   let body;
 
   switch (step) {
     case 0:
-      body = <RevealHeaderStep onNext={() => setStep(1)} onCancel={() => navigate(-1)} setSecrets={setSecrets} />;
+      body = (
+        <RevealHeaderStep
+          onNext={() => setStep(1)}
+          onCancel={() => navigate(-1)}
+          setSecretHeaders={setSecretHeaders}
+        />
+      );
       break;
     case 1:
-      body = <HideResponseStep onNext={notarize} onCancel={() => setStep(0)} setReveals={setReveals} />
+      body = (
+        <HideResponseStep
+          onNext={notarize}
+          onCancel={() => setStep(0)}
+          setSecretResps={setSecretResps}
+        />
+      );
       break;
     default:
       body = null;
@@ -101,32 +113,45 @@ export default function Notarize(): ReactElement {
       </div>
       {body}
     </div>
-  )
+  );
 }
 
 function RevealHeaderStep(props: {
   onNext: () => void;
   onCancel: () => void;
-  setSecrets: (secrets: string[]) => void;
+  setSecretHeaders: (secrets: string[]) => void;
 }): ReactElement {
   const params = useParams<{ requestId: string }>();
   const req = useRequest(params.requestId);
   const [revealed, setRevealed] = useState<{ [key: string]: boolean }>({});
 
-  const changeHeaderKey = useCallback((key: string, shouldReveal: boolean) => {
+  useEffect(() => {
     if (!req) return;
 
-    setRevealed({
-      ...revealed,
-      [key]: shouldReveal,
-    });
-    props.setSecrets(req.requestHeaders.map(h => {
-      if (!revealed[h.name]) {
-        return h.value || '';
-      }
-      return '';
-    }).filter(d => !!d));
-  }, [revealed, req]);
+    props.setSecretHeaders(
+      req.requestHeaders
+        .map((h) => {
+          console.log(h.name, !revealed[h.name]);
+          if (!revealed[h.name]) {
+            return `${h.name.toLowerCase()}: ${h.value || ''}` || '';
+          }
+          return '';
+        })
+        .filter((d) => !!d),
+    );
+  }, [revealed]);
+
+  const changeHeaderKey = useCallback(
+    (key: string, shouldReveal: boolean) => {
+      if (!req) return;
+
+      setRevealed({
+        ...revealed,
+        [key]: shouldReveal,
+      });
+    },
+    [revealed, req],
+  );
 
   if (!req) return <></>;
 
@@ -138,31 +163,40 @@ function RevealHeaderStep(props: {
       <div className="flex-grow flex-shrink h-0 overflow-y-auto">
         <table className="border border-slate-300 border-collapse table-fixed">
           <tbody className="bg-slate-200">
-          {req.requestHeaders?.map((h) => (
-            <tr key={h.name} className={classNames("border-b border-slate-200 text-xs", {
-              'bg-slate-50': !!revealed[h.name],
-            })}>
-              <td className="border border-slate-300 py-1 px-2 align-top">
-                <input
-                  type="checkbox"
-                  className="cursor-pointer"
-                  onChange={(e) => changeHeaderKey(h.name, e.target.checked)}
-                  checked={!!revealed[h.name]}
-                />
-              </td>
-              <td className="border border-slate-300 font-bold align-top py-1 px-2 whitespace-nowrap">
-                {h.name}
-              </td>
-              <td className="border border-slate-300 break-all align-top py-1 px-2">
-                {!!revealed[h.name] ? h.value : Array(h.value?.length || 0).fill('*').join('')}
-              </td>
-            </tr>
-          ))}
+            {req.requestHeaders?.map((h) => (
+              <tr
+                key={h.name}
+                className={classNames('border-b border-slate-200 text-xs', {
+                  'bg-slate-50': !!revealed[h.name],
+                })}
+              >
+                <td className="border border-slate-300 py-1 px-2 align-top">
+                  <input
+                    type="checkbox"
+                    className="cursor-pointer"
+                    onChange={(e) => changeHeaderKey(h.name, e.target.checked)}
+                    checked={!!revealed[h.name]}
+                  />
+                </td>
+                <td className="border border-slate-300 font-bold align-top py-1 px-2 whitespace-nowrap">
+                  {h.name}
+                </td>
+                <td className="border border-slate-300 break-all align-top py-1 px-2">
+                  {!!revealed[h.name]
+                    ? h.value
+                    : Array(h.value?.length || 0)
+                        .fill('*')
+                        .join('')}
+                </td>
+              </tr>
+            ))}
           </tbody>
         </table>
       </div>
       <div className="flex flex-row justify-end p-2 gap-2 border-t">
-        <button className="button" onClick={props.onCancel}>Cancel</button>
+        <button className="button" onClick={props.onCancel}>
+          Cancel
+        </button>
         <button
           className="bg-primary/[0.9] text-white font-bold hover:bg-primary/[0.8] px-2 py-0.5 active:bg-primary"
           onClick={props.onNext}
@@ -177,7 +211,7 @@ function RevealHeaderStep(props: {
 function HideResponseStep(props: {
   onNext: () => void;
   onCancel: () => void;
-  setReveals: (reveal: string) => void;
+  setSecretResps: (secrets: string[]) => void;
 }): ReactElement {
   const params = useParams<{ requestId: string }>();
   const req = useRequest(params.requestId);
@@ -186,12 +220,22 @@ function HideResponseStep(props: {
   const [end, setEnd] = useState(0);
   const taRef = useRef<HTMLTextAreaElement | null>(null);
 
-  const onSelectionChange: ReactEventHandler<HTMLTextAreaElement> = useCallback((e) => {
-    const ta = e.currentTarget;
-    setStart(ta.selectionStart);
-    setEnd(ta.selectionEnd);
-    props.setReveals(responseText.substring(ta.selectionStart, ta.selectionEnd));
-  }, [responseText]);
+  const onSelectionChange: ReactEventHandler<HTMLTextAreaElement> = useCallback(
+    (e) => {
+      const ta = e.currentTarget;
+      if (ta.selectionEnd > ta.selectionStart) {
+        setStart(ta.selectionStart);
+        setEnd(ta.selectionEnd);
+        props.setSecretResps(
+          [
+            responseText.substring(0, ta.selectionStart),
+            responseText.substring(ta.selectionEnd, responseText.length),
+          ].filter((d) => !!d),
+        );
+      }
+    },
+    [responseText],
+  );
 
   useEffect(() => {
     if (!req) return;
@@ -218,7 +262,7 @@ function HideResponseStep(props: {
       options.body = formData.toString();
     }
 
-    replay(req.url, options).then(resp => setResponseText(resp));
+    replay(req.url, options).then((resp) => setResponseText(resp));
   }, [req]);
 
   useEffect(() => {
@@ -229,15 +273,21 @@ function HideResponseStep(props: {
       current.setSelectionRange(start, end);
     }
   }, [taRef, start, end]);
-  
+
   if (!req) return <></>;
 
   let shieldedText = '';
 
   if (end > start) {
-    shieldedText = Array(start).fill('*').join('')
+    shieldedText = Array(start)
+      .fill('*')
+      .join('')
       .concat(responseText.substring(start, end))
-      .concat(Array(responseText.length - end).fill('*').join(''));
+      .concat(
+        Array(responseText.length - end)
+          .fill('*')
+          .join(''),
+      );
   }
   return (
     <div className="flex flex-col flex-nowrap flex-shrink flex-grow h-0">
@@ -253,7 +303,9 @@ function HideResponseStep(props: {
         />
       </div>
       <div className="flex flex-row justify-end p-2 gap-2 border-t">
-        <button className="button" onClick={props.onCancel}>Back</button>
+        <button className="button" onClick={props.onCancel}>
+          Back
+        </button>
         <button
           className="bg-primary/[0.9] text-white font-bold hover:bg-primary/[0.8] px-2 py-0.5 active:bg-primary"
           onClick={props.onNext}
@@ -265,7 +317,7 @@ function HideResponseStep(props: {
   );
 }
 
-const replay = async (url: string, options: RequestInit) => {
+const replay = async (url: string, options: any) => {
   const resp = await fetch(url, options);
   const contentType =
     resp?.headers.get('content-type') || resp?.headers.get('Content-Type');
@@ -275,8 +327,8 @@ const replay = async (url: string, options: RequestInit) => {
   } else if (contentType?.includes('text')) {
     return resp.text();
   } else if (contentType?.includes('image')) {
-    return resp.blob().then(blob => blob.text());
+    return resp.blob().then((blob) => blob.text());
   } else {
-    return resp.blob().then(blob => blob.text());
+    return resp.blob().then((blob) => blob.text());
   }
-};
+};
diff --git a/src/components/RequestDetail/index.tsx b/src/components/RequestDetail/index.tsx
@@ -24,7 +24,6 @@ type Props = {
   requestId: string;
 };
 
-
 export default function RequestDetail(props: Props): ReactElement {
   const request = useRequest(props.requestId);
   const navigate = useNavigate();

diff --git a/src/manifest.json b/src/manifest.json
@@ -30,11 +30,8 @@
   "host_permissions": ["<all_urls>"],
   "permissions": [
     "offscreen",
-    "http://*/",
-    "https://*/",
     "storage",
     "webRequest",
-    "activeTab",
-    "<all_urls>"
+    "activeTab"
   ]
 }
diff --git a/src/pages/Background/actionTypes.ts b/src/pages/Background/actionTypes.ts
@@ -50,6 +50,6 @@ export type RequestHistory = {
     sent: string;
     recv: string;
   };
-  secrets?: string[];
-  reveals?: string[];
+  secretHeaders?: string[];
+  secretResps?: string[];
 };
diff --git a/src/pages/Background/index.ts b/src/pages/Background/index.ts
@@ -282,8 +282,8 @@ chrome.tabs.onRemoved.addListener((tab) => {
             maxTranscriptSize,
             notaryUrl,
             websocketProxyUrl,
-            secrets,
-            reveals,
+            secretHeaders,
+            secretResps,
           } = request.data;
 
           const { id } = await addNotaryRequest(Date.now(), {
@@ -294,8 +294,8 @@ chrome.tabs.onRemoved.addListener((tab) => {
             maxTranscriptSize,
             notaryUrl,
             websocketProxyUrl,
-            secrets,
-            reveals,
+            secretHeaders,
+            secretResps,
           });
 
           await setNotaryRequestStatus(id, 'pending');
@@ -319,8 +319,8 @@ chrome.tabs.onRemoved.addListener((tab) => {
               maxTranscriptSize,
               notaryUrl,
               websocketProxyUrl,
-              secrets,
-              reveals,
+              secretHeaders,
+              secretResps,
             },
           });
 

diff --git a/src/pages/Offscreen/Offscreen.tsx b/src/pages/Offscreen/Offscreen.tsx
@@ -29,8 +29,8 @@ const Offscreen = () => {
               notaryUrl,
               websocketProxyUrl,
               id,
-              secrets,
-              reveals,
+              secretHeaders,
+              secretResps,
             } = request.data;
 
             const tlsn = await getTLSN();
@@ -43,8 +43,8 @@ const Offscreen = () => {
                 maxTranscriptSize,
                 notaryUrl,
                 websocketProxyUrl,
-                secrets,
-                reveals,
+                secretHeaders,
+                secretResps,
               });
 
               chrome.runtime.sendMessage<any, string>({