rentgen/report-window/har-converter.tsx

import React, { useEffect, useState } from 'react';
import { HAREntry } from '../extended-request';
import { StolenDataEntry } from '../stolen-data-entry';
import { getshorthost, unique } from '../util';

function handleNewFile(
    element: HTMLInputElement,
    entries: StolenDataEntry[],
    setFiltered: (Blob) => void
): void {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
        const content = JSON.parse(reader.result as string);
        content.log.entries = content.log.entries.filter(
            (har_entry: HAREntry) =>
                entries.some((entry) => entry.matchesHAREntry(har_entry))
        );
        setFiltered(
            new Blob([JSON.stringify(content)], { type: 'application/json' })
        );
    });
    reader.readAsText(element.files[0]);
}

function generateFakeHAR(entries: StolenDataEntry[]) {
    const requests = unique(entries.map((entry) => entry.request))
        .sort((request1, request2) => {
            if (request1.shorthost < request2.shorthost) {
                return -1;
            } else if (request1.shorthost > request2.shorthost) {
                return 1;
            } else {
                return (
                    request2.getBalancedPriority() -
                    request1.getBalancedPriority()
                );
            }
        })
        .filter((_, index, array) => {
            if (index == 0) return true;
            if (array[index].shorthost == array[index - 1].shorthost) {
                return false;
            }
            return true;
        })
        .sort(
            (entry1, entry2) =>
                entry2.getBalancedPriority() - entry1.getBalancedPriority()
        );

    return {
        log: {
            version: '1.2',
            creator: {
                name: 'Firefox',
                version: '94.0',
            },
            browser: {
                name: 'Firefox',
                version: '94.0',
            },
            pages: [
                {
                    startedDateTime: '2021-11-08T20:27:23.195+01:00',
                    id: 'page_1',
                    title: 'HAR DUmp',
                    pageTimings: {
                        onContentLoad: 467,
                        onLoad: 4226,
                    },
                },
            ],
            entries: requests.map((r) => r.toHAR()),
        },
    };
}

export default function HARConverter({
    entries,
}: {
    entries: StolenDataEntry[];
}) {
    const [filtered, setFiltered] = useState<Blob | null>(null);
    const [filename, setFilename] = useState('');
    const [fakeHAR, setFakeHAR] =
        useState<ReturnType<typeof generateFakeHAR>>();
    useEffect(() => {
        setFakeHAR(generateFakeHAR(entries));
    }, []);

    return (
        <div>
            <input
                type="file"
                accept=".har"
                onChange={(e) => {
                    setFilename(e.target.files[0].name);
                    handleNewFile(e.target, entries, setFiltered);
                }}
            />
            {(filtered && (
                <a
                    href={URL.createObjectURL(filtered)}
                    download={filename.replace('.har', '-filtered.har')}
                >
                    Pobierz wyfiltrowany HAR
                </a>
            )) ||
                null}
            <a
                href={URL.createObjectURL(
                    new Blob([JSON.stringify(fakeHAR)], {
                        type: 'application/json',
                    })
                )}
                download={`${getshorthost(
                    entries[0].request.originalURL
                )}-${new Date().toJSON()}-trimmed.har`}
            >
                Pobierz "zredukowany" HAR
            </a>
        </div>
    );
}