Verslag thema-avond JUG Heerenveen 8 januari 2019

‘HTTP Security headers’ en ‘Mini font Awesome en webfonts in base64’

HTTP Security headers

De presentatie van Eric (Beernink) heeft als titel ‘HTTP Security headers’ en gaat over het (nog beter) beveiligen met HTTP-Security Headers. Eric begint met een uitleg van het begrip Security headers. Bij het scannen op security headers op een Joomla site krijg je een F rating. Met enkele kleine ingrepen kun je op een A+ rating uitkomen (mits je hosting dit ondersteunt). Met behulp van de website https://securityheaders.com is de score te achterhalen van een website op het toepassen van security headers.

HTTP is het protocol dat de communicatie regelt tussen de webbrowser en de webserver. Bij deze communicatie worden er ook ‘Headers’ meegezonden. Deze headers bevatten veel informatie over de onderliggende systemen (o.a. welke scripttaal wordt gebruikt).

Door middel van security headers kun je o.a. onnodige info verbergen, Die onnodige info kan door een hacker misbruikt worden om de webserver te hacken.

Content Security Policy is een nieuwe standaard, die het mogelijk maakt om beperkingen te definiëren.

Er komen de nodige technische termen voorbij. Deze zijn (inclusief uitleg) terug te lezen in de presentatie. Ook bevat de presentatie de nodige linkjes. Alle besproken opties worden in de .HTACCESS opgegeven / ingesteld.

De instellingen zijn via Admin Tools Pro in te stellen; ‘HSTS-Header (for HTTPS only sites)’ dient bij localhost gebruik, waar geen certificaat en https wordt gebruikt, uitgeschakeld te zijn.

Eric adviseert om deze security-headers te combineren met Admin Tools Pro voor een zo optimaal mogelijke beveiliging van een website. De in te stellen opties staan beschreven / opgesomd in de presentatie. Niet elke security header werkt bij elk type browser.

De A+ rating is in ieder geval een goede indicatie dat er is nagedacht over de beveiliging van een website.

 

Mini font Awesome en webfonts in base64

Na de pauze neemt Benno het stokje over met zijn presentatie ‘Mini font Awesome en webfonts in base64’. Vorige maand heeft Benno de presentatie ‘Nieuwe CSS3-features en Firefox CSS-editors’ gegeven, door tijdgebrek is het gebruik van font Awesome (iconfont) en webfonts beperkt aan bod gekomen.

De presentatie van Benno sluit aan op zijn presentatie van vorige maand.

Benno geeft een uitleg van het gebruik van een Icon-font, zo heeft Joomla de beschikking over het IcoMoon font.

• Fonts zijn in meerdere bestandssoorten beschikbaar (o.a. bij Windows heb je de TTF- fonts); de fonts kunnen op verschillende manieren zijn opgeslagen. De WOFF bestanden zijn efficiënter (in omvang) dan de SVG, TTF en EOT bestanden. We gaan aan de slag met WOFF en WOFF2 font bestanden.
  WOFF is doorontwikkeld tot WOFF2 en is het kleinste bestand.
  Bijna alle moderne browsers ondersteunen inmiddels het WOFF2-formaat.
• Een icon-font is een karakter in de vorm van een tekening ter vervanging van een image (jpeg, png, gif) en is een vector-bestand (haarscherp vergroten/verkleinen). Een nadeel is dat er maar 1 kleur beschikbaar is.
  Op CSS-tricks.com kun je de mogelijkheden van het instellen van kleur, size en 3d-effecten uitproberen.
• Elke browser had voorheen eigen voorkeur voor bestandstypen (EOT, SVG, TTF, etc). Momenteel zijn WOFF en WOFF2 alleen nog de te gebruiken bestandstypen.
• icons in Joomla:
  • ../media/jui (joomla user interface)/fonts: waaronder icoMoons in verschillende de bestandstypen.
• icons en css-bestanden in Masterbootstrap, bijvoorbeeld:
  • ../template/masterbootstrap/fonts/fontawesome-webfont.woff2 (63kB)
  • ../template/masterbootstrap/fonts/ glyphicons-halflings-regular.woff2 (17kB)
  • ../template/masterbootstrap/css/font-awesome.css (18kB)
• In de css wordt met de @font-face{…} rule bepaald welke webfonts opgehaald moeten worden. De browser bepaalt zelf welk font (.woff of .woff2) opgehaald moet worden (server-request).

Fontello.com:

Op de site fontello.com zijn diverse iconFonts beschikbaar. Als voorbeeld haalt Benno het font-awesome aan; het font bestand en het bijbehorende css bestand zijn samen ruim 80k in omvang.

• tabblad ‘Select Icons’: heel veel vrij te gebruiken icons beschikbaar van diverse ‘merken‘. Klik op de gewenste icons (mixture van meerdere ‘fonts’ mogelijk). Ook is het mogelijk via ‘drag and drop’ aan de beschikbare fonts ook bijvoorbeeld het icoMoon font toe te voegen (.svg-fontbestand) toe te voegen. De geselecteerde icons zijn zichtbaar op:
• tabblad ‘Customize Names’: Als er icons via ‘drag and drop’ zijn toegevoegd krijgen die individuele iconen (karakters) allemaal de naam ‘glyph’; je zult dus de naam van de geselecteerde iconen moeten wijzigen.
• icoontje ‘steeksteutel’: evt. CSS prefix wijzigen. De ‘Advanced font settings…’ z.n. aanpassen, maar hoeft niet.
• Geef het nieuwe, zelf samengestelde, font een naam bij 'font name'.
• Klik op ‘Download webfonts’ en de fonts worden gecomprimeerd gedownload (zip). De map bevat de icons in de bestandstypen EOT, SVG, TTF, WOFF en WOFF2 met de daarbij behorende css.bestanden. Vervolgens moet je het bestand lokaal uitgepakken. Het zipbestand bevat bevat een demo.html en een css- en fontmap. De demo.html bevat de inline-css die verwijst naar de fonts.
• Mocht je op een later moment het font willen uitbreiden met extra iconen, dan kun je op de fontello.com website klikken op het icoontje ‘steeksteutel’ en vervolgens voor import. Je kunt het oorspronkelijke zipbestand of het uitgepakte 'config.json' kiezen. Vervolgens kun je de set met iconen wijzigen. Mogelijk moet je wel de zelf geuploade icons, zoals bijvoorbeeld het Icomoon font opnieuw uploaden.

base64 codering

Het opnemen van een base64 encoded font (fontbestand geconverteerd naar tekst) rechtstreeks in het CSS-bestand scheelt het laden van een apart font-bestand. Hierdoor vermindert weer het aantal server-requests.

• Het in de fontmap WOFF2-bestand wordt omgezet naar een base64-codering. Benno gebruikt hiervoor het windowsprogramma ‘Binary Viewer’ (Windows) (het font inlezen en opslaan als txt-type).
  Het alternatief is online converteren via fontsquirrel.com/generator. Hier wordt het TTF-bestand als basis gebruikt (geupload), dit vergt echter wel de nodige extra instellingen. Pas onderstaande instellingen toe en houd de rest ongewijzigd.
  • upload het TTF-bestand
  • klik ‘Expert…’ aan
  • Font Formats: WOFF en WOFF2
  • Truetype hinting: keep existing
  • Protecting: WebOnly
  • Subsetting: Custom Subsetting, helemaal leeg laten
  • CSS: base64 Encode
  • Advanced Options: Font Name Suffix: verwijder '-webfont'
  • Shortcuts: Aanvinken 'Remember my settings'
  • Agreement: yes
  • Download your kit
• In de embedded.css worden de beide @font-face-codes vervangen door de @font-face uit de stylesheet van webfontkit: de tekst plakken op de regel van het base64 WOFF-font (WOFF wijzigen naar WOFF2) en we verwijderen de regel van het True Type Font.
  Zorg wel dat je alleen het WOFF2 als base64 encoded tekst opneemt. De verwijzing naar het .woff bestand gaat gewoon per URL.

Let op: plaats de @font-face rules en de bijbehorende CSS altijd bovenaan een template.css. Het fontbestand is dan gelijk beschikbaar voor de browser.

Relevante link(s):

https://securityheaders.com
//fontello.com/
https://fontsquirrel.com

Al met al weer een interessante en leerzame avond!

Verslag door Frits Schippers en Reina Wijnbergen