feat: added links for what to do section
This commit is contained in:
parent
e8fd233a30
commit
26af1e0c37
1 changed files with 348 additions and 13 deletions
|
|
@ -1,5 +1,18 @@
|
||||||
|
|
||||||
## What is a Link/URL
|
## Your internet traffic is being tracked
|
||||||
|
|
||||||
|
When you open up your phone and click on or share links though websites and applications websites are secretly injecting tracking information into the pages.
|
||||||
|
|
||||||
|
explain why that is a bad thing for privacy, and personal life
|
||||||
|
- you didn't consent to being tracked you just wanted to open a webpage
|
||||||
|
- can be used to make targeted ads work better and influence people behavers and beliefs
|
||||||
|
- can be used to track what you specifically are looking at on the internet and who you know
|
||||||
|
- it can be used to track and build profiles of who knows who
|
||||||
|
- makes links harder for people to read
|
||||||
|
- saves screen space
|
||||||
|
|
||||||
|
|
||||||
|
## How do Links/URLs work
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.url-container {
|
.url-container {
|
||||||
|
|
@ -196,7 +209,7 @@
|
||||||
|
|
||||||
Query parameters are a part of a URL that are used to encode some data about a page in its url. They are intended to be optional values but *sometimes* ~~most of the time~~ developers don't actually read or remember technical documentation and RFC's that outline how technologies are supposed to be used and put mandatory data in the optional parameters. [^1]
|
Query parameters are a part of a URL that are used to encode some data about a page in its url. They are intended to be optional values but *sometimes* ~~most of the time~~ developers don't actually read or remember technical documentation and RFC's that outline how technologies are supposed to be used and put mandatory data in the optional parameters. [^1]
|
||||||
|
|
||||||
[^1]: While the query parameters are not directly defined as optional they are not a part of the main path which should on its own define a unique stable path to any given element. If a query parameter is needed to fetch a specific resource then the path is by definition not uniquely identifying that resource.
|
[^1]: While the query parameters are not directly defined as optional they are not a part of the main path which should on its own define a unique stable path to any given element. If a query parameter is needed to fetch a specific resource then the path is by definition not uniquely identifying that resource. Youtube is an example of developers not using these value like they should be. Links like this [`https://www.youtube.com/watch?v=dQw4w9WgXcQ`](https://www.youtube.com/watch?v=dQw4w9WgXcQ) should instead be designed to look something like this `https://www.youtube.com/watch/video/dQw4w9WgXcQ`
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.query-container {
|
.query-container {
|
||||||
|
|
@ -493,16 +506,338 @@ While UTM codes are probably the most common way that tracking information is ad
|
||||||
|
|
||||||
One such technique is though the usage of URL shorteners. Not only can url shorteners hide the usage of tracking query parameters behind short nice looking redirect, URL shortener companies also track the ip address's of all users who click on a link as well as embed cookies into your browser sessions to track what sites you are visiting specific down to the individual user level.
|
One such technique is though the usage of URL shorteners. Not only can url shorteners hide the usage of tracking query parameters behind short nice looking redirect, URL shortener companies also track the ip address's of all users who click on a link as well as embed cookies into your browser sessions to track what sites you are visiting specific down to the individual user level.
|
||||||
|
|
||||||
## So why is this bad
|
|
||||||
explain why that is a bad thing for privacy, and personal life
|
|
||||||
- you didn't consent to being tracked you just wanted to open a webpage
|
|
||||||
- can be used to make targeted ads work better and influence people behavers and beliefs
|
|
||||||
- can be used to track what you specifically are looking at on the internet and who you know
|
|
||||||
- it can be used to track and build profiles of who knows who
|
|
||||||
|
|
||||||
## How can you help protect yourself and others
|
## How can you help protect yourself and others
|
||||||
|
|
||||||
give example of tracking links and how to protect against them
|
### Just remove them manually
|
||||||
- delete it manually
|
|
||||||
- browser plugins that remove it
|
The most basic low tech way to remove the trackers is to just delete them yourself or just not copy them. This can help protect people that you are sharing the links with but it can become a bit tedious to manually copy every single link you want to visit and remove the trackers from its link.
|
||||||
- desktop apps that scan your clipboard for them
|
|
||||||
|
<style>
|
||||||
|
/* Browser/Platform Detection Styles */
|
||||||
|
.protect-section {
|
||||||
|
margin: 1.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.protect-section h3 {
|
||||||
|
margin-bottom: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extension card styling */
|
||||||
|
.extension-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
background: var(--code-background, #f5f5f5);
|
||||||
|
border: 1px solid var(--border-color, #ddd);
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 0.75em;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extension-card:hover {
|
||||||
|
border-color: var(--secondary-color, #3498db);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.extension-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extension-name {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary-color, #2c3e50);
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extension-desc {
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #666;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extension-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.75em;
|
||||||
|
padding: 0.2em 0.5em;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--secondary-color, #3498db);
|
||||||
|
color: white;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Browser-specific highlighting - all hidden by default */
|
||||||
|
.browser-detected-firefox,
|
||||||
|
.browser-detected-chrome,
|
||||||
|
.browser-detected-edge {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-list-fallback {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-dropdown-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove border from expandable inside dropdown containers */
|
||||||
|
.browser-dropdown-container .expandable,
|
||||||
|
.platform-dropdown-container .expandable {
|
||||||
|
border: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-dropdown-container .expandable summary,
|
||||||
|
.platform-dropdown-container .expandable summary {
|
||||||
|
background: none;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-dropdown-container .expandable[open] summary,
|
||||||
|
.platform-dropdown-container .expandable[open] summary {
|
||||||
|
border-bottom: none;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Firefox detection using -moz prefixed properties */
|
||||||
|
@supports (-moz-appearance: none) {
|
||||||
|
.browser-detected-firefox {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
/* Ensure Chrome/Edge stay hidden even though Firefox supports -webkit-appearance */
|
||||||
|
.browser-detected-chrome,
|
||||||
|
.browser-detected-edge {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.browser-list-fallback {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.browser-dropdown-container {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.browser-dropdown-container .browser-firefox {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chrome/Chromium/Edge detection - only when NOT Firefox */
|
||||||
|
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
|
||||||
|
.browser-detected-chrome {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.browser-list-fallback {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.browser-dropdown-container {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.browser-dropdown-container .browser-chrome {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Platform detection for desktop/mobile */
|
||||||
|
.platform-detected {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform-list-fallback {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform-dropdown-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Platform app cards */
|
||||||
|
.app-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
background: var(--code-background, #f5f5f5);
|
||||||
|
border: 1px solid var(--border-color, #ddd);
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 0.75em;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card:hover {
|
||||||
|
border-color: var(--secondary-color, #3498db);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-name {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary-color, #2c3e50);
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-desc {
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #666;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-platforms {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5em;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform-tag {
|
||||||
|
font-size: 0.75em;
|
||||||
|
padding: 0.2em 0.5em;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #e0e0e0;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section dividers */
|
||||||
|
.protect-divider {
|
||||||
|
margin: 2em 0;
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--border-color, #ddd);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
### Install browser extensions to automate it for you
|
||||||
|
|
||||||
|
You can install browser extensions that automatically remove tracking parameters from URLs as you browse:
|
||||||
|
|
||||||
|
#### ClearURL
|
||||||
|
|
||||||
|
<div class="protect-section">
|
||||||
|
<div class="browser-detected-firefox">
|
||||||
|
<a href="https://addons.mozilla.org/en-US/firefox/addon/clearurls/" class="extension-card" target="_blank" rel="noopener">
|
||||||
|
<div class="extension-info">
|
||||||
|
<div class="extension-name">ClearURLs for Firefox<span class="extension-badge">Recommended for your browser</span></div>
|
||||||
|
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="browser-detected-chrome">
|
||||||
|
<a href="https://chromewebstore.google.com/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk" class="extension-card" target="_blank" rel="noopener">
|
||||||
|
<div class="extension-info">
|
||||||
|
<div class="extension-name">ClearURLs for Chrome<span class="extension-badge">Recommended for your browser</span></div>
|
||||||
|
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="browser-detected-edge">
|
||||||
|
<a href="https://microsoftedge.microsoft.com/addons/detail/clearurls/mdkdmaickkfdekbjdoojfalpbkgaddei" class="extension-card" target="_blank" rel="noopener">
|
||||||
|
<div class="extension-info">
|
||||||
|
<div class="extension-name">ClearURLs for Edge<span class="extension-badge">Recommended for your browser</span></div>
|
||||||
|
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="browser-dropdown-container">
|
||||||
|
<details class="expandable">
|
||||||
|
<summary>Show all browsers</summary>
|
||||||
|
<a href="https://addons.mozilla.org/en-US/firefox/addon/clearurls/" class="extension-card browser-firefox" target="_blank" rel="noopener">
|
||||||
|
<div class="extension-info">
|
||||||
|
<div class="extension-name">ClearURLs for Firefox</div>
|
||||||
|
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://chromewebstore.google.com/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk" class="extension-card browser-chrome" target="_blank" rel="noopener">
|
||||||
|
<div class="extension-info">
|
||||||
|
<div class="extension-name">ClearURLs for Chrome</div>
|
||||||
|
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://microsoftedge.microsoft.com/addons/detail/clearurls/mdkdmaickkfdekbjdoojfalpbkgaddei" class="extension-card browser-edge" target="_blank" rel="noopener">
|
||||||
|
<div class="extension-info">
|
||||||
|
<div class="extension-name">ClearURLs for Edge</div>
|
||||||
|
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
<div class="browser-list-fallback">
|
||||||
|
<a href="https://addons.mozilla.org/en-US/firefox/addon/clearurls/" class="extension-card" target="_blank" rel="noopener">
|
||||||
|
<div class="extension-info">
|
||||||
|
<div class="extension-name">ClearURLs for Firefox</div>
|
||||||
|
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://chromewebstore.google.com/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk" class="extension-card" target="_blank" rel="noopener">
|
||||||
|
<div class="extension-info">
|
||||||
|
<div class="extension-name">ClearURLs for Chrome</div>
|
||||||
|
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://microsoftedge.microsoft.com/addons/detail/clearurls/mdkdmaickkfdekbjdoojfalpbkgaddei" class="extension-card" target="_blank" rel="noopener">
|
||||||
|
<div class="extension-info">
|
||||||
|
<div class="extension-name">ClearURLs for Edge</div>
|
||||||
|
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
[Source Code](https://github.com/ClearURLs/Addon)
|
||||||
|
|
||||||
|
### Use websites with tools to do it for you
|
||||||
|
|
||||||
|
You can also use web tools that you can give a URL and it will clean it for you:
|
||||||
|
|
||||||
|
<div class="protect-section">
|
||||||
|
<div class="platform-list-fallback">
|
||||||
|
<a href="https://linkcleaner.app/" class="app-card" target="_blank" rel="noopener">
|
||||||
|
<div class="app-info">
|
||||||
|
<div class="app-name">LinkCleaner</div>
|
||||||
|
<p class="app-desc">Paste any URL and get a clean version without tracking parameters. Works in your browser - no installation needed.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ### Desktop applications
|
||||||
|
|
||||||
|
Clipboard monitoring apps that automatically clean URLs when you copy them:
|
||||||
|
|
||||||
|
<div class="protect-section">
|
||||||
|
<div class="platform-list-fallback">
|
||||||
|
<a href="" class="app-card" target="_blank" rel="noopener">
|
||||||
|
<div class="app-info">
|
||||||
|
<div class="app-name"></div>
|
||||||
|
<p class="app-desc"></p>
|
||||||
|
<div class="app-platforms">
|
||||||
|
<span class="platform-tag">Linux</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
### Mobile applications
|
||||||
|
|
||||||
|
There are some mobile apps that can also help remove trackers from links:
|
||||||
|
|
||||||
|
<div class="protect-section">
|
||||||
|
<div class="platform-list-fallback">
|
||||||
|
<a href="https://f-droid.org/packages/com.svenjacobs.app.leon/" class="app-card" target="_blank" rel="noopener">
|
||||||
|
<div class="app-info">
|
||||||
|
<div class="app-name">Leon</div>
|
||||||
|
<p class="app-desc">Android share target app that removes tracking parameters from URLs. Share any link to Leon before sharing elsewhere.</p>
|
||||||
|
<div class="app-platforms">
|
||||||
|
<span class="platform-tag">Android</span>
|
||||||
|
<span class="platform-tag">F-Droid</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue