4

I am making a site with privacy as one of its main topics. Subsequently, we want to make privacy a concern, by minimizing privacy violations for visitors of my site. (In this crazy world that is the best we can do, minimize). We need to add social media buttons (intent buttons like tweet intent) so visitors can share articles with others. Simply not placing those buttons at all is not an option, no one converts the world by ignoring everything which doesn't fit in their ideals. We simply do need ways to for people to share articles. But how might I minimize the impact of adding social media buttons to our website?

For the icons and fonts we only use self hosted sources. But of course the URL in that share button will point to the domain of a social media platform. As a webmaster, is there anything more I can do to prevent prefetching of the URL?

Of course the browser eventually makes the decision to prefetch or not, but how can I discourage that browser to the best of my abilities?

One idea we have is to point all social media buttons to one specialized page within our own site, which than redirects from there to the external site. The idea would be that the external site would always get called from the same page, and thus would not be prefeteched by visitors whom never pressed the share button. Would that actually help, or do browsers prefetch that external page anyway? Would redirecting like that have significant downsides?

So what options do I have to protect visitors of my website against tracking, without significantly limiting the impact my website can have? (assuming prefetching is the main concern when it comes to tracking)

1

3 Answers 3

4

The buttons themselves don't need to be loaded from the social site at all. For example, both Facebook and Twitter let you simply open a window with a special URL, which shows a "New post" window with your page's URL already filled in.

For Facebook, the documented URL appears to be:

https://www.facebook.com/dialog/share?app_id=<APPID>&display=popup&href=<URL>

or the older

https://www.facebook.com/sharer/sharer.php?u=<URL>

For Twitter, you can use:

https://twitter.com/intent/tweet?text=<URL_or_other_stuff>

Another method, which I've seen in various places but unfortunately isn't very googlable, is to delay putting the actual social-button code on your page. Instead, you create your own buttons which when clicked insert the Facebook JavaScript into the page (and remove themselves, so that the new button is in the same place).

1
  • 1
    We stopped including AddThis when creating new sites and switched to simple links like these with an icon of the website. Look at sharingbuttons.io for more examples.
    – ZippyV
    Commented Sep 12, 2018 at 19:00
2

I don't think this happens like you think it does...

From your description, it sounds like you're expecting browsers to just follow URLs to preload whole pages - but from what I know it's a lot more explicit than that...

The "Prefetching, preloading, prebrowsing" article on CSS-Tricks goes some way to dispel your presumptions.

The wiki page on "Link Prefetching" backs this up:

Prefetching is accomplished through hints in web pages

If we had browsers randomly following URLs, then all sorts of things would start to break down - up/down vote buttons would be "clicked", views on other pages would rack up just by a user viewing one other page, etc...

Also, remember that most of these are "hints" anyway, and browsers don't have to follow them.


If you are concerned about using resources from another server, then the simple answer is "don't".

Facebook / Twitter / Youtube / etc... will provide a snippet that you can drop into your pages to "magically" get the functionality... You'll want to avoid this, where possible. Instead, interface with their public APIs upon explicit user interaction (see @grawity's answer).


DNS prefetching

This requests that the browser query a DNS record now in order to reduce load times later.

It requires HTML in the <head> section:

<link rel="dns-prefetch" href="//example.com">

Preconnect

Allows the browser to make a TCP connection and complete the TLS negotiation ready for use (think HTTP/2 and multi-use connections / pipelining):

It requires HTML in the <head> section:

<link rel="preconnect" href="http://css-tricks.com">

Prefetching and Preloading

Retrieves a specific resource, ready for use - probably holding it in the browser's cache - think images for a slideshow, etc... Preloading is a must, while Prefetching is a hint.

They require HTML in the <head> section:

<link rel="prefetch" href="image.png">
<link rel="preload" href="image.png">

Prerendering pages

Loads an entire page - along with all assets and dependancies. Think those "20 things you'd never expect from X" sequence of pages...

It requires HTML in the <head> section:

<link rel="prerender" href="http://css-tricks.com">

All browsers are different, and they are constantly evolving...

DNS prefetch is a simple thing to do, which doesn't leak your intent to the web server, but it does query the user's DNS server... so if that's of concern to you, then the X-DNS-Prefetch-Control header you've identified may be useful... but don't forget to look at the browser compatibility - IE, Edge and Safari might not play nice.

Chrome does quite a bit to anticipate the user's intentions, as outlined in this great slide deck.


Ultimately, the best option for privacy is a browser extension (which the user would have to install) - there isn't a huge amount you can do to restrict the browser's actions as a website.

2
  • "it sounds like you're expecting browsers to just follow URLs to preload whole pages" -- many social sites expect you to generate buttons via JS or iframes embedded straight from the site, instead of using a passive link, which is where that expectation comes from.
    – user1686
    Commented Sep 10, 2018 at 11:19
  • Good point, thanks. I've added a section and pointed at your answer.
    – Attie
    Commented Sep 10, 2018 at 11:45
2

As an alternative to "rolling you own" sharing buttons you could use the shariff library. It's goal is maximum privacy:

https://github.com/heiseonline/shariff

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.