rentgen/components/report-window/har-converter.tsx
Arkadiusz Wieczorek b92a472569 Update designs
2022-04-24 22:11:33 +02:00

111 lines
3.6 KiB
TypeScript

import React 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: (arg0: 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] = React.useState<Blob | null>(null);
const [filename, setFilename] = React.useState('');
const [fakeHAR, setFakeHAR] = React.useState<ReturnType<typeof generateFakeHAR>>();
React.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>
);
}