Month: January 2017

The system-ui font

Imagine:

font-family: system-ui, sans-serif;

Enabled by default in Chrome 56, system-ui is a special font name, that tells Chrome to use the system font (be it Cantarell in Gnome, San Francisco in macOS, etc.)

But system-ui is something new, as far as I know available only in the latest versions of Blink based browsers. So what to do as of today? This is from Bootstrap 4:

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Safari and Firefox on Mac will recognize -apple-system and use the Mac system font, just as system-ui, but not standard. Then comes the standard system-ui, but only available in Chrome 56. Older versions of Chrome, on Mac only, will interpret the same with BlinkMacSystemFont. Now comes Segoe UI, unlike the first three this is a real font name, the one used in Windows since Windows Vista. Now comes: Roboto for Android, Helvetica Neue for some versions of macOS, and Arial for old Windows.

But, but, where is Gnome’s font, you insensitive clod?

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Helvetica Neue", Arial, Helvetica, sans-serif;

Ah that looks better, just added Oxygen for KDE, Ubuntu for.. (I let you guess this one), Cantarell for Gnome, and Helvetica because… well I don’t know why.

If you want, you can still add Droid Sans for old Android, Fira Sans for Firefox OS,  and maybe Lucida Grande for some old versions of macOS. Okey, the list is long but you only have to type it once. You can also define the list using @font-face

Make your own list, decide which platforms you don’t care about, and use it as default in your projects. But don’t be insensitive and include Cantarell in the list!

Of course, if your site tries to sell something or to send a message, and if you care enough, then consider choosing a nice font (adjust letter spacing bla bla). To make it short, maybe something like:

font-family: "My nice font", system-ui, sans-serif;

Check Font Squirrel

HTTP Strict Transport Security (hsts)

Just learned about HSTS and started using it. First let me explain HSTS with my own words.

Scenario without hsts:
  1. The user types the domain name in the URL bar without the protocol, such as “example.com”, and the browser automatically adds the “http://” prefix. This first request is vulnerable to Man In The Middle (MITM) attacks.
  2. The server replies with a redirection to the secure “https://example.com”. From the rest of the interaction communication is secure.
  3. The next day the user types again “example.com” in the URL bar. The browser sends again an insecure HTTP request.
Scenario with hsts:
  1. The user types the domain name in the URL bar without the protocol, such as “example.com”, and the browser automatically adds the “http://” prefix. This first request is vulnerable to Man In The Middle (MITM) attacks.
  2. The server replies with a redirection to the secure “https://example.com”. From the rest of the interaction communication is secure. And, the server adds the response header: 
    Strict-Transport-Security: max-age=31536000

    This response header instructs the browser to use HTTPS, and asks him to do so for the next 31.536.000 seconds (1 year).

  3. The next day, the user types again “example.com” in the URL bar. But, the browser remembers, and it uses HTTPS instead of HTTP. And will do so even if the user includes explicitly the prefix “http://example.com”.
Closing

So with HSTS the user will only be vulnerable the first time, and not every time she starts a session.

After learning this I have added support for HSTS to my Ansible role for Django deployment. See commit, and I encourage you to start using HSTS too.

Links:

Have a nice secure day!