Due to the latest changes in the GDPR I stumbled upon some topics and issues people where facing while trying to make their website compliant to the new demands. This brought me to this little tutorial on how to make your website more secure and less sniffing.
Not all of the topics will be GDPR-related as this is NOT another „how to make your website GDPR compliant“-article. However this is a collection of different things you, as a web Developer or Administrator of for example a wordpress site should be aware of. Basically it’s a „How to not fuck around with the security of your users“.
A lot of People use „Google Fonts“ in their website. So do the most wordpress themes. This is not a bad idead by default. The problem is that you cannot be sure every user has the Font you are using installed. So if you use Arial as a default Font and someone doesn’t have this font installed on his computer – no text can be displayed. This is not exactly right, because every web browser provides a default Font it falls back to in such cases. So the website is just not displayed with the Font you would want it to, but with a Fallback-Font. To ensure everyone can see it with the same Font you can use Google Fonts where the Fonts are loaded directly from Google.
The Problem: With every visit the IP Adress of the user gets transported to Google. So in fact they can track every user uniquely over every site where Google Fonts are used. This is bad and you shouldn’t be part of that problem.
The Solution: If you are a web Developer please consider providing the Font as a TTF File as described here.
If you use wordpress, Google Fonts are very likely to be used by your theme. To verfiy this, you can run the following Linux Command in your wordpress root Folder:
grep -ir "fonts.googleapis" .
If you get any results Google Fonts are used by one of your themes. The normal way to load them under wordpress is via the following PHP function:
wp_enqueue_style( 'Gfonts', 'https://fonts.googleapis.com/css?family=Alegreya+Sans:300,regular,italic,500,700|Roboto:300,300italic,regular,italic,500,700', array(), true );
The values may differ in your case but the URL for Google Fonts is the important part. To disable this function just put a # before this specific line in every PHP file found by the grep command above. You can ensure you did this for every line by running
grep -ir "fonts.googleapis" . | grep -iv "#"
If you don’t get any result you sucessfully removed Google Fonts from your website. Please remember to have a look on your website if it still looks good.
When you click a link, your browser will typically send the HTTP referer header to the webserver where the destination webpage is at. The header contains the full URL of the page you came from. This lets sites see where traffic comes from. The header is also sent when external resources (such as images, fonts, JS and CSS) are loaded.
The Problem: if you link to an external site, this site can track the movement of your users as soon as they visit another page which links to them. In combination with cookies this is one of the most useful tracking possibilities out there. In fact you should not imagine the scenario as the tracking by one single page but by a tracking network consisting of hundreds of thousands of pages where it is really likely that one of the other websites of such a network will be called by the same user. Also think of facebook buttons on a website. As soon as a logged in facebook user visits a site with a facebook button (which, by it’s nature, refers to facebook), facebook knows that you visited this exact page.
The Solution: A great invention called „Referrer Policy“ gives you the posibilitie to prevent the transfer of such data to other sites. This is not just for clicked links but also for other referres such as linked images, etc.
You should have a look at the different policies. However I recommend to use no-referrer which disables the referrer Header completly. To do so add the following meta tag to the header.php of your wordpress theme or your normal HTML Header:
<meta name='referrer' content='no-referrer'>
Also you can use this wordpress plugin.
This part focuses on the security of your website. We want to prevent XSS, MIME-sniffing of the content type and framing of the website. We use the following Header options for this purpose:
Strict-Transport-Security
X-Content-Type-Options
X-Frame-Options
X-XSS-Protection
Here is a complete .htaccess file with all the Headers set:
Header set X-XSS-Protection "1; mode=block"
Header always append X-Frame-Options SAMEORIGIN
Header set X-Content-Type-Options nosniff
Header set Strict-Transport-Security: max-age=15768000
Just place the .htaccess File in your webroot or appent the code above into any existing .htaccess File. Please note that you need to enable the apache module mod_headers to make this work.
You can ensure the changes worked via curl:
$ curl -I URL
HTTP/1.1 200 OK
Date: Thu, 24 May 2018 19:05:14 GMT
Server: Apache/2.2.15 (CentOS)
X-Powered-By: PHP/7.2.0
X-Robots-Tag: noindex
X-Content-Type-Options: nosniff
Access-Control-Expose-Headers: X-WP-Total, X-WP-TotalPages
Access-Control-Allow-Headers: Authorization, Content-Type
Allow: GET
Strict-Transport-Security: max-age=15768000
X-Frame-Options: DENY
X-Xss-Protection: 1; mode=block
Connection: close
Content-Type: application/json; charset=UTF-8
I shouldn’t need to say much about SSL and the need of an encrypted website. Since letsencrypt launched you have no excuse for not having a valid SSL Certificate. What you should do is to enforce the use of https even if someone acesses the website unencrypted. This can be done in the .htaccess file:
RewriteEngine on
RewriteCond %{HTTPS} !=on
RewriteCond %{ENV:HTTPS} !=on
RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]
While doing this you also should ensure that you’re only linking to sources such as images, etc. via https.