This site is now available on Tor , an anonymization overlay network for TCP. You can access the site from the onion URL using Tor Browser.

I've always thought Tor was a fun testing ground for running a site, because you are challenged to make it work well with really slow network traffic, so it's important to have a site that is served quickly and is small in size. Also, it's important to know the site works well without Javascript since a lot of Tor users have javascript disabled.

I've added some Tor only style changes to the site, but they're enabled by using Javascript to check the hostname for an onion TLD. There are other ways I could do this but I don't think the small changes are important enough to bother.

You should also be able to see a button within the standard Tor Browser that will open the onion location! This is thanks to the Onion-Location header

Configuring nginx

I have one server stanza that listens over network ports, for routing internet traffic:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

server {
	listen 192.168.1.2:80 http2;
	listen 192.168.1.2:443 ssl;
 	listen 192.168.1.2:443 quic;

	server_name blog.cumpig.love;
	root /var/www/html-blog;
	index index.htm index.html index.php;

	# use http3
	add_header Alt-Svc 'h3=":443"; ma=86400';
	# advertise hidden service
	add_header Onion-Location http://yslonhwioyfvnfwgvapld7or4mqnsiszz6obqxacquy35l7o5a4fmrid.onion$request_uri;

	access_log /var/log/nginx/blog.cumpig.love_access.log quic;

	# access_log off;
	error_log /var/log/nginx/blog.cumpig.love_error.log;

	proxy_set_header   Host              $host;
	proxy_set_header   X-Real-IP         $remote_addr;
	proxy_set_header   X-Forwarded-Proto https;
	proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;

	ssl_certificate /etc/letsencrypt/live/blog.cumpig.love/fullchain.pem; # managed by Certbot
	ssl_certificate_key /etc/letsencrypt/live/blog.cumpig.love/privkey.pem; # managed by Certbot
	include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
	ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

	location ~ \.php$ {
		include snippets/fastcgi-php.conf;
		fastcgi_pass unix:/run/php/php-fpm.sock;
	}

}

For handling hidden service traffic, I describe a server listening on a unix socket

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

server {
	listen unix:/run/blog.sock;

	set_real_ip_from unix:;
	real_ip_header X-Real-IP;
	index index.htm index.html index.php;

	server_name yslonhwioyfvnfwgvapld7or4mqnsiszz6obqxacquy35l7o5a4fmrid.onion;
	root /var/www/html-blog;

	location ~ \.php$ {
		include snippets/fastcgi-php.conf;
		fastcgi_pass unix:/run/php/php-fpm.sock;
	}
}

Notice this block doesn't describe the Onion-Location header, because all traffic through this socket will be via Tor, it is unnecessary.

Then, in the torrc configuration file, we can redirect traffic the hidden service to the socket by adding these lines

HiddenServiceDir /var/lib/tor/blog
HiddenServicePort 80 unix:/run/blog.sock

While I also have a server block that listens on networks to serve the same files, this way I can separate the traffic. This is also a great approach if you want to host a site on Tor that is not exposed to the public web, to utilize unix sockets. There's also less overhead when reading and writing to sockets than network ports!

Custom styles for Tor users

To add a little 'whimsy', i've added some custom stylings for people using Tor.

To do this, I wrote a little javascript, which, I know is frowned upon by many Tor users:

1
2
3
4

const isTor = window.location.hostname.endsWith(".onion");
if (isTor) {
    document.documentElement.classList.add("onion");
};

This adds an onion class to the html root element, and then I can create any CSS styles with this in mind. For example, I've got a small notice in the footer that says "You are connected via Tor!" which should only be shown if the 'onion' class is present on HTML, or I have changed a color variable for the header text to be a different color:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.tor-notice {
  opacity: 0;
  pointer-events: none;
}

.onion .tor-notice {
  display: inline-flex;
  opacity: 1;
}

.onion {
  --header-text: rgb(196, 53, 172);
}

I can combine .onion with any other class present in the markup, and style it differently with this method.

not using javascript

A better goal would be to do this without utilizing javascript. I've thought of a couple ways that seem too tedious to bother for now on this low traffic blog. I thought maybe I could somehow utilize PHP to generate the HTML tag to have this class or not based on the request information, but I don't know how that works with Hugo, and also adds more reliance on a technology. So far, this site only uses PHP for some OAuth type things, but none of that is necessary to run the blog. If I did this, i'd need PHP just to run the blog, which is annoying. So I will pass.

The other thing that I could do, is generate 2 versions of the blog, one with Onion styles and one without, by expanding the build steps. This also seems unnecessarily tedious.

So, for now, I will use javascript. It's enabled by default in the standard Tor browser anyway.