Cleanup, add second button

This commit is contained in:
Arkadiusz Wieczorek 2022-01-27 22:30:57 +01:00
parent 55b3bb0941
commit 734f418667
8 changed files with 343 additions and 441 deletions

3
assets/icons/data.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22C7.664 22 4 19.965 4 17.556V6.444C4 4.035 7.664 2 12 2C16.336 2 20 4.035 20 6.444V17.556C20 19.965 16.337 22 12 22ZM6 14.9V17.559C6.07 18.112 8.309 19.781 12 19.781C15.691 19.781 17.931 18.107 18 17.553V14.9C16.1794 15.9554 14.1039 16.4905 12 16.447C9.89606 16.4906 7.82058 15.9554 6 14.9ZM6 9.341V12C6.07 12.553 8.309 14.222 12 14.222C15.691 14.222 17.931 12.548 18 11.994V9.341C16.1795 10.3968 14.104 10.9323 12 10.889C9.89596 10.9323 7.82046 10.3968 6 9.341ZM12 4.222C8.308 4.222 6.069 5.896 6 6.451C6.07 7 8.311 8.666 12 8.666C15.689 8.666 17.931 6.992 18 6.438C17.93 5.887 15.689 4.222 12 4.222Z" fill="#2E3A59"/>
</svg>

After

Width:  |  Height:  |  Size: 736 B

View File

@ -25,5 +25,3 @@ esbuild
}, },
}) })
.catch(() => process.exit(1)); .catch(() => process.exit(1));
// npx esbuild sidebar/sidebar.tsx test.ts --bundle report-window/report-window.tsx --bundle background.ts --bundle --outdir=./lib

View File

