Better string masking method

report-window/domain-summary.tsx

@@ -25,13 +25,16 @@ export default function DomainSummary({
       Właściciel domeny <strong>{cluster.id}</strong> otrzymał:{" "}
       <ul>
         <li>Mój adres IP</li>
-        {cluster.getRepresentativeStolenData().map((entry) => (
+        {cluster
-          <li>
+          .getRepresentativeStolenData()
-            {emailClassifications[entry.classification]}{" "}
+          .filter((entry) => entry.isMarked)
-            {emailSources[entry.source]} (nazwa: <code>{entry.name}</code>,{" "}
+          .map((entry) => (
-            wartość: <code>{entry.getValuePreview()}</code>)
+            <li>
-          </li>
+              {emailClassifications[entry.classification]}{" "}
-        ))}
+              {emailSources[entry.source]} (nazwa: <code>{entry.name}</code>,{" "}
+              wartość: <code>{entry.getValuePreview()}</code>)
+            </li>
+          ))}
       </ul>
     </li>
   );

sidebar/stolen-data-cluster.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import { getMemory } from "../memory";
-import { RequestCluster } from "../request-cluster";
+import { StolenDataEntry } from "../stolen-data-entry";
-import { Sources, StolenDataEntry } from "../stolen-data-entry";
 
-import { useEmitter } from "../util";
+import { maskString, useEmitter } from "../util";
 
 const MAX_STRING_VALUE_LENGTH = 100;
 
@@ -20,8 +19,7 @@ function StolenDataValue({
   } else {
     body = (
       <div data-version={version}>
-        {entry.value.slice(0, MAX_STRING_VALUE_LENGTH)}{" "}
+        {maskString(entry.value, 1, MAX_STRING_VALUE_LENGTH)}
-        {entry.value.length > MAX_STRING_VALUE_LENGTH ? "(...)" : ""}
       </div>
     );
   }
@@ -37,13 +35,6 @@ function StolenDataValue({
   );
 }
 
-const icons: Record<Sources, string> = {
-  cookie: "🍪",
-  pathname: "🛣",
-  queryparams: "🅿",
-  header: "H",
-};
-
 function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
   const [version] = useEmitter(entry);
   return (
@@ -65,12 +56,24 @@ function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
         {entry.name}
       </th>
       <td style={{ whiteSpace: "nowrap" }}>
-        {[entry.source].map((source) => icons[source])}
+        {entry.source === "cookie" ? (
+          <span title="Dane przechowywane w Cookies">🍪</span>
+        ) : entry.request.hasCookie() ? (
+          <span
+            title="Wysłane w zapytaniu opatrzonym cookies"
+            style={{ opacity: 0.5, fontSize: "0.5em" }}
+          >
+            🍪
+          </span>
+        ) : null}
         {entry.exposesOrigin() ? (
-          <span title="Pokazuje część historii przeglądania">🔴</span>
+          <span title="Pokazuje część historii przeglądania">⚠️</span>
         ) : entry.request.exposesOrigin() ? (
-          <span title="Jest częścią zapytania, które ujawnia historię przeglądania">
+          <span
-            🟡
+            title="Jest częścią zapytania, które ujawnia historię przeglądania"
+            style={{ opacity: 0.5, fontSize: "0.5em" }}
+          >
+            ⚠️
           </span>
         ) : null}
       </td>

stolen-data-entry.ts

@@ -8,6 +8,7 @@ import {
   isBase64JSON,
   isJSONObject,
   isURL,
+  maskString,
   parseToObject,
 } from "./util";
 
@@ -198,9 +199,7 @@ export class StolenDataEntry extends EventEmitter {
         ? (value[Symbol.for("originalString")] as string)
         : value.toString();
     if (typeof value !== "object" && this.classification == "id") {
-      return (
+      return maskString(value, 1 / 3, ID_PREVIEW_MAX_LENGTH);
-        str.slice(0, Math.min(str.length / 3, ID_PREVIEW_MAX_LENGTH)) + "(...)"
-      );
     } else if (
       typeof value === "object" &&
       value[Symbol.for("originalString")]

test.ts

@@ -1,3 +1,7 @@
-import { flattenObject } from "./util";
+import { flattenObject, maskString } from "./util";
 
 console.log(flattenObject({ a: { b: { c: [1, 2, 3] } } }));
+
+console.log(maskString("abcdefghijklmnopqrstuvwxyz", 1 / 3, 5));
+
+console.log(maskString("abcdefghijklmnopqrstuvwxyz", 1, 30));

util.ts

@@ -211,3 +211,20 @@ export function flattenObjectEntries(
 ): [string, string][] {
   return flattenObject(Object.fromEntries(entries));
 }
+
+export function maskString(
+  str: string,
+  max_fraction_remaining: number,
+  max_chars_total: number
+): string {
+  const amount_of_chars_to_cut =
+    str.length - Math.min(str.length * max_fraction_remaining, max_chars_total);
+  if (amount_of_chars_to_cut == 0) {
+    return str;
+  }
+  return (
+    str.slice(0, str.length / 2 - amount_of_chars_to_cut / 2) +
+    "(...)" +
+    str.slice(str.length / 2 + amount_of_chars_to_cut / 2)
+  );
+}