mosra / m.css

A no-nonsense, no-JavaScript CSS framework, site and documentation theme for content-oriented websites
https://mcss.mosra.cz
Other
406 stars 92 forks source link

Referrer policy for Google Fonts; encourage hosting the fonts instead #152

Open gsauthof opened 4 years ago

gsauthof commented 4 years ago

Following the basic pelican setup one ends up with this configuration item:

M_CSS_FILES = ['https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i%7CSource+Code+Pro:400,400i,600',
               '/static/m-dark.css']

With that setup, a visitor's browser is sending the currently visited page URL to Google in the Referer: request header for each font CSS request.

Thus, in the spirit of protecting personal data it would be nice if the theme would add referrerpolicy="no-referrer" in the generated html link tags.

Example:

<link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i%7CSource+Code+Pro:400,400i,600"
        referrerpolicy="no-referrer"/>

Of course, for local CSS files the standard referrer policy still makes sense.

mosra commented 2 years ago

(Sorry for an embarrassingly late reply, finally got a chance to get back to the project.)

Good point, the less tracking the better.

I'm not yet sure how to expose this option (e.g., for local files or files on own domains it probably won't make sense), might also be useful in general for any/all <a>, <img> and others, not just CSS links. Might sound crazy but could be quite doable with the flexibility Docutils provide.

Maybe an option that whitelists domains for which referrerpolicy would be <some nice value>, and defaulting to no-referrer for everything else (or just explicitly setting the referrerpolicy for each domain?); and if the option is not present at all it'd not add the referrerpolicy attribute at all.

egberts commented 2 years ago

What I do is host the fonts, just to cut down on excess link meta data going elsewhere.

gsauthof commented 2 years ago

@mosra, I think it's ok to unconditionally add the no-referrer attribute to full CSS URLs. Since they are usually 3rd party ones, in 99.9 % of the cases or so.

Sure, one could add options for additional referrerpolicy management, for other links, later on.

What I did is this: I overrode some template and changed the base template like this:

<link rel="stylesheet" href="{{ href|format_siteurl|e }}" {% if href.startswith('http') %}referrerpolicy="no-referrer"{% endif %}/>

@egberts Yes, this solves the issue, as well. And actually it makes more sense.

At that time I had the understanding that one big advantage of using a popular CDN (such as Google) for font delivery is this: The font you are requesting very likely is already cached because some other sites you previously accessed used the same font files!

But this isn't true (anymore, for some time). Modern browsers are partitioning their cache to protect users from cache-side-channel based tracking/identification.

So using a CDN only has one advantage: it saves you some bandwidth. Disadvantages are likely higher latency, referrer based tracking and a requirement for a more permissive Content-Security-Policy header.

Thus, I recently also switched to locally hosting the font files (I followed this answer).