Add option to clear cookies

This commit is contained in:
Kuba Orlik 2021-11-06 21:48:25 +01:00
parent d220c22291
commit 8fc1b33977
5 changed files with 138 additions and 51 deletions

View File

@ -31,7 +31,7 @@ export default class ExtendedRequest {
} else { } else {
url = (this.data as any).frameAncestors[0].url; url = (this.data as any).frameAncestors[0].url;
} }
this.origin = url; this.origin = new URL(url).origin;
} }
getOrigin(): string { getOrigin(): string {

View File

@ -4,22 +4,24 @@ import { EventEmitter } from "events";
import { RequestCluster } from "./request-cluster"; import { RequestCluster } from "./request-cluster";
class Memory extends EventEmitter { class Memory extends EventEmitter {
tab_to_history = {} as Record<string, Record<string, RequestCluster>>; origin_to_history = {} as Record<string, Record<string, RequestCluster>>;
async register(request: ExtendedRequest) { async register(request: ExtendedRequest) {
await request.init(); await request.init();
if (request.isThirdParty() && request.exposesOrigin()) { console.log("registering request for", request.origin);
if (!this.tab_to_history[request.tabId]) { if (!request.isThirdParty()) {
this.tab_to_history[request.tabId] = {}; return;
}
if (!this.origin_to_history[request.origin]) {
this.origin_to_history[request.origin] = {};
} }
const shorthost = getshorthost(new URL(request.url).host); const shorthost = getshorthost(new URL(request.url).host);
if (!this.tab_to_history[request.tabId][shorthost]) { if (!this.origin_to_history[request.origin][shorthost]) {
const cluster = new RequestCluster(shorthost); const cluster = new RequestCluster(shorthost);
this.tab_to_history[request.tabId][shorthost] = cluster; this.origin_to_history[request.origin][shorthost] = cluster;
} }
this.tab_to_history[request.tabId][shorthost].add(request); this.origin_to_history[request.origin][shorthost].add(request);
this.emit("change"); this.emit("change");
} }
}
constructor() { constructor() {
super(); super();
@ -32,8 +34,21 @@ class Memory extends EventEmitter {
); );
} }
getClustersForTab(tab_id: number): Record<string, RequestCluster> { getClustersForOrigin(origin: string): Record<string, RequestCluster> {
return this.tab_to_history[tab_id] || {}; return this.origin_to_history[origin] || {};
}
async removeCookiesFor(origin: string, shorthost?: string): Promise<void> {
const clusters = this.getClustersForOrigin(origin);
await Promise.all(
Object.values(clusters)
.filter((cluster) => !shorthost || cluster.id === shorthost)
.map((cluster) => cluster.removeAllCookies())
);
}
async removeRequestsFor(origin: string) {
this.origin_to_history[origin] = {};
} }
} }

View File

@ -5,9 +5,18 @@ export type Sources = "cookie" | "pathname" | "queryparams" | "header";
import { TCString, TCModel } from "@iabtcf/core"; import { TCString, TCModel } from "@iabtcf/core";
const id = (function* id() {
let i = 0;
while (true) {
i++;
yield i;
}
})();
export class StolenDataEntry { export class StolenDataEntry {
public isIAB = false; public isIAB = false;
public iab: TCModel | null = null; public iab: TCModel | null = null;
public id: number;
constructor( constructor(
public request: ExtendedRequest, public request: ExtendedRequest,
@ -20,6 +29,7 @@ export class StolenDataEntry {
// console.log(this.iab); // console.log(this.iab);
this.isIAB = true; this.isIAB = true;
} catch (e) {} } catch (e) {}
this.id = id.next().value as number;
} }
getPriority() { getPriority() {
@ -95,4 +105,15 @@ export class RequestCluster extends EventEmitter {
} }
} }
} }
async removeAllCookies() {
const cookies = await browser.cookies.getAll({ domain: this.id });
for (const cookie of cookies) {
console.log("removing cookie", cookie.name, "from", cookie.domain);
await browser.cookies.remove({
name: cookie.name,
url: `https://${cookie.domain}`,
});
}
}
} }

