rentgen/components/report-window/screenshot-generator.tsx

220 lines
8.8 KiB
TypeScript
Raw Normal View History

2022-05-21 14:42:15 +02:00
import React, { Fragment } from 'react';
import { RequestCluster } from '../../request-cluster';
import './screenshot-generator.scss';
2022-06-17 11:47:51 +02:00
const SS_URL = 'http://65.108.60.135:3000';
2022-05-22 16:49:24 +02:00
enum taskState {
WAITING = 'waiting',
RUNNING = 'running',
FINISHED = 'finished',
}
2022-06-17 11:47:51 +02:00
type Screenshot = {
url: string;
domain: string;
2022-07-08 22:41:58 +02:00
filename: string;
2022-06-17 11:47:51 +02:00
found_headers: string[];
};
2022-05-22 16:49:24 +02:00
interface screenshotTask {
domains: string[];
2022-07-08 22:41:58 +02:00
elapsed_time_s: number;
finished_time: number;
2022-05-22 16:49:24 +02:00
id: string;
2022-06-17 11:47:51 +02:00
images: Screenshot[];
2022-07-08 22:41:58 +02:00
jobs_ahead: number;
output: string;
processing_took: number;
request_time: number;
started_time: number;
status: taskState;
url: string;
waiting_took: number;
zip_url: string;
2022-05-22 16:49:24 +02:00
}
2022-05-21 14:42:15 +02:00
function createTaskEndpoint(visited_url: string, domains: string[]) {
2022-06-17 11:47:51 +02:00
return `${SS_URL}/api/requests?url=${visited_url}${domains.reduce(
2022-05-21 14:42:15 +02:00
(prev: string, curr: string) => prev + '&domains[]=' + curr,
''
)}`;
}
function createTask(visited_url: string, domains: string[]) {
return fetch(createTaskEndpoint(visited_url, domains), { method: 'POST' });
}
2022-05-22 16:49:24 +02:00
function pollTask(path: string): Promise<Response> {
return fetch(path, { method: 'GET' });
2022-05-21 14:42:15 +02:00
}
export default function ScreenshotGenerator({
visited_url,
clusters,
2022-05-22 16:49:24 +02:00
setReportWindowMode,
2022-07-08 22:41:58 +02:00
setRequestPath,
downloadFiles,
user_role,
2022-05-21 14:42:15 +02:00
}: {
visited_url: string;
clusters: Record<string, RequestCluster>;
2022-05-22 16:49:24 +02:00
setReportWindowMode: Function;
2022-07-08 22:41:58 +02:00
setRequestPath: Function;
downloadFiles: Function;
user_role: string;
2022-05-21 14:42:15 +02:00
}) {
2022-05-22 16:49:24 +02:00
const [mode, setMode] = React.useState<string>('idle');
2022-06-17 11:47:51 +02:00
const [images, setImages] = React.useState<Screenshot[]>([]);
2022-05-22 16:49:24 +02:00
const [taskId, setTaskId] = React.useState<string>(null);
2022-07-08 22:41:58 +02:00
const [output, setOutput] = React.useState<any>({});
2022-05-22 16:49:24 +02:00
async function subscribeTask(path: string): Promise<screenshotTask> {
let response = { status: taskState.WAITING };
while (response.status === taskState.WAITING || response.status === taskState.RUNNING) {
await new Promise((resolve) => setTimeout(resolve, 1000));
response = await (await pollTask(path)).json();
2022-06-17 11:47:51 +02:00
setImages((response as screenshotTask)?.images);
document.querySelector('.images').scrollTo({
top: document.querySelector('.images').scrollHeight,
behavior: 'smooth',
});
2022-05-22 16:49:24 +02:00
}
if (response.status === taskState.FINISHED) {
setMode('finished');
}
return response as screenshotTask;
}
2022-05-21 14:42:15 +02:00
return (
<div className="generator-container">
2022-05-22 16:49:24 +02:00
{mode === 'idle' ? (
2022-05-21 14:42:15 +02:00
<Fragment>
<h1>Przygotowanie zrzutów ekranów</h1>
2022-05-22 18:16:14 +02:00
<div className="container">
<h2>Notka informacyjna</h2>
{user_role === 'user' ? (
<Fragment>
<p>
Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty
ekranów narzędzi deweloperskich do maila dla administratora oraz
Urzędu Ochrony Danych Osobowych.
</p>
<p>
Jeżeli nie wiesz jak przygotować zrzuty ekranów to wtyczka
Rentgen może wygenerować je za Ciebie.
</p>
</Fragment>
) : (
<p>
Wtyczka Rentgen może skorzystać z zewnętrznego serwisu, aby wykonać
zrzuty ekranu będące dowodem na to, że strona przetwarza dane
osobowe w sposób, jaki wykazała analiza ruchu sieciowego.
</p>
)}
2022-05-22 18:16:14 +02:00
</div>
2022-05-21 14:42:15 +02:00
2022-05-22 18:16:14 +02:00
<div className="buttons-container">
<button
className="sv_prev_btn"
onClick={() => {
setReportWindowMode('preview');
2022-07-08 22:41:58 +02:00
setRequestPath(null);
2022-05-22 18:16:14 +02:00
}}
>
Pomiń
</button>
<button
className="sv_next_btn"
onClick={async () => {
setMode('in_progress');
const task = await createTask(visited_url, Object.keys(clusters));
const urlArr = task.url.split('/');
setTaskId(urlArr[urlArr.length - 1]);
const response = await subscribeTask(task.url);
2022-06-17 11:47:51 +02:00
setImages(response.images);
2022-07-08 22:41:58 +02:00
setOutput(response);
setRequestPath(response.zip_url);
2022-05-22 18:16:14 +02:00
}}
>
Wygeneruj
</button>
</div>
2022-05-21 14:42:15 +02:00
</Fragment>
2022-05-22 16:49:24 +02:00
) : null}
{mode === 'in_progress' || mode === 'finished' ? (
2022-05-21 14:42:15 +02:00
<Fragment>
2022-07-03 19:35:36 +02:00
<h1>Przygotowanie zrzutów ekranów</h1>
2022-05-22 18:16:14 +02:00
<div className="container">
2022-07-03 19:35:36 +02:00
{mode === 'in_progress' ? (
<Fragment>
<h2>To może chwilkę zająć...</h2>
<p>
Nasz serwer właśnie odwiedza wskazaną przez Ciebie stronę
i przygotowuje zrzuty ekranów narzędzi deweloperskich.
</p>
</Fragment>
) : null}
{mode === 'finished' ? (
<Fragment>
<h2>Gotowe!</h2>
<p>Zrzuty ekranów narzędzi deweloperskich gotowe do pobrania.</p>
</Fragment>
) : null}
2022-05-21 14:42:15 +02:00
2022-05-22 18:16:14 +02:00
<div className="images">
2022-06-17 11:47:51 +02:00
{images.map((screenshot) => {
2022-05-22 18:16:14 +02:00
return (
<div
2022-06-17 11:47:51 +02:00
key={`${taskId}_${screenshot.url}`}
2022-05-22 18:16:14 +02:00
className="browser browser--filled"
style={{
2022-06-17 11:47:51 +02:00
backgroundImage: `url(${SS_URL}${screenshot.url})`,
2022-05-22 18:16:14 +02:00
}}
>
<div className="browser__header">
<div className="browser__header--address-bar">
🕸 {screenshot.domain}
2022-05-22 18:16:14 +02:00
</div>
<div className="browser__header--controls">···</div>
2022-05-22 16:49:24 +02:00
</div>
2022-05-22 18:16:14 +02:00
<div className="browser__content"></div>
</div>
);
})}
{mode === 'in_progress' ? (
<div className="browser">
<div className="browser__header">
<div className="browser__header--address-bar"></div>
2022-05-22 16:49:24 +02:00
<div className="browser__header--controls">···</div>
</div>
<div className="browser__content"></div>
</div>
2022-05-22 18:16:14 +02:00
) : null}
</div>
</div>
<div className="buttons-container">
{mode === 'finished' ? (
2022-07-03 19:35:36 +02:00
<Fragment>
2022-07-08 22:41:58 +02:00
<button
className="sv_next_btn"
onClick={() => {
downloadFiles(`${SS_URL}${output.zip_url}`);
setReportWindowMode('preview');
}}
>
2022-07-03 19:35:36 +02:00
Pobierz zrzuty ekranów i przejdź dalej
</button>
</Fragment>
2022-05-22 16:49:24 +02:00
) : null}
</div>
2022-05-21 14:42:15 +02:00
</Fragment>
2022-05-22 16:49:24 +02:00
) : null}
2022-05-21 14:42:15 +02:00
</div>
);
}