import React, { Fragment } from 'react'; import { RequestCluster } from '../../request-cluster'; import './screenshot-generator.scss'; const SS_URL = 'http://65.108.60.135:3000'; enum taskState { WAITING = 'waiting', RUNNING = 'running', FINISHED = 'finished', } type Screenshot = { url: string; domain: string; filename: string; found_headers: string[]; }; interface screenshotTask { domains: string[]; elapsed_time_s: number; finished_time: number; id: string; images: Screenshot[]; jobs_ahead: number; output: string; processing_took: number; request_time: number; started_time: number; status: taskState; url: string; waiting_took: number; zip_url: string; } function createTaskEndpoint(visited_url: string, domains: string[]) { return `${SS_URL}/api/requests?url=${visited_url}${domains.reduce( (prev: string, curr: string) => prev + '&domains[]=' + curr, '' )}`; } function createTask(visited_url: string, domains: string[]) { return fetch(createTaskEndpoint(visited_url, domains), { method: 'POST' }); } function pollTask(path: string): Promise { return fetch(path, { method: 'GET' }); } export default function ScreenshotGenerator({ visited_url, clusters, setReportWindowMode, setRequestPath, downloadFiles, user_role, }: { visited_url: string; clusters: Record; setReportWindowMode: Function; setRequestPath: Function; downloadFiles: Function; user_role: string; }) { const [mode, setMode] = React.useState('idle'); const [images, setImages] = React.useState([]); const [taskId, setTaskId] = React.useState(null); const [output, setOutput] = React.useState({}); async function subscribeTask(path: string): Promise { 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(); setImages((response as screenshotTask)?.images); document.querySelector('.images')?.scrollTo({ top: document.querySelector('.images')?.scrollHeight, behavior: 'smooth', }); } if (response.status === taskState.FINISHED) { setMode('finished'); } return response as screenshotTask; } return (
{mode === 'idle' ? (

Przygotowanie zrzutów ekranów

Notka informacyjna

{user_role === 'user' ? (

Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty ekranów narzędzi deweloperskich do maila dla administratora oraz Urzędu Ochrony Danych Osobowych.

Jeżeli nie wiesz jak przygotować zrzuty ekranów to wtyczka Rentgen może wygenerować je za Ciebie.

) : (

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.

)}
) : null} {mode === 'in_progress' || mode === 'finished' ? (

Przygotowanie zrzutów ekranów

{mode === 'in_progress' ? (

To może chwilkę zająć...

Nasz serwer właśnie odwiedza wskazaną przez Ciebie stronę i przygotowuje zrzuty ekranów narzędzi deweloperskich.

) : null} {mode === 'finished' ? (

Gotowe!

Zrzuty ekranów narzędzi deweloperskich są gotowe do pobrania.

) : null}
{images.map((screenshot) => { return (
🕸 {screenshot.domain}
· · ·
); })} {mode === 'in_progress' ? (
· · ·
) : null}
{mode === 'finished' ? ( ) : null}
) : null}
); }