rentgen/sidebar/stolen-data-cluster.tsx

250 lines
8.1 KiB
TypeScript
Raw Normal View History

2022-01-20 19:03:03 +01:00
import React, { Fragment } from 'react';
2022-01-19 14:12:52 +01:00
import { getMemory } from '../memory';
import { StolenDataEntry } from '../stolen-data-entry';
2022-01-19 14:12:52 +01:00
import { maskString, useEmitter } from '../util';
2022-01-20 19:03:03 +01:00
import CookieIcon from '../assets/icons/cookie.svg';
import WarningIcon from '../assets/icons/warning.svg';
import './stolen-data-cluster.scss';
const MAX_STRING_VALUE_LENGTH = 100;
function StolenDataValue({
2022-01-19 14:12:52 +01:00
entry,
2022-01-20 19:49:27 +01:00
refresh,
}: {
2022-01-19 14:12:52 +01:00
entry: StolenDataEntry;
2022-01-20 19:49:27 +01:00
refresh: Function;
2022-01-19 14:12:52 +01:00
prefixKey?: string;
}) {
2022-01-19 14:12:52 +01:00
const [version] = useEmitter(entry);
let body = null;
if (!entry.value) {
body = <></>;
} else {
body = (
<div data-version={version}>
{maskString(entry.value, 1, MAX_STRING_VALUE_LENGTH)}
</div>
);
}
return (
2022-01-20 19:03:03 +01:00
<td
className="value"
2022-01-19 14:12:52 +01:00
onClick={(e) => {
entry.toggleMark();
2022-01-20 19:49:27 +01:00
refresh();
2022-01-19 14:12:52 +01:00
e.stopPropagation();
}}
2022-01-20 19:49:27 +01:00
title={maskString(entry.value, 1, MAX_STRING_VALUE_LENGTH)}
2022-01-20 19:03:03 +01:00
// style={{ color: entry.isMarked ? 'black' : 'gray' }}
2022-01-19 14:12:52 +01:00
>
{body}
2022-01-20 19:03:03 +01:00
</td>
2021-11-07 13:01:01 +01:00
);
}
2021-11-07 09:17:19 +01:00
2022-01-19 14:12:52 +01:00
function StolenDataRow({
entry,
refresh,
}: {
entry: StolenDataEntry;
refresh: Function;
}) {
const [version] = useEmitter(entry);
return (
2022-01-20 19:03:03 +01:00
<tr
data-key={entry.id}
data-version={version}
className={`${entry.isMarked ? 'toggled' : 'untoggled'}`}
>
<td className="checkbox">
2022-01-19 14:12:52 +01:00
<input
type="checkbox"
checked={entry.isMarked}
onChange={() => {
entry.toggleMark();
refresh();
}}
/>
</td>
<th
2022-01-20 19:49:27 +01:00
title={`Nazwa: ${entry.name}\nŹródło: ${entry.source}`}
2022-01-19 14:12:52 +01:00
onClick={() => {
entry.toggleMark();
refresh();
}}
>
{entry.name}
</th>
2022-01-20 19:03:03 +01:00
<td className="icons">
2022-01-19 14:12:52 +01:00
{entry.source === 'cookie' ? (
2022-01-20 19:03:03 +01:00
<span title="Dane przechowywane w Cookies">
<CookieIcon
height={16}
width={16}
className="cookie-data"
/>
</span>
2022-01-19 14:12:52 +01:00
) : entry.request.hasCookie() ? (
<span
2022-01-20 19:03:03 +01:00
title="Wysłane w zapytaniu opatrzonym Cookies"
style={{ opacity: 0.25 }}
2022-01-19 14:12:52 +01:00
>
2022-01-20 19:03:03 +01:00
<CookieIcon
height={16}
width={16}
className="request-with-cookie"
/>
2022-01-19 14:12:52 +01:00
</span>
) : null}
{entry.exposesOrigin() ? (
2022-01-20 19:03:03 +01:00
<span title="Pokazuje część historii przeglądania">
<WarningIcon
height={16}
width={16}
className="show-history-part"
/>
</span>
2022-01-19 14:12:52 +01:00
) : entry.request.exposesOrigin() ? (
<span
title="Jest częścią zapytania, które ujawnia historię przeglądania"
2022-01-20 19:03:03 +01:00
style={{ opacity: 0.25 }}
2022-01-19 14:12:52 +01:00
>
2022-01-20 19:03:03 +01:00
<WarningIcon
height={16}
width={16}
className="request-with-history-part"
/>
2022-01-19 14:12:52 +01:00
</span>
) : null}
</td>
2022-01-20 19:03:03 +01:00
{/* <td style={{ wordWrap: 'anywhere' as any }}> */}
2022-01-20 19:49:27 +01:00
<StolenDataValue refresh={refresh} entry={entry} />
2022-01-19 14:12:52 +01:00
</tr>
);
2021-11-21 23:00:55 +01:00
}
export default function StolenDataCluster({
2022-01-19 14:12:52 +01:00
origin,
shorthost,
minValueLength,
refresh,
cookiesOnly,
cookiesOrOriginOnly,
2021-11-07 09:17:19 +01:00
}: {
2022-01-19 14:12:52 +01:00
origin: string;
shorthost: string;
refreshToken: number;
minValueLength: number;
refresh: Function;
cookiesOnly: boolean;
cookiesOrOriginOnly: boolean;
2021-11-07 09:17:19 +01:00
}) {
2022-01-19 14:12:52 +01:00
const cluster = getMemory().getClustersForOrigin(origin)[shorthost];
2022-01-20 19:03:03 +01:00
const fullHosts = cluster.getFullHosts();
2022-01-19 14:12:52 +01:00
return (
2022-01-20 19:03:03 +01:00
<div className="stolen-data-cluster-container">
<header className="domains-container">
<a className="domain" href={'https://' + cluster.id}>
{cluster.id}
2022-01-19 14:12:52 +01:00
</a>
2022-01-20 19:03:03 +01:00
<div className="subdomains-container">
{fullHosts.map((host, index) => (
<a
className="subdomain"
key={host}
href={`https://${host}`}
>
{host}{' '}
{`${fullHosts.length - 1 !== index ? '· ' : ''}`}
</a>
))}
</div>
</header>
<section>
<table>
<thead>
<tr>
<th className="table-header" colSpan={4}>
Znalezione ustawienia:
</th>
</tr>
</thead>
<tbody>
{cluster
.calculateRepresentativeStolenData({
minValueLength,
cookiesOnly,
cookiesOrOriginOnly,
})
.map((entry) => (
<StolenDataRow
refresh={refresh}
{...{
entry,
key: entry.id,
}}
/>
))}
</tbody>
</table>
</section>
2022-01-19 14:12:52 +01:00
</div>
2022-01-20 19:03:03 +01:00
// <div>
// <h2>
// <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> */}
// <a
// href="#"
// style={{ fontSize: '10px' }}
// onClick={(e) => {
// cluster.autoMark();
// refresh();
// e.preventDefault();
// }}
// >
// Zaznacz auto
// </a>
// </h2>
// <div>
// {cluster.getFullHosts().map((host) => (
// <a key={host} href={`https://${host}`}>
// {host},{' '}
// </a>
// ))}
// </div>
// <table>
// <tbody>
// {cluster
// .calculateRepresentativeStolenData({
// minValueLength,
// cookiesOnly,
// cookiesOrOriginOnly,
// })
// .map((entry) => (
// <StolenDataRow
// refresh={refresh}
// {...{
// entry,
// key: entry.id,
// }}
// />
// ))}
// </tbody>
// </table>
// </div>
2022-01-19 14:12:52 +01:00
);
2021-11-07 09:17:19 +01:00
}