rentgen/report-window/har-converter.tsx

125 lines
3.8 KiB
TypeScript
Raw Normal View History

import React from 'react';
2022-01-24 12:21:28 +01:00
import { HAREntry } from '../extended-request';
import { StolenDataEntry } from '../stolen-data-entry';
import { getshorthost, unique } from '../util';
2021-11-08 20:14:28 +01:00
function handleNewFile(
2022-01-24 12:21:28 +01:00
element: HTMLInputElement,
entries: StolenDataEntry[],
2022-01-29 20:41:03 +01:00
setFiltered: (arg0: Blob) => void
): void {
2022-01-24 12:21:28 +01:00
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]);
2021-11-08 20:14:28 +01:00
}
2021-11-22 17:54:15 +01:00
function generateFakeHAR(entries: StolenDataEntry[]) {
2022-01-24 12:21:28 +01:00
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()
);
2022-01-24 12:21:28 +01:00
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()),
},
2022-01-24 12:21:28 +01:00
};
}
2021-11-22 17:54:15 +01:00
export default function HARConverter({
2022-01-24 12:21:28 +01:00
entries,
2021-11-22 17:54:15 +01:00
}: {
2022-01-24 12:21:28 +01:00
entries: StolenDataEntry[];
2021-11-22 17:54:15 +01:00
}) {
const [filtered, setFiltered] = React.useState<Blob | null>(null);
const [filename, setFilename] = React.useState('');
2022-01-24 12:21:28 +01:00
const [fakeHAR, setFakeHAR] =
React.useState<ReturnType<typeof generateFakeHAR>>();
React.useEffect(() => {
2022-01-24 12:21:28 +01:00
setFakeHAR(generateFakeHAR(entries));
}, []);
2022-01-24 12:21:28 +01:00
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>
);
2021-11-08 20:14:28 +01:00
}