This commit is contained in:
Arkadiusz Wieczorek 2022-04-15 10:34:29 +02:00
parent d8b6e05efb
commit 51dc008aa7
5 changed files with 254 additions and 119 deletions

View File

@ -4,7 +4,6 @@ import Options from '../../options';
import { StolenData } from './stolen-data';
import { getshorthost, useEmitter } from '../../util';
import { getMemory } from '../../memory';
browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' });
async function getCurrentTab() {
const [tab] = await browser.tabs.query({
@ -19,7 +18,10 @@ import './../../styles/global.scss';
import './sidebar.scss';
const Sidebar = () => {
const [origin, setOrigin] = React.useState<string | null>(null);
// const [origin, setOrigin] = React.useState<string | null>(null);
const url = new URL(document.location.toString());
const origin = url.searchParams.get('origin');
const [minValueLength, setMinValueLength] = React.useState<number | null>(
localStorage.getItem('minValueLength') === null
? 7
@ -45,23 +47,7 @@ const Sidebar = () => {
: false
);
React.useEffect(() => {
const listener = async () => {
console.log('tab change!');
const tab = await getCurrentTab();
const url = new URL(tab.url);
if (url.origin.startsWith('moz-extension')) {
return;
}
setOrigin(url.origin);
};
browser.tabs.onUpdated.addListener(listener);
listener();
return () => {
browser.tabs.onUpdated.removeListener(listener);
};
});
React.useEffect(() => {
for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) {
@ -71,7 +57,7 @@ const Sidebar = () => {
}
return setMarksOccurrence(false);
}, [eventCounts['*'], origin]);
}, [eventCounts['*']]);
return (
<div className="sidebar">

View File

@ -1,11 +1,16 @@
@import '../../styles/colors.scss';
body {
width: 400px;
overflow-x: hidden;
}
.toolbar {
padding: 0 0.75rem;
padding: 0.125rem 1rem;
.header {
display: grid;
grid-template-columns: 2.75rem 1fr 1.25rem;
grid-template-columns: 1.75rem 1fr 1.25rem;
align-items: center;
max-height: 3.5rem;
min-height: 3.5rem;
@ -21,13 +26,13 @@
flex-flow: column;
flex-wrap: nowrap;
font-size: 0.875rem;
font-weight: 600;
font-weight: 700;
justify-content: center;
padding-left: 1rem;
color: #000;
&--hyperlink {
font-weight: 400;
font-weight: 600;
color: $ultra-black-color;
max-height: 2rem;
overflow: hidden;
@ -44,43 +49,125 @@
.summary {
display: flex;
flex-flow: column;
justify-content: center;
padding-bottom: 1.5rem;
border-bottom: 1px solid $light-grey;
.counters-wrapper {
flex-flow: row;
display: flex;
justify-content: center;
.counters {
display: flex;
flex-flow: column;
align-content: flex-start;
justify-content: center;
margin-right: 1rem;
.counter {
font-size: 1rem;
font-weight: 900;
}
}
.big-counter {
font-size: 6rem;
font-size: 900;
font-size: 1.25rem;
font-weight: 700;
align-items: center;
display: flex;
img {
margin-right: 0.5rem;
}
}
.warning-container {
background-color: $pale-yellow;
border-left: 4px solid $contrast-yellow;
margin-top: 0.5rem;
font-size: 0.875rem;
display: grid;
grid-template-columns: calc(100% - 2rem) 2rem;
align-items: flex-start;
span {
padding: 1rem;
margin-right: 2rem;
}
button {
justify-content: flex-end;
border: none;
cursor: pointer;
color: $ultra-black-color;
line-height: 1.25rem;
background: transparent;
padding: 0.5rem 0.5rem;
&:nth-child(1) {
margin-bottom: 1rem;
}
}
}
.big-counter {
font-size: 6rem;
font-weight: 700;
}
}
.notice {
font-size: 0.875rem;
font-weight: 700;
text-align: center;
}
}
.details {
padding-top: 1.5rem;
p {
font-size: 0.875rem;
padding-bottom: 1rem;
}
}
.about {
p {
font-size: 0.875rem;
font-weight: 700;
}
}
.actions {
padding: 2rem 0;
display: flex;
align-self: flex-start;
justify-content: center;
align-items: center;
a {
font-size: 0.875rem;
font-weight: 700;
color: #000;
margin-right: 0.5rem;
}
.button {
border: 0;
outline: 0;
height: 3rem;
font-size: 0.875rem;
line-height: 0.875rem;
cursor: pointer;
&--details {
margin-right: 0.5rem;
color: #000;
text-decoration:underline;
background-color: #fff;
font-weight: 700;
}
&--report {
font-weight: 800;
padding: 0 1.5rem;
margin-left: 0.5rem;
background-color: #000;
color: $icd-rentgen-color;
&:hover {
background-image: linear-gradient(
to right,
$icd-rentgen-color 0%,
$icd-rentgen-color 4%,
#000 4%,
#000 100%
);
animation: slidebg 1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}
}
@keyframes slidebg {
to {
background-position: 155px;
}
}
}
}
}

View File

@ -1,8 +1,7 @@
import React from 'react';
import React, { Fragment, ReactElement } from 'react';
import ReactDOM from 'react-dom';
import { useEmitter } from '../../util';
import { getMemory } from '../../memory';
browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' });
async function getCurrentTab() {
const [tab] = await browser.tabs.query({
@ -17,34 +16,15 @@ import './toolbar.scss';
const Toolbar = () => {
const [origin, setOrigin] = React.useState<string | null>(null);
const [minValueLength, setMinValueLength] = React.useState<number | null>(
localStorage.getItem('minValueLength') === null
? 7
: (localStorage.getItem('minValueLength') as unknown as number)
);
const [cookiesOnly, setCookiesOnly] = React.useState<boolean>(false);
const [stolenDataView, setStolenDataView] = React.useState<boolean>(true);
const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = React.useState<boolean>(false);
const [eventCounts, setEventCounts] = useEmitter(getMemory());
const [marksOccurrence, setMarksOccurrence] = React.useState<boolean>(false);
const [warningDataDialogAck, setWarningDataDialogAck] = React.useState<boolean>(
localStorage.getItem('warningDataDialogAck') === null
? true
: localStorage.getItem('warningDataDialogAck') == 'true'
? true
: false
);
const [logoVisibility, setLogoVisibility] = React.useState<boolean>(
localStorage.getItem('logoVisibility') === null
? false
: localStorage.getItem('logoVisibility') == 'true'
? true
: false
const [cookieDomainCopy, setCookieDomainCopy] = React.useState<string | null>(null);
const [exposedOriginDomainCopy, setExposedOriginDomainCopy] = React.useState<string | null>(
null
);
React.useEffect(() => {
const listener = async () => {
console.log('tab change!');
const tab = await getCurrentTab();
const url = new URL(tab.url);
if (url.origin.startsWith('moz-extension')) {
@ -61,26 +41,74 @@ const Toolbar = () => {
});
React.useEffect(() => {
for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) {
if (cluster.hasMarks()) {
return setMarksOccurrence(true);
}
}
const exposedOriginDomains = Object.values(getMemory().getClustersForOrigin(origin))
.filter((cluster) => cluster.exposesOrigin())
.map((cluster) => cluster.id);
return setMarksOccurrence(false);
setExposedOriginDomainCopy('');
const first_sentence = `Strona ${origin} wysłała informacje o części Twojej historii przeglądania do `;
switch (exposedOriginDomains.length) {
case 0:
return null;
case 1:
return setExposedOriginDomainCopy(first_sentence + `${exposedOriginDomains[0]}.`);
case 2:
return setExposedOriginDomainCopy(
first_sentence + `${exposedOriginDomains[0]} oraz ${exposedOriginDomains[1]}.`
);
case 3:
return setExposedOriginDomainCopy(
first_sentence +
`${exposedOriginDomains[0]}, ${exposedOriginDomains[1]} oraz ${exposedOriginDomains[2]}.`
);
default:
return setExposedOriginDomainCopy(
first_sentence +
`${exposedOriginDomains[0]}, ${exposedOriginDomains[1]} (i ${
exposedOriginDomains.length - 2 < 2
? 2
: exposedOriginDomains.length - 2
} innych).`
);
}
}, [eventCounts['*'], origin]);
React.useEffect(() => {
const cookieDomains = Object.values(getMemory().getClustersForOrigin(origin))
.filter((cluster) => cluster.hasCookies())
.map((cluster) => cluster.id);
const first_sentence = `Strona ${origin} dokonała zapisu i odczytu plików Cookie dla domen `;
switch (cookieDomains.length) {
case 0:
return null;
case 1:
return setCookieDomainCopy(first_sentence + `${cookieDomains[0]}.`);
case 2:
return setCookieDomainCopy(
first_sentence + `${cookieDomains[0]} oraz ${cookieDomains[1]}.`
);
case 3:
return setCookieDomainCopy(
first_sentence +
`${cookieDomains[0]}, ${cookieDomains[1]} oraz ${cookieDomains[2]}.`
);
default:
return setCookieDomainCopy(
first_sentence +
`${cookieDomains[0]}, ${cookieDomains[1]} (i ${
cookieDomains.length - 2 < 2 ? 2 : cookieDomains.length - 2
} innych).`
);
}
}, [eventCounts['*'], origin]);
return (
<div className="toolbar">
<header className="header">
<img src="../../assets/icon-addon.svg" height={32}></img>
<div
className={
logoVisibility
? 'webpage-metadata'
: 'webpage-metadata webpage-metadata--without-logo'
}
>
<div className="webpage-metadata">
{origin ? (
<>
<span>Analiza strony</span>
@ -102,39 +130,72 @@ const Toolbar = () => {
</header>
<section className="summary">
<div>
<div className="counters-wrapper">
<div className="counters">
<div className="counter counter--browser-history">12</div>
<div className="counter counter--cookies">21</div>
<div className="counter counter--browser-history">
<img src="/assets/icons/warning.svg" width="24" height="24" />
<span data-event={`${eventCounts['*']}`}>
{
Object.values(getMemory().getClustersForOrigin(origin)).filter(
(cluster) => cluster.exposesOrigin()
).length
}
</span>
</div>
<div className="big-counter">33</div>
<div className="counter counter--cookies">
<img src="/assets/icons/cookie.svg" width="24" height="24" />
<span data-event={`${eventCounts['*']}`}>
{
Object.values(getMemory().getClustersForOrigin(origin)).filter(
(cluster) => cluster.hasCookies()
).length
}
</span>
</div>
<p>Liczba wykrytych domen podmiotów trzecich</p>
</div>
<div className="big-counter" data-event={`${eventCounts['*']}`}>
{Object.values(getMemory().getClustersForOrigin(origin)).length}
</div>
</div>
<span className="notice">Liczba wykrytych domen podmiotów trzecich</span>
</section>
<section className="details">
<p>
Strona wp.pl wysłała informacje o części Twojej historii przeglądania do
facebook.com, adnsx.com (i 43 innych).
</p>
<p>
Dokonała też zapisu i odczytu plików Cookie dla domen doubleclick.google.net,
3dsio.com (i 59 innych).
</p>
<p>{exposedOriginDomainCopy}</p>
<p>{cookieDomainCopy}</p>
</section>
<section className="warning-container">
<span>
<strong>Takie przetwarzanie danych może być niezgodne z prawem.</strong> Kliknij
w przycisk <i>Generuj raport</i>, aby pomóc ustalić, czy ta strona nie narusza
{exposedOriginDomainCopy !== null || cookieDomainCopy !== null ? (
<Fragment>
<section className="about">
<p>
Takie przetwarzanie danych może być niezgodne z prawem. Kliknij w
przycisk Generuj raport, aby pomóc ustalić, czy ta strona nie narusza
RODO.
</span>
</p>
</section>
<section className="actions">
<a href="">Pokaż szczegóły</a>
<button>Generuj raport</button>
<button
className="button button--details"
onClick={() => {
const params = [
'height=' + screen.height,
'width=' + screen.width,
'fullscreen=yes',
].join(',');
window.open(
`/components/sidebar/sidebar.html?origin=${origin}`,
'new_window',
params
);
}}
>
Pokaż szczegóły
</button>
<button className="button button--report">Generuj raport</button>
</section>
</Fragment>
) : null}
</div>
);
};

View File

@ -6,7 +6,7 @@ import { RequestCluster } from './request-cluster';
function setDomainsNumber(counter: number, tabId: number) {
browser.browserAction.setBadgeText({ text: counter.toString(), tabId });
browser.browserAction.setTitle({
title: `Rentgen - liczba wykrytych podmiotów: ${counter}`,
title: 'Rentgen',
tabId,
});
}
@ -30,7 +30,12 @@ export default class Memory extends EventEmitter {
this.origin_to_history[request.origin][shorthost].add(request);
this.emit('change', false, shorthost, 'registered request(shorthost emit)');
console.log(this.getClustersForOrigin(request.origin));
Object.values(this.getClustersForOrigin(request.origin)).some((cluster) =>
cluster.hasCookies()
)
? browser.browserAction.setBadgeBackgroundColor({ color: '#ff726b' })
: browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' });
setDomainsNumber(
Object.values(this.getClustersForOrigin(request.origin)).length,
request.tabId

View File

@ -10,11 +10,7 @@
user-select: none;
}
body {
width: 400px;
height: 600px;
overflow-x: hidden;
}
html {
font-size: 1rem;