rentgen/sidebar/stolen-data-cluster.tsx

155 lines
3.7 KiB
TypeScript
Raw Normal View History

2021-11-07 09:17:19 +01:00
import React from "react";
2021-11-07 17:23:48 +01:00
import { getMemory } from "../memory";
2021-11-22 18:56:36 +01:00
import { StolenDataEntry } from "../stolen-data-entry";
2021-11-22 18:56:36 +01:00
import { maskString, useEmitter } from "../util";
const MAX_STRING_VALUE_LENGTH = 100;
function StolenDataValue({
entry,
}: {
2021-11-22 17:54:15 +01:00
entry: StolenDataEntry;
prefixKey?: string;
}) {
2021-11-21 23:00:55 +01:00
const [version] = useEmitter(entry);
2021-11-07 13:01:01 +01:00
let body = null;
2021-11-22 17:54:15 +01:00
if (!entry.value) {
2021-11-07 13:01:01 +01:00
body = <></>;
2021-11-22 17:54:15 +01:00
} else {
2021-11-07 13:01:01 +01:00
body = (
2021-11-22 17:54:15 +01:00
<div data-version={version}>
2021-11-22 18:56:36 +01:00
{maskString(entry.value, 1, MAX_STRING_VALUE_LENGTH)}
2021-11-07 13:01:01 +01:00
</div>
);
}
2021-11-07 13:01:01 +01:00
return (
<div
onClick={(e) => {
2021-11-22 17:54:15 +01:00
entry.toggleMark();
2021-11-07 13:01:01 +01:00
e.stopPropagation();
}}
style={{ color: entry.isMarked ? "black" : "gray" }}
2021-11-07 13:01:01 +01:00
>
{body}
</div>
);
}
2021-11-07 09:17:19 +01:00
function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
2021-11-21 23:00:55 +01:00
const [version] = useEmitter(entry);
return (
<tr data-key={entry.id} data-version={version}>
2021-11-22 17:54:15 +01:00
<td>
<input
type="checkbox"
checked={entry.isMarked}
onChange={() => entry.toggleMark()}
/>
</td>
2021-11-21 23:00:55 +01:00
<th
style={{
width: "100px",
overflowWrap: "anywhere",
}}
title={"Źródło: " + entry.source}
2021-11-22 17:54:15 +01:00
onClick={() => entry.toggleMark()}
2021-11-21 23:00:55 +01:00
>
2021-11-22 17:54:15 +01:00
{entry.name}
2021-11-21 23:00:55 +01:00
</th>
<td style={{ whiteSpace: "nowrap" }}>
2021-11-22 18:56:36 +01:00
{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() ? (
2021-11-22 18:56:36 +01:00
<span title="Pokazuje część historii przeglądania"></span>
) : entry.request.exposesOrigin() ? (
2021-11-22 18:56:36 +01:00
<span
title="Jest częścią zapytania, które ujawnia historię przeglądania"
style={{ opacity: 0.5, fontSize: "0.5em" }}
>
</span>
) : null}
</td>
2021-11-21 23:00:55 +01:00
<td style={{ wordWrap: "anywhere" as any }}>
<StolenDataValue entry={entry} />
</td>
</tr>
);
}
export default function StolenDataCluster({
2021-11-07 09:17:19 +01:00
origin,
shorthost,
minValueLength,
cookiesOnly,
2021-11-07 19:28:07 +01:00
cookiesOrOriginOnly,
2021-11-07 09:17:19 +01:00
}: {
origin: string;
shorthost: string;
refreshToken: number;
minValueLength: number;
cookiesOnly: boolean;
2021-11-07 19:28:07 +01:00
cookiesOrOriginOnly: boolean;
2021-11-07 09:17:19 +01:00
}) {
2021-11-07 13:57:24 +01:00
const cluster = getMemory().getClustersForOrigin(origin)[shorthost];
2021-11-07 09:17:19 +01:00
return (
<div>
<h2>
2021-11-07 13:01:01 +01:00
<a href={"https://" + cluster.id}>{cluster.id}</a>{" "}
{cluster.hasCookies() ? "🍪" : ""} x{cluster.requests.length}{" "}
{/* <a
* href="#"
* style={{ fontSize: "10px" }}
* onClick={() => getMemory().removeCookiesFor(origin, shorthost)}
* >
* Wyczyść cookiesy
* </a> */}
2021-11-07 09:17:19 +01:00
<a
href="#"
style={{ fontSize: "10px" }}
onClick={(e) => {
cluster.autoMark();
e.preventDefault();
}}
2021-11-07 09:17:19 +01:00
>
Zaznacz auto
2021-11-07 09:17:19 +01:00
</a>
</h2>
<div>
{cluster.getFullHosts().map((host) => (
2021-11-25 21:14:40 +01:00
<a key={host} href={`https://${host}`}>
{host},{" "}
</a>
))}
</div>
2021-11-07 09:17:19 +01:00
<table>
<tbody>
{cluster
.calculateRepresentativeStolenData({
2021-11-22 17:54:15 +01:00
minValueLength,
cookiesOnly,
cookiesOrOriginOnly,
})
2021-11-07 09:17:19 +01:00
.map((entry) => (
2021-11-21 23:00:55 +01:00
<StolenDataRow
{...{
entry,
2021-11-22 17:54:15 +01:00
key: entry.id,
2021-11-21 23:00:55 +01:00
}}
/>
2021-11-07 09:17:19 +01:00
))}
</tbody>
</table>
</div>
);
}