@ -1,14 +1,13 @@
import ExtendedRequest from "./extended-request"; import ExtendedRequest from './extended-request';
import { getshorthost, makeThrottle } from "./util"; import { getshorthost, makeThrottle } from './util';
import { EventEmitter } from "events"; import { EventEmitter } from 'events';
import { RequestCluster } from "./request-cluster"; import { RequestCluster } from './request-cluster';
export default class Memory extends EventEmitter { export default class Memory extends EventEmitter {
origin_to_history = {} as Record<string, Record<string, RequestCluster>>; origin_to_history = {} as Record<string, Record<string, RequestCluster>>;
private throttle = makeThrottle(200); private throttle = makeThrottle(200);
async register(request: ExtendedRequest) { async register(request: ExtendedRequest) {
await request.init(); await request.init();
// console.log("registering request for", request.origin);
if (!request.isThirdParty()) { if (!request.isThirdParty()) {
return; return;
} }
@ -21,7 +20,7 @@ export default class Memory extends EventEmitter {
this.origin_to_history[request.origin][shorthost] = cluster; this.origin_to_history[request.origin][shorthost] = cluster;
} }
this.origin_to_history[request.origin][shorthost].add(request); this.origin_to_history[request.origin][shorthost].add(request);
this.emit("change"); this.emit('change');
} }
constructor() { constructor() {
@ -31,8 +30,8 @@ export default class Memory extends EventEmitter {
async (request) => { async (request) => {
new ExtendedRequest(request); new ExtendedRequest(request);
}, },
{ urls: ["<all_urls>"] }, { urls: ['<all_urls>'] },
["requestBody"] ['requestBody']
); );
browser.webRequest.onBeforeSendHeaders.addListener( browser.webRequest.onBeforeSendHeaders.addListener(
async (request) => { async (request) => {
@ -41,8 +40,8 @@ export default class Memory extends EventEmitter {
].addHeaders(request.requestHeaders || []); ].addHeaders(request.requestHeaders || []);
this.register(extendedRequest); this.register(extendedRequest);
}, },
{ urls: ["<all_urls>"] }, { urls: ['<all_urls>'] },
["requestHeaders"] ['requestHeaders']
); );
} }
@ -57,6 +56,7 @@ export default class Memory extends EventEmitter {
return true; return true;
} catch (e) { } catch (e) {
// debugger; // debugger;
console.error(e);
} }
} }
@ -68,7 +68,12 @@ export default class Memory extends EventEmitter {
if (shorthost) { if (shorthost) {
const cookies = await browser.cookies.getAll({ domain: shorthost }); const cookies = await browser.cookies.getAll({ domain: shorthost });
for (const cookie of cookies) { for (const cookie of cookies) {
console.log("removing cookie", cookie.name, "from", cookie.domain); console.log(
'removing cookie',
cookie.name,
'from',
cookie.domain
);
await browser.cookies.remove({ await browser.cookies.remove({
name: cookie.name, name: cookie.name,
url: `https://${cookie.domain}`, url: `https://${cookie.domain}`,
@ -97,5 +102,6 @@ export function init() {
} }
export function getMemory(): Memory { export function getMemory(): Memory {
return (browser.extension.getBackgroundPage().window as any).memory as Memory; return (browser.extension.getBackgroundPage().window as any)
.memory as Memory;
} }

View File

@ -114,7 +114,6 @@ function Report() {
console.time('rendering template'); console.time('rendering template');
const result = ( const result = (
<div {...{ 'data-version': counter }}> <div {...{ 'data-version': counter }}>
{/*<DataPreview {...{entries, refresh}} */}
<h1>Generuj treść maila dla {origin}</h1> <h1>Generuj treść maila dla {origin}</h1>
<EmailTemplate {...{ entries, clusters, version: counter }} /> <EmailTemplate {...{ entries, clusters, version: counter }} />
<HARConverter {...{ entries }} /> <HARConverter {...{ entries }} />

View File

@ -10,6 +10,8 @@ import TrashIcon from '../assets/icons/trash_full.svg';
import MailIcon from '../assets/icons/mail.svg'; import MailIcon from '../assets/icons/mail.svg';
import ShortLeftIcon from '../assets/icons/short_left.svg'; import ShortLeftIcon from '../assets/icons/short_left.svg';
import CloseBigIcon from '../assets/icons/close_big.svg'; import CloseBigIcon from '../assets/icons/close_big.svg';
import CookiesIcon from '../assets/icons/cookie.svg';
import DataIcon from '../assets/icons/data.svg';
async function getCurrentTab() { async function getCurrentTab() {
const [tab] = await browser.tabs.query({ const [tab] = await browser.tabs.query({
@ -75,15 +77,6 @@ const Sidebar = () => {
return ( return (
<div className="sidebar"> <div className="sidebar">
{/* <div id="selector">
<TabDropdown setPickedTab={setPickedTab} pickedTab={pickedTab} />
<button
id="get_current_tab_button"
onClick={async () => setPickedTab(await getCurrentTab())}
>
Wybierz aktywną kartę{" "}
</button>
</div> */}
<header <header
className={ className={
logoVisibility ? 'header' : 'header header--without-logo' logoVisibility ? 'header' : 'header header--without-logo'
@ -126,23 +119,9 @@ const Sidebar = () => {
{stolenDataView ? ( {stolenDataView ? (
<nav> <nav>
<button onClick={() => setStolenDataView(!stolenDataView)}> <button onClick={() => setStolenDataView(!stolenDataView)}>
{/* {stolenDataView ? 'Options' : 'Data'}
*/}
<SettingsIcon width={20} height={20} /> <SettingsIcon width={20} height={20} />
<span>Ustawienia wtyczki</span> <span>Ustawienia</span>
</button> </button>
{/* <button
onClick={() => {
getMemory().removeCookiesFor(
origin,
getshorthost(new URL(origin).host)
);
setMarksOccurrence(false);
}}
>
<TrashIcon />
<span>Wyczyść ciasteczka first-party</span>
</button> */}
<button <button
onClick={() => { onClick={() => {
getMemory().removeRequestsFor(origin); getMemory().removeRequestsFor(origin);
@ -150,9 +129,21 @@ const Sidebar = () => {
setMarksOccurrence(false); setMarksOccurrence(false);
}} }}
> >
{/* {stolenDataView ? 'Options' : 'Data'}
*/}
<TrashIcon width={20} height={20} /> <TrashIcon width={20} height={20} />
<span>Wyczyść historię wtyczki</span>
</button>
<button
onClick={() => {
getMemory().removeCookiesFor(origin);
// getMemory().removeCookiesFor(
// origin,
// getshorthost(new URL(origin).host)
// );
setCounter((c) => c + 1);
setMarksOccurrence(false);
}}
>
<CookiesIcon width={20} height={20} />
<span>Wyczyść ciasteczka</span> <span>Wyczyść ciasteczka</span>
</button> </button>
<button <button
@ -177,7 +168,7 @@ const Sidebar = () => {
> >
<MailIcon width={20} height={20} /> <MailIcon width={20} height={20} />
<span> <span>
Utwórz wiadomość dla administratora tej witryny Utwórz wiadomość dla administratora witryny
</span> </span>
</button> </button>
</nav> </nav>
@ -232,8 +223,6 @@ const Sidebar = () => {
/> />
)} )}
</section> </section>
{/* <footer>Footer marks → {JSON.stringify(marksOccurrence)}</footer> */}
</div> </div>
); );
}; };

View File

@ -1,4 +1,4 @@
import React, { Fragment } from 'react'; import React from 'react';
import { getMemory } from '../memory'; import { getMemory } from '../memory';
import { StolenDataEntry } from '../stolen-data-entry'; import { StolenDataEntry } from '../stolen-data-entry';
@ -38,7 +38,6 @@ function StolenDataValue({
e.stopPropagation(); e.stopPropagation();
}} }}
title={maskString(entry.value, 1, MAX_STRING_VALUE_LENGTH)} title={maskString(entry.value, 1, MAX_STRING_VALUE_LENGTH)}
// style={{ color: entry.isMarked ? 'black' : 'gray' }}
> >
{body} {body}
</td> </td>
@ -120,8 +119,6 @@ function StolenDataRow({
</span> </span>
) : null} ) : null}
</td> </td>
{/* <td style={{ wordWrap: 'anywhere' as any }}> */}
<StolenDataValue refresh={refresh} entry={entry} /> <StolenDataValue refresh={refresh} entry={entry} />
</tr> </tr>
); );
@ -194,56 +191,5 @@ export default function StolenDataCluster({
</table> </table>
</section> </section>
</div> </div>
// <div>
// <h2>
// <a href={'https://' + cluster.id}>{cluster.id}</a>{' '}
// {cluster.hasCookies() ? '🍪' : ''} x{cluster.requests.length}{' '}
// {/* <a
// * href="#"
// * style={{ fontSize: "10px" }}
// * onClick={() => getMemory().removeCookiesFor(origin, shorthost)}
// * >
// * Wyczyść cookiesy
// * </a> */}
// <a
// href="#"
// style={{ fontSize: '10px' }}
// onClick={(e) => {
// cluster.autoMark();
// refresh();
// e.preventDefault();
// }}
// >
// Zaznacz auto
// </a>
// </h2>
// <div>
// {cluster.getFullHosts().map((host) => (
// <a key={host} href={`https://${host}`}>
// {host},{' '}
// </a>
// ))}
// </div>
// <table>
// <tbody>
// {cluster
// .calculateRepresentativeStolenData({
// minValueLength,
// cookiesOnly,
// cookiesOrOriginOnly,
// })
// .map((entry) => (
// <StolenDataRow
// refresh={refresh}
// {...{
// entry,
// key: entry.id,
// }}
// />
// ))}
// </tbody>
// </table>
// </div>
); );
} }

View File

@ -40,49 +40,6 @@ export function StolenData({
); );
return ( return (
<div className="stolen-data-container"> <div className="stolen-data-container">
{/* <button
style={{ marginLeft: '1rem' }}
onClick={() =>
getMemory().removeCookiesFor(
origin,
getshorthost(new URL(origin).host)
)
}
>
Wyczyść cookiesy 1st party
</button>
<button
style={{ marginLeft: '1rem' }}
onClick={() => {
getMemory().removeRequestsFor(origin);
refresh();
}}
>
Wyczyść pamięć
</button> */}
{/* <button
style={{ marginLeft: '1rem' }}
onClick={() =>
window.open(
`/report-window/report-window.html?origin=${origin}`,
'new_window',
'width=800,height=600'
)
}
>
Generuj maila
</button> */}
{/* <button
onClick={() => {
clusters.forEach((cluster) => cluster.autoMark());
refresh();
}}
>
Zaznacz automatycznie
</button> */}
<span>Domeny oraz przesłane informacje</span> <span>Domeny oraz przesłane informacje</span>
{clusters.map((cluster) => { {clusters.map((cluster) => {

View File

@ -1,6 +1,5 @@
// import { TCModel } from "@iabtcf/core"; import { EventEmitter } from 'events';
import { EventEmitter } from "events"; import ExtendedRequest, { HAREntry } from './extended-request';
import ExtendedRequest, { HAREntry } from "./extended-request";
import { import {
getshorthost, getshorthost,
@ -11,19 +10,19 @@ import {
maskString, maskString,
parseToObject, parseToObject,
safeDecodeURIComponent, safeDecodeURIComponent,
} from "./util"; } from './util';
export type Sources = export type Sources =
| "cookie" | 'cookie'
| "pathname" | 'pathname'
| "queryparams" | 'queryparams'
| "header" | 'header'
| "request_body"; | 'request_body';
export const Classifications = <const>{ export const Classifications = <const>{
id: "Identyfikator internetowy", id: 'Identyfikator internetowy',
history: "Część historii przeglądania", history: 'Część historii przeglądania',
location: "Informacje na temat mojego położenia", location: 'Informacje na temat mojego położenia',
}; };
const ID_PREVIEW_MAX_LENGTH = 20; const ID_PREVIEW_MAX_LENGTH = 20;
@ -37,16 +36,15 @@ const id = (function* id() {
} }
})(); })();
export type DecodingSchema = "base64" | "raw"; export type DecodingSchema = 'base64' | 'raw';
export class StolenDataEntry extends EventEmitter { export class StolenDataEntry extends EventEmitter {
public isIAB = false; public isIAB = false;
// public iab: TCModel | null = null;
public id: number; public id: number;
private marked = false; private marked = false;
public classification: keyof typeof Classifications; public classification: keyof typeof Classifications;
public decoding_applied: DecodingSchema = "raw"; public decoding_applied: DecodingSchema = 'raw';
public decodings_available: DecodingSchema[] = ["raw"]; public decodings_available: DecodingSchema[] = ['raw'];
constructor( constructor(
public request: ExtendedRequest, public request: ExtendedRequest,
@ -54,16 +52,11 @@ export class StolenDataEntry extends EventEmitter {
public name: string, public name: string,
public value: string public value: string
) { ) {
// try {
// this.iab = TCString.decode(value);
// // console.log(this.iab);
// this.isIAB = true;
// } catch (e) {}
super(); super();
this.id = id.next().value as number; this.id = id.next().value as number;
this.classification = this.classify(); this.classification = this.classify();
if (isBase64(value)) { if (isBase64(value)) {
this.decodings_available.push("base64"); this.decodings_available.push('base64');
} }
} }
@ -77,7 +70,7 @@ export class StolenDataEntry extends EventEmitter {
if (this.value.includes(url.pathname)) { if (this.value.includes(url.pathname)) {
priority += 100; priority += 100;
} }
if (this.source === "cookie") { if (this.source === 'cookie') {
priority += 200; priority += 200;
} }
return priority; return priority;
@ -93,10 +86,12 @@ export class StolenDataEntry extends EventEmitter {
static parseValue(value: unknown): string | Record<string, unknown> { static parseValue(value: unknown): string | Record<string, unknown> {
if (isBase64JSON(value)) { if (isBase64JSON(value)) {
return StolenDataEntry.parseValue({ base64: JSON.parse(atob(value)) }); return StolenDataEntry.parseValue({
base64: JSON.parse(atob(value)),
});
} }
if (value === undefined) { if (value === undefined) {
return ""; return '';
} }
if (isJSONObject(value)) { if (isJSONObject(value)) {
const object = parseToObject(value); const object = parseToObject(value);
@ -104,19 +99,19 @@ export class StolenDataEntry extends EventEmitter {
} else if (isURL(value)) { } else if (isURL(value)) {
const url = new URL(value); const url = new URL(value);
let hash = url.hash; let hash = url.hash;
if (hash.includes("=")) { if (hash.includes('=')) {
//facebook sometimes includes querystring-encoded data into the hash... attempt to parse it //facebook sometimes includes querystring-encoded data into the hash... attempt to parse it
try { try {
hash = Object.fromEntries( hash = Object.fromEntries(
hash hash
.slice(1) .slice(1)
.split("&") .split('&')
.map((kv) => kv.split("=")) .map((kv) => kv.split('='))
); );
} catch (e) { } catch (e) {
// failed to parse as query string // failed to parse as query string
console.log( console.log(
"Failed attempt to parse hash location as query string, probably safe to ignore:", 'Failed attempt to parse hash location as query string, probably safe to ignore:',
e e
); );
} }
@ -128,28 +123,37 @@ export class StolenDataEntry extends EventEmitter {
} }
).entries() ).entries()
); );
if (typeof hash !== "object" && Object.keys(searchParams).length === 0) { if (
typeof hash !== 'object' &&
Object.keys(searchParams).length === 0
) {
return value; // just a string; return value; // just a string;
} }
const object = { const object = {
[Symbol.for("originalString")]: value, // so it doesn't appear raw in the table but can be easily retrieved later [Symbol.for('originalString')]: value, // so it doesn't appear raw in the table but can be easily retrieved later
host: url.host, host: url.host,
path: url.pathname, path: url.pathname,
searchParams, searchParams,
...(hash === "" ? {} : typeof hash === "string" ? { hash } : hash), ...(hash === ''
? {}
: typeof hash === 'string'
? { hash }
: hash),
}; };
return object; return object;
} else if (value === null) { } else if (value === null) {
return "null"; return 'null';
} else { } else {
return value.toString(); return value.toString();
} }
} }
getParsedValue(key_path: string): string | Record<string | symbol, unknown> { getParsedValue(
key_path: string
): string | Record<string | symbol, unknown> {
let object = StolenDataEntry.parseValue(this.value); let object = StolenDataEntry.parseValue(this.value);
for (const key of key_path.split(".")) { for (const key of key_path.split('.')) {
if (key === "") continue; if (key === '') continue;
object = StolenDataEntry.parseValue(object[key]); object = StolenDataEntry.parseValue(object[key]);
} }
return object; return object;
@ -159,7 +163,7 @@ export class StolenDataEntry extends EventEmitter {
const had_been_marked_before = this.marked; const had_been_marked_before = this.marked;
this.marked = true; this.marked = true;
if (!had_been_marked_before) { if (!had_been_marked_before) {
this.emit("change"); this.emit('change');
} }
} }
@ -167,7 +171,7 @@ export class StolenDataEntry extends EventEmitter {
const had_been_marked_before = this.marked; const had_been_marked_before = this.marked;
this.marked = false; this.marked = false;
if (had_been_marked_before) { if (had_been_marked_before) {
this.emit("change"); this.emit('change');
} }
} }
@ -182,16 +186,16 @@ export class StolenDataEntry extends EventEmitter {
private classify(): keyof typeof Classifications { private classify(): keyof typeof Classifications {
let result: keyof typeof Classifications; let result: keyof typeof Classifications;
if (this.exposesOrigin()) { if (this.exposesOrigin()) {
result = "history"; result = 'history';
} else { } else {
result = "id"; result = 'id';
} }
return result; return result;
} }
isRelatedToID() { isRelatedToID() {
return this.request.stolenData.some( return this.request.stolenData.some(
(entry) => entry.classification == "id" (entry) => entry.classification == 'id'
); );
} }
@ -199,26 +203,26 @@ export class StolenDataEntry extends EventEmitter {
return this.request.matchesHAREntry(har); return this.request.matchesHAREntry(har);
} }
getValuePreview(key = ""): string { getValuePreview(key = ''): string {
const value = this.getParsedValue(key); const value = this.getParsedValue(key);
const str = const str =
typeof value === "object" && value[Symbol.for("originalString")] typeof value === 'object' && value[Symbol.for('originalString')]
? (value[Symbol.for("originalString")] as string) ? (value[Symbol.for('originalString')] as string)
: value.toString(); : value.toString();
if (typeof value !== "object" && this.classification == "id") { if (typeof value !== 'object' && this.classification == 'id') {
return maskString(value, 1 / 3, ID_PREVIEW_MAX_LENGTH); return maskString(value, 1 / 3, ID_PREVIEW_MAX_LENGTH);
} else if ( } else if (
typeof value === "object" && typeof value === 'object' &&
value[Symbol.for("originalString")] value[Symbol.for('originalString')]
) { ) {
return value[Symbol.for("originalString")] as string; return value[Symbol.for('originalString')] as string;
} else { } else {
return str; return str;
} }
} }
getUniqueKey() { getUniqueKey() {
return this.request.shorthost + ";" + this.name + ";" + this.value; return this.request.shorthost + ';' + this.name + ';' + this.value;
} }
exposesOrigin(): boolean { exposesOrigin(): boolean {
@ -227,19 +231,19 @@ export class StolenDataEntry extends EventEmitter {
autoMark() { autoMark() {
if ( if (
this.classification == "history" || this.classification == 'history' ||
((this.source === "cookie" || ((this.source === 'cookie' ||
this.name.toLowerCase().includes("id") || this.name.toLowerCase().includes('id') ||
this.name.toLowerCase().includes("cookie") || this.name.toLowerCase().includes('cookie') ||
this.name.toLowerCase().includes("ga") || this.name.toLowerCase().includes('ga') ||
this.name.toLowerCase().includes("ses") || this.name.toLowerCase().includes('ses') ||
this.name.toLowerCase().includes("fb")) && this.name.toLowerCase().includes('fb')) &&
this.value.length > MIN_COOKIE_LENGTH_FOR_AUTO_MARK) this.value.length > MIN_COOKIE_LENGTH_FOR_AUTO_MARK)
) { ) {
if ( if (
(this.request.shorthost.includes("google") || (this.request.shorthost.includes('google') ||
this.request.shorthost.includes("youtube")) && this.request.shorthost.includes('youtube')) &&
this.name == "CONSENT" this.name == 'CONSENT'
) { ) {
// this cookie contains "YES" and might distract the person looking at it into thinking i gave consent on the reported site // this cookie contains "YES" and might distract the person looking at it into thinking i gave consent on the reported site
return; return;
@ -250,7 +254,7 @@ export class StolenDataEntry extends EventEmitter {
exposesPath() { exposesPath() {
return ( return (
this.request.originalPathname !== "/" && this.request.originalPathname !== '/' &&
[this.value, safeDecodeURIComponent(this.value)].some((haystack) => [this.value, safeDecodeURIComponent(this.value)].some((haystack) =>
haystack.includes(this.request.originalPathname) haystack.includes(this.request.originalPathname)
) )
@ -258,8 +262,8 @@ export class StolenDataEntry extends EventEmitter {
} }
exposesHost() { exposesHost() {
return [this.value, safeDecodeURIComponent(this.value)].some((haystack) => return [this.value, safeDecodeURIComponent(this.value)].some(
haystack.includes(getshorthost(this.request.origin)) (haystack) => haystack.includes(getshorthost(this.request.origin))
); );
} }
} }