Andrey Sitnik, Evil Martians
Privacy-first architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11228277/04_Evil-Martians_Logo_Lurkers_Filled_on-Transparent_for-Dark-BG.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11228626/DALL_E_2024-03-30_11.46.55_-_A_minimalistic_white_on_black_engraving_style_depiction_of_a_man_installing_a_CCTV_camera._This_design_focuses_on_simplicity_and_clean_lines__emphasiz.webp)
Why and how to care about the privacy of your users?
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11229415/no.jpg)
“Let’s focus on tech,
not politics!”
@sitnikcode
Hackers, 1993
Section 1: Software industry and principles
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11229837/guns.jpg)
@sitnikcode
Hackers, 1993
Open Source is political
@sitnikcode
The word “free” in [free software] does not refer to price;
it refers to freedom. […]
The freedom to change a program, so that
you can control it instead of it controlling you.
Cryptography is political
@sitnikcode
The decisions we make about communication security today will determine the kind of society we live in tomorrow
— Whitfield Diffied, 1993
co-creator of public key cryptography
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11229711/03.11.16-turingtwo_SUnews.jpg)
Hacking is political
@sitnikcode
Mistrust authority—promote decentralization
— Hacker ethic by Steven Levy, 1984
Software development always
has been about principles and politics
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11229715/sPEJDGKg.png)
Always Has Been meme, unknown author
Lack of principles is new
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11229756/MV5BMTM0OTQ2NjkyNF5BMl5BanBnXkFtZTcwNzU4MjkzNA__._V1_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11229758/siliconvalley04.webp)
1990s
2010s
Hackers, 1993
Silicon Valley, 2014
Section 2: Why I should care?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11229770/pesonal.jpg)
@sitnikcode
Hackers, 1993
Reason 1: You will live in the world you created
@sitnikcode
“Just because you do not take an interest in politics
doesn’t mean politics won’t take an interest in you.”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11232072/164858668017559456.jpg)
Write code!
Russian meme from anonymous author
@sitnikcode
Reason 2: Principles create meaning for life
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11232169/lone.jpg)
Work just for money
Making the revolution for fun
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11232205/revolution2.jpg)
DALL-E and Hackers, 1993
But there are many revolutions to make
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11232215/Adventure_time.rpg_.jpg)
Adventure Time
Section 3: Why is privacy important?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11229846/nude.jpg)
@sitnikcode
Hackers, 1993
Mistake 1: Is it just for Google for better ads?
@sitnikcode
😃
Mistake 1: Is it just for Google for better ads?
@sitnikcode
FAKE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11241911/ku1neu504sh01.jpg)
Blue Coders
Analytics
Data brokers
Fact 1: It is for data brokers for resell
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4902873/mobile-phone-icon-29.jpg)
🕵️
Ads
Free
Analytics
Data brokers
Shady clients
Case: X-Mode data broker, 2020
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11241943/Captura_desde_2024-04-04_21-44-05.png)
“Over 100 apps that sold location data
to sketchy data broker X-Mode”
“Quran app, Muslim dating app, Craigslist app, an app for following storms, and a level app that can be used to help install shelves”
“X‑Mode had supplied location data to U.S. military contractors”
@sitnikcode
Mistake 2: This company doesn’t sell data
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11243263/VKGTIIHIBVGPNGUCXC45ESUYTA.jpg)
We respect your privacy
AFP
Mistake 2: This company doesn’t sell data
FAKE
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11243311/10_of_the_biggest_data_breaches_in_history_new-f.png)
Fact 2: If data is stored it can be leaked
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11243282/Captura_desde_2024-04-05_13-50-39.png)
Case: Yandex Food Delivery data breach, 2022
@sitnikcode
Was leaked all deliveries 2021-2022:
— First & last name
— Phone number
— Food delivery address
— Deliver time
Even public easy-to-use map app,
everyone can find your deliveries
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11243707/1647980458191321151.jpg)
@sitnikcode
Mistake 3: My email is not sensitive data
Windows 11 install wizard
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11244025/Windows-11-OOBE-sign-with-an-offline-local-account.webp)
@sitnikcode
Fact 3: Big data connects different leaks
Quran app
Muslim
Locations
Social app
Locations
Old breach
Full name
Google Analytics tracks >52.6% websites
@sitnikcode
a.com
b.com
c.com
d.com
e.com
f.com
g.com
See click
Referer
Only c.com is invisible for GA
Track connected to your Google account
@sitnikcode
Mistake 4: I have nothing to hide
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11244216/Dolores_Umbridge_-_Perfil.webp)
Dolores Umbridge from Harry Potter
If you have nothing to hide
You have nothing to fear
@sitnikcode
Fact 4: Somebody else has something to hide
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11244427/Captura_desde_2024-04-05_20-36-01.png)
“… find personal details identifying critics of the Saudi monarchy who had been posting under anonymous Twitter handles”
“[Saudi Prince], who owns
>5% of Twitter”
@sitnikcode
Fact 4: … and to fear
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11244437/Captura_desde_2024-04-05_20-34-02.png)
“54-year-old teacher, Mohammad bin Nasser al-Ghamdi, received
a death sentence for tweeting mild criticism of the authorities
to his 10 followers on Twitter.”
@sitnikcode
In the Netherlands too
“After Russia invaded Ukraine in February 2022, authorities began using facial recognition to prevent people from protesting in the first place”
“VisionLabs’ algorithm has been used in Moscow’s facial recognition system”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11244473/russia_detentions.jpeg)
VisionLabs Global HQ: Johan Cruijff Boulevard 65, Amsterdam
@sitnikcode
And against EU citizens too
“Proton Mail Discloses User Data
Leading to Arrest in Spain”
“The requests were made under the guise of anti-terrorism laws,
despite the primary activities of the
Democratic Tsunami
[Catalan independence organization]
involving protests and roadblocks”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11378393/e7a1a802-a453-4dea-acbe-ce5b34846339_16-9-discover-aspect-ratio_default_0.jpg)
EP
What can we do?
The web became an awful place
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11245521/Captura_desde_2024-04-06_18-38-15.png)
The New York Times
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11245523/merlin_138529794_b3c909c2-7b3a-4964-9d05-a4270836d8de-articleLarge.webp)
Isn’t this a frontend conference?
@sitnikcode
We made the web an awful place
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11245521/Captura_desde_2024-04-06_18-38-15.png)
The New York Times
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11245523/merlin_138529794_b3c909c2-7b3a-4964-9d05-a4270836d8de-articleLarge.webp)
Step 1: Remove GDPR popup
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11229808/cookie.jpg)
@sitnikcode
Hackers, 1993
But we need popups for GDPR, right?
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11245530/pick_cookie_law_consent_popup.png)
Fireplugins
There is no “popup” in GDPR law
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11245534/Captura_desde_2024-04-06_19-11-36.png)
Why we added GDPR popups
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11251722/616.jpg)
Punish them with popups until they agree to give us personal data
Don’t
Track
Users
Don’t
Track
Users
Don’t track users
Friends s10, e13
Consent popup is just dark design pattern
@sitnikcode
😈 Popup blocks content
😈 UI is unclear
😈 The biggest button is Allow
Yes
Yes, but on red
We care about your privacy. Can we spy on you?
The real “We care about privacy” way
@sitnikcode
😻 GDPR compatible analytics
😻 No popup
😻 You ask users when you need data
(for instance, in Sign Up form)
Analytics without popup
@sitnikcode
✅ Page view, browsers, countries
✅ Traffic sources
✅ Track website events
✅ Track campaigns from click to conversion (?utm)
⛔ Can’t connect events with session/user ID
⛔ Can’t collect social network ID for ads (Remarketing)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11245622/conversion-rate.webp)
Plausible
There are many Cookieless Tracking tools
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11245630/umami-text-logo.jpg)
But marketing manager is demanding GA
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11245636/DALL_E_2024-04-06_22.11.51_-_A_cartoonish_office_scene_featuring_a_marketing_manager_and_a_programmer._The_marketing_manager_is_standing__leaning_slightly_forward_with_hands_on_hi.webp)
DALL-E
You can’t trust data only from opt-in users
@sitnikcode
All users
Your data
Yes on GDPR popup
No on GDPR popup
32—64% of users press Yes
on GDPR banners, Statista
Popup only for EU is not an option
@sitnikcode
GDPR-like laws:
🇧🇷 Brazil: Lei Geral de Proteçao de Dados
🇨🇦 Canada: Digital Charter Implementation Act
🇨🇱 Chile: Ley 19,628
🇪🇬 Egypt: Law No. 151
🇮🇳 India: Personal Data Protection Bill
🇿🇦 South Africa: Protection of Personal Information Act
🇺🇸 USA, CA: California Consumer Privacy Act
It is time to change the industry
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11245724/rain.jpg)
Hackers, 1993
Remember how we killed IE together
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11245678/youtube-ie6-stats.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11245679/youtube-ie6-highlight.jpg)
Ex-YouTube developer reveals how they ‘conspired to kill IE6’
Step 2: Reduce privacy data processors
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11229838/remove.jpg)
@sitnikcode
Hackers, 1993
Not only you have access to private data
@sitnikcode
We Care About Your Privacy
We and our 618 partners store and/or access information on a device, such as unique IDs in cookies to process personal data. You may accept or manage your choices by clicking below or at any time in the privacy policy page. These choices will be signaled to our partners and will not affect browsing data.
Less services = less risks
@sitnikcode
🧐
Hosting
🧐
CDN
🧐
Ads
🤤
Public JS CDN
🥸
JS script from CDN
🧐
Third-party database
→ Leak
→ Sell data
How to reduce number of services?
@sitnikcode
✅ No public CDN for libs (also better performance)
✅ No public CDN for fonts (also better performance)
✅ Self-hosted tools (like analytics)
✅ Combine CDN and cloud
Step 3: Local-First
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11229839/offline.jpg)
@sitnikcode
Hackers, 1993
Advanced
Advanced step: only for new projects
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11246578/advanced.jpg)
Hackers, 1993
@sitnikcode
Software before
Local-Only
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11396662/steve-jobs-og-iphone.webp)
Then iPhone was released
@sitnikcode
Apple
@sitnikcode
And now everything is in the cloud
Server-First
Local-Only
@sitnikcode
Server-First
Local-Only
Local-First
Local-First as a third way
Rich client keeps data and processing locally,
the server is just for sync
The idea was presented by Ink & Switch
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11248316/Captura_desde_2024-04-08_17-22-33.png)
Seven ideas:
- No spinners (local data fast to change)
- Sync between devices
- Offline-first
- Conflict-free collaboration
- App will work when company closes
- Privacy by default
- User owns data
Notion vs Obsidian
@sitnikcode
Notion
Server-First
Obsidian
Local-First
🗒️
Local files
notes/Shopping.md
notes/Ideas.md
Obsidian Sync & Publish
💻
📱
💻
🗒️
📱
🗒️
GitHub repo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11248821/Google_Drive_logo.png)
Any Cloud Sync
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11248824/Notion_app_logo.png)
Local-First isn’t on-off switch, but a spectrum
@sitnikcode
Partial DB replica
on the client
P2P
End-to-end encryption
No server
Step 1: Storage
@sitnikcode
All client’s data stores locally
More data on the client (20-500 MB)
We need proper client-side database:
— Good performance
— Rich query language
Client-side databases
@sitnikcode
SQLite WASM
PGlite (PostgreSQL in WASM)
Under Construction
import { SQLocal } from 'sqlocal'
const { sql } = new SQLocal('database.sqlite3')
const data = await sql`SELECT * FROM posts`
import { PGlite } from "@electric-sql/pglite"
const db = new PGlite()
await db.query("select * from posts;")
Persistence DB storage for SQLite
@sitnikcode
- OPFS (Origin Private File System)
- IndexedDB
Firefox uses SQLite for
IndexedDB & OPFS metadata
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11381812/Ftn3Ww_XsAETlu4.jpg)
Why not IndexedDB?
@sitnikcode
- SQLite works on ReactNative and desktop
- IndexedDB query API is limited
- Performance
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11396740/absurd-sql-graph.webp)
Step 2: Add log and separate read and write
@sitnikcode
Log
SQLite
Reactive store
Updates
Initialization
UI
We need to sync server and browser tabs
@sitnikcode
Log
SQLite
Step 3: 2 passwords for end-to-end encryption
@sitnikcode
1st password to auth on the server
2nd password for end-to-end encryption
Unexpected benefits of Local-First
Benefit 1: Very simple server
@sitnikcode
Sync changes
Auth
Check access for collaboration
All business logic
All data management
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11249114/big.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11249115/small.jpg)
Benefit 2: No server in prototype stage
@sitnikcode
project/
client/
Benefit 3: Cheap scale
@sitnikcode
Server-first:
Local-first:
Benefit 4: No private data → no problem
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11251432/DALL_E_2024-04-09_18.43.33_-_Create_a_cartoon_illustration_for_a_presentation_slide__showing_two_sad_thieves_inside_an_empty_bank__with_their_hands_empty__signifying_they_found_no.webp)
DALL-E
Benefit 5: Developer productivity
@sitnikcode
useEffect(() => {
setLoading(true)
fetch('/posts')
.then(response => response.json())
.then(data => {
setData(data)
setLoading(false)
})
.catch(e => {
setError(true)
setLoading(false)
})
}, [])
if (loading) return <div>Loading…</div>
if (error) return <div>Error</div>
<ul>
{data.map(post => <li>{post.title}</li>)}
</ul>
const data = use(posts)
<ul>
{data.map(post => <li>{post.title}</li>)}
</ul>
State management
Networking code
Cache
Network errors
Optimistic UI
Sync Engine
Benefit 6: Local data = 0 latency
@sitnikcode
There are frameworks for LoFi
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11249214/android-chrome-512x512.png)
Evolu
ElectricSQL
RxDB
Hard part 1: Frameworks are not 100% ready
@sitnikcode
While none of these projects currently claim “production level stability” for persistence, the current support could already
be sufficient for some projects
Hard part 2: Client’s database migrations
@sitnikcode
const migrations = {
1: action => {
if (action.type === 'posts/created') {
return { type: 'news/created', news: action.post }
}
}
}
Hard part 3: E2EE password recovery
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11249208/s3q2ynkv2o5oniz59gsd.jpg)
With great privacy comes great responsibility
Spider-Man
Again: Local-First is a spectrum
@sitnikcode
Partial DB replica
on the client
P2P
End-to-end encryption
No server
Local-First Startups: Linear
@sitnikcode
With great privacy comes great responsibility
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11397198/linear.webp)
Linear website
Local-First Startups: Linear
@sitnikcode
With great privacy comes great responsibility
Local-First Startups: Pitch
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11397202/inlineeditor_ramsrefresh.webp)
Pitch.com
1.7 million teams
using app
Local-First Startups: Goodnotes
@sitnikcode
goodnotes.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11397214/64c4cedf7bcb8bd3167a40ad_goodnotes-features-intro-1.webp)
>24 million
monthly users
Step 4: Privacy from non-US perspective
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11229806/non-us.jpg)
@sitnikcode
Hackers, 1993
Advanced
Advanced step: for big & popular projects
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11246673/advanced2.jpg)
Hackers, 1993
Different privacy risks
@sitnikcode
🕵️ Government’s Secret Service
🪤 Surveillance for regime critics
📶 Internet provider
☁️ Data brokers
🏬 International companies collecting data
👮 Phone check by the local police officer
⛪ Local community with ethical standards
👪 Family members
US media focus mostly on
@sitnikcode
🕵️ Government’s Secret Service
Surveillance for regime critics
Internet provider
☁️ Data brokers
🏬 International companies collecting data
Phone check by the local police officer
Local community with ethical standards
Family members
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11245666/9xrsevx30x631.jpg)
WhiteEmperor420 on Reddit
Different risks need opposite solutions
@sitnikcode
RSS Reader privacy risks
🇺🇸 US: local-first
don’t trust cloud
🇷🇺 Russia: US cloud proxy
to hide you from Internet provider
🤫
🏯
🏥
🕌
☁️
🤫
🏯
🏥
🕌
☁️
🔒
🕵️
📶
🕵️
🔓
Chat check by local police check in 🇷🇺 🇧🇾
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11246761/detail_b186ffa425d217bd5fe7bbfa88a1f6d3.jpg)
“Unlock your phone and show Telegram”
Andrey Lukovsky
“I have rights”
1234
🧑⚖️
🧑🦽
Navalny
Following
Telegram fork by Belarusian Cyber-Partisans
@sitnikcode
1234
Navalny
Following
1984
You can have 2 PINs
CSS hacks
GitHub trends
Following
CSS hacks
GitHub trends
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11246761/detail_b186ffa425d217bd5fe7bbfa88a1f6d3.jpg)
Summary
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/11229802/shouting.jpg)
@sitnikcode
Hackers, 1993
For next working day
@sitnikcode
❤️ Find your principles
❤️ Remove GDPR popup by using cookieless analytics
❤️ Reduce services with access to private data
🌟 Think of Local-First in next project
🤔 Think of other privacy risks if you make a social tool
Thanks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/10591486/evilmartians.png)
Privacy-first architecture (Short)
By Andrey Sitnik
Privacy-first architecture (Short)
- 1,765