View File

@ -2,19 +2,14 @@ import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import memory from "./memory"; import memory from "./memory";
import { RequestCluster, Sources } from "./request-cluster"; import { RequestCluster, Sources } from "./request-cluster";
import { Tab, useEmitter } from "./util"; import { getshorthost, useEmitter } from "./util";
async function getTabByID(id: number) {
const tabs = await browser.tabs.query({ currentWindow: true });
return tabs.find((tab) => tab.id == id);
}
async function getCurrentTab() { async function getCurrentTab() {
const [tab] = await browser.tabs.query({ const [tab] = await browser.tabs.query({
active: true, active: true,
windowId: browser.windows.WINDOW_ID_CURRENT, windowId: browser.windows.WINDOW_ID_CURRENT,
}); });
return tab.id; return tab;
} }
const TabDropdown = ({ const TabDropdown = ({
@ -46,18 +41,18 @@ const TabDropdown = ({
}; };
const StolenDataRow = ({ const StolenDataRow = ({
tabID, origin,
shorthost, shorthost,
minValueLength, minValueLength,
cookiesOnly, cookiesOnly,
}: { }: {
tabID: number; origin: string;
shorthost: string; shorthost: string;
refreshToken: number; refreshToken: number;
minValueLength: number; minValueLength: number;
cookiesOnly: boolean; cookiesOnly: boolean;
}) => { }) => {
const cluster = memory.getClustersForTab(tabID)[shorthost]; const cluster = memory.getClustersForOrigin(origin)[shorthost];
const icons: Record<Sources, string> = { const icons: Record<Sources, string> = {
cookie: "🍪", cookie: "🍪",
pathname: "🛣", pathname: "🛣",
@ -68,14 +63,28 @@ const StolenDataRow = ({
<div> <div>
<h2> <h2>
{cluster.id} {cluster.hasCookies() ? "🍪" : ""} x {cluster.id} {cluster.hasCookies() ? "🍪" : ""} x
{cluster.requests.length} {cluster.requests.length}{" "}
<a
href="#"
style={{ fontSize: "10px" }}
onClick={() => cluster.removeAllCookies()}
>
Wyczyść cookiesy
</a>
</h2> </h2>
<table> <table>
<tbody> <tbody>
{cluster {cluster
.getStolenData({ minValueLength, cookiesOnly }) .getStolenData({ minValueLength, cookiesOnly })
.map((entry) => ( .map((entry) => (
<tr> <tr
key={
origin + ";" + cluster.id + ";" + entry.id + ";" + entry.name
}
data-key={
origin + ";" + cluster.id + ";" + entry.id + ";" + entry.name
}
>
<th style={{ maxWidth: "200px", wordWrap: "break-word" }}> <th style={{ maxWidth: "200px", wordWrap: "break-word" }}>
{entry.name} {entry.name}
</th> </th>
@ -92,24 +101,20 @@ const StolenDataRow = ({
}; };
const StolenData = ({ const StolenData = ({
pickedTab, origin,
refreshToken,
minValueLength, minValueLength,
refreshToken,
cookiesOnly, cookiesOnly,
}: { }: {
pickedTab: number | null; origin: string;
refreshToken: number; refreshToken: number;
minValueLength: number; minValueLength: number;
cookiesOnly: boolean; cookiesOnly: boolean;
}) => { }) => {
const [tab, setTab] = useState<Tab | null>(null); if (!origin) {
useEffect(() => {
getTabByID(pickedTab).then(setTab);
}, [pickedTab]);
if (!pickedTab || !tab) {
return <div></div>; return <div></div>;
} }
const clusters = Object.values(memory.getClustersForTab(pickedTab)).sort( const clusters = Object.values(memory.getClustersForOrigin(origin)).sort(
RequestCluster.sortCompare RequestCluster.sortCompare
); );
return ( return (
@ -117,20 +122,39 @@ const StolenData = ({
{" "} {" "}
<div> <div>
<h1> <h1>
<img src={tab.favIconUrl} width="20" height="20" /> {tab.title} {origin}
<button
style={{ marginLeft: "1rem" }}
onClick={() =>
memory.removeCookiesFor(
origin,
getshorthost(new URL(origin).host)
)
}
>
Wyczyść cookiesy 1st party
</button>
<button
style={{ marginLeft: "1rem" }}
onClick={() => memory.removeRequestsFor(origin)}
>
Wyczyść pamięć
</button>
</h1> </h1>
{clusters {clusters
.filter((cluster) => !cookiesOnly || cluster.hasCookies()) .filter((cluster) => !cookiesOnly || cluster.hasCookies())
.map((cluster) => ( .map((cluster) => {
return (
<StolenDataRow <StolenDataRow
tabID={pickedTab} origin={origin}
shorthost={cluster.id} shorthost={cluster.id}
key={cluster.id} key={cluster.id + origin}
refreshToken={refreshToken} refreshToken={refreshToken}
minValueLength={minValueLength} minValueLength={minValueLength}
cookiesOnly={cookiesOnly} cookiesOnly={cookiesOnly}
/> />
))} );
})}
</div> </div>
</div> </div>
); );
@ -167,13 +191,35 @@ const Options = ({
}; };
const Sidebar = () => { const Sidebar = () => {
const [pickedTab, setPickedTab] = useState<number | null>(null); const [origin, setOrigin] = useState<string | null>(null);
const [minValueLength, setMinValueLength] = useState<number | null>(7); const [minValueLength, setMinValueLength] = useState<number | null>(7);
const [cookiesOnly, setCookiesOnly] = useState<boolean>(false); const [cookiesOnly, setCookiesOnly] = useState<boolean>(false);
const counter = useEmitter(memory); const counter = useEmitter(memory);
useEffect(() => {
const listener = async (data) => {
console.log("tab change!");
const tab = await getCurrentTab();
const url = new URL(tab.url);
console.log(
"NEW ORIGIN",
url.origin,
url.origin.startsWith("moz-extension")
);
if (url.origin.startsWith("moz-extension")) {
return;
}
setOrigin(url.origin);
};
browser.tabs.onUpdated.addListener(listener);
return () => {
browser.tabs.onUpdated.removeListener(listener);
};
});
return ( return (
<> <>
<div id="selector"> {/* <div id="selector">
<TabDropdown setPickedTab={setPickedTab} pickedTab={pickedTab} /> <TabDropdown setPickedTab={setPickedTab} pickedTab={pickedTab} />
<button <button
id="get_current_tab_button" id="get_current_tab_button"
@ -181,7 +227,7 @@ const Sidebar = () => {
> >
Wybierz aktywną kartę{" "} Wybierz aktywną kartę{" "}
</button> </button>
</div> </div> */}
<Options <Options
minValueLength={minValueLength} minValueLength={minValueLength}
setMinValueLength={setMinValueLength} setMinValueLength={setMinValueLength}
@ -189,7 +235,7 @@ const Sidebar = () => {
setCookiesOnly={setCookiesOnly} setCookiesOnly={setCookiesOnly}
/> />
<StolenData <StolenData
pickedTab={pickedTab} origin={origin}
refreshToken={counter} refreshToken={counter}
minValueLength={minValueLength} minValueLength={minValueLength}
cookiesOnly={cookiesOnly} cookiesOnly={cookiesOnly}

View File

@ -39,3 +39,8 @@ export function parseCookie(cookie: string): Record<string, string> {
{} {}
); );
} }
export async function getTabByID(id: number) {
const tabs = await browser.tabs.query({ currentWindow: true });
return tabs.find((tab) => tab.id == id);
}