rentgen/sidebar/stolen-data-cluster.tsx

185 lines
4.4 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-21 23:00:55 +01:00
import { RequestCluster } from "../request-cluster";
import {
MergedStolenDataEntry,
Sources,
StolenDataEntry,
} from "../stolen-data-entry";
2021-11-21 23:00:55 +01:00
import { hyphenate, useEmitter } from "../util";
const MAX_STRING_VALUE_LENGTH = 100;
function StolenDataValueTable({
entry,
prefixKey = "",
}: {
entry: MergedStolenDataEntry;
prefixKey: string;
}) {
return (
<table>
<tbody>
{Object.keys(entry.getParsedValues(prefixKey)[0]).map((key) => {
const subkey = `${prefixKey}.${key}`;
return (
<tr key={`${prefixKey}.${key}`}>
<th
onClick={(e) => {
entry.toggleMark(subkey);
e.stopPropagation();
}}
style={{
border: entry.hasMark(subkey)
? "2px solid red"
: "2px solid transparent",
}}
>
{hyphenate(key)}
</th>
<td>
<StolenDataValue entry={entry} prefixKey={subkey} />
</td>
</tr>
);
})}
</tbody>
</table>
);
}
function StolenDataValue({
entry,
prefixKey = "",
}: {
entry: MergedStolenDataEntry;
prefixKey?: string;
}) {
2021-11-21 23:00:55 +01:00
const [version] = useEmitter(entry);
const value = entry.getParsedValues(prefixKey)[0];
2021-11-07 13:01:01 +01:00
let body = null;
if (!value) {
2021-11-07 13:01:01 +01:00
body = <></>;
} else if (typeof value === "string") {
const content = entry.getParsedValues(prefixKey)[0] as string;
2021-11-07 13:01:01 +01:00
body = (
<div
style={{
border: entry.hasMark(prefixKey)
? "2px solid red"
: "2px solid transparent",
}}
2021-11-21 23:00:55 +01:00
data-version={version}
>
{content.slice(0, MAX_STRING_VALUE_LENGTH)}{" "}
{content.length > MAX_STRING_VALUE_LENGTH ? "(...)" : ""}
2021-11-07 13:01:01 +01:00
</div>
);
} else {
body = <StolenDataValueTable entry={entry} prefixKey={prefixKey} />;
}
2021-11-07 13:01:01 +01:00
return (
<div
onClick={(e) => {
entry.toggleMark(prefixKey);
e.stopPropagation();
}}
data-marks={entry.getMarkedValues().join(", ")}
>
{body}
</div>
);
}
2021-11-07 09:17:19 +01:00
const icons: Record<Sources, string> = {
cookie: "🍪",
pathname: "🛣",
queryparams: "🅿",
header: "H",
};
2021-11-21 23:00:55 +01:00
function StolenDataRow({
entry,
cluster,
}: {
entry: MergedStolenDataEntry;
cluster: RequestCluster;
}) {
const [version] = useEmitter(entry);
return (
<tr
key={origin + cluster.id + entry.getUniqueKey()}
data-key={origin + cluster.id + entry.getUniqueKey()}
data-version={version}
>
<th
style={{
width: "100px",
overflowWrap: "anywhere",
border: entry.hasMark("") ? "2px solid red" : "2px solid transparent",
}}
onClick={() => entry.toggleMark("")}
>
{entry.getNames().map(hyphenate).join(", ")}
</th>
<td>{entry.getSources().map((source) => icons[source])}</td>
<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}{" "}
2021-11-07 09:17:19 +01:00
<a
href="#"
style={{ fontSize: "10px" }}
2021-11-07 13:57:24 +01:00
onClick={() => getMemory().removeCookiesFor(origin, shorthost)}
2021-11-07 09:17:19 +01:00
>
Wyczyść cookiesy
</a>
</h2>
<div>
{cluster.getFullHosts().map((host) => (
<a href={`https://${host}`}>{host}, </a>
))}
</div>
2021-11-07 09:17:19 +01:00
<table>
<tbody>
{cluster
2021-11-07 19:28:07 +01:00
.getStolenData({ minValueLength, cookiesOnly, cookiesOrOriginOnly })
2021-11-07 09:17:19 +01:00
.map((entry) => (
2021-11-21 23:00:55 +01:00
<StolenDataRow
{...{
entry,
cluster,
key: origin + cluster.id + entry.getUniqueKey(),
}}
/>
2021-11-07 09:17:19 +01:00
))}
</tbody>
</table>
</div>
);
}