NETWAYS Blog

Chrome, certificates and missing_subjectAltNames Part 2 of 1

von Tim Albert | Jun 7, 2017 | Security, Linux

Actually I wanted to cover this topic in the previous post, but somehow have missed it.
Using the mentioned one liner can lead to typos and/or some strange behaviour on the CA side, especially when using a Windows-CA.
To circumvent this issues, I mentioned „a specially designed *.conf file“ which I’d like to elaborate today.
Following steps are necessary:
Create a file „req.conf“ in etc/ssl/ (Ubuntu 14.04, pathes may vary) with the following content:

[req]
distinguished_name = req_distinguished_name
req_extensions = v3_req
prompt = no
[req_distinguished_name]
C = $YourTLD
ST = $YourState
L = $YourCity
O = $YourCompany
OU = $YourDepatment
CN = $YourCName (e.g. internal.company.tld)
[v3_req]
keyUsage = keyEncipherment, dataEncipherment
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
[alt_names]
DNS.1 = *.internal.company.tld
DNS.2 = internal.company.tld
DNS.3 = www.*.internal.company.tld

Essentially, these are the information provided by the „-subj section“ in last weeks one liner.
Now you can generate a key:

openssl genrsa -out internal.company.tld.key 4096

and use your new key and the req.conf file to generate a CSR, which, as usually can be fed into your local CA.

openssl req -new -out internal.company.tld.csr -key internal.company.de.key -config req.conf -sha256

This *.conf file can be used as a template for other C/altNames as well and is, in my eyes, more lucid than a one liner.

Tim Albert

Senior Systems Engineer

Tim kommt aus einem kleinen Ort zwischen Nürnberg und Ansbach, an der malerischen B14 gelegen. Er hat in Erlangen Lehramt und in Koblenz Informationsmanagement studiert. Seit Anfang 2016 ist er bei uns tätig. Zuerst im Managed Services Team, dort kümmerte Tim sich um Infrastrukturthemen und den internen Support, um dann 2019 - zusammen mit Marius - Gründungsmitglied der ITSM Abteilung zu werden. In seiner Freizeit engagiert sich Tim in der Freiwilligen Feuerwehr – als Maschinist und Atemschutzgeräteträger -, spielt im Laientheater Bauernschwänke und ist auch handwerklich ein absolutes Allroundtalent. Angefangen von Mauern hochziehen bis hin zur KNX-Verkabelung ist er jederzeit...

Lies mehr von Tim und triff unser Team

Chrome, certificates and missing_subjectAltNames

von Tim Albert | Mai 24, 2017 | Security, Windows, Betriebssysteme

Google has been actively trying to ensure certificate security especially in the last months.
Sometimes this created quite some buzz in the IT World, e.g. when Symantecs policies came into the focus.
Current version 58 of Google Chrome has again adjusted the certificate policy.
Certificates provide two ways to store hostnames: CommonName and SubjectAltName (SAN). RFC 2818 specified in 2000 that CommonName should be deprecated, which Chrome now complies to.
Other browsers are currently still accepting the CommonName, which is mostly used by selfsigned certificates, as in our case :/
Users who wanted to access our internal sites encountered error messages and were forced to use quick and dirty workarounds, such as using a Windows registry „hack“:
Open a cmd-Shell as Administrator and enter:
reg add \HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome /v EnableCommonNameFallbackForLocalAnchors /t REG_DWORD /d 1 /f
which reactivates the fallback to CommonName
As this is just a temporary „solution“, you should issue an RFC 2818 conform certificate. This can be realized by using a complete and compliant certificate signing request (CSR).
You can either use a specially designed *.conf File for this or simply adapt the following shell command:

openssl req -new-key endpoint.com.key -sha256 -nodes  -subj '/C=US/ST=New York/L=New York/O=End Point/OU=Hosting Team/CN=www.endpoint.com/
         emailAddress=administrative-not-existent-address@our-awesome-domain.com/
         subjectAltName=DNS.1=endpoint.com,
         DNS.2=usually-not-convered-domain.endpoint.com,
         DNS.3=multiple-domains-crt.endpoint.com' > www.endpoint.com.csr

The created csr can be fed e.g. into your local CA to issue new certificates which can be rolled out in your environment.

Live long and prosper and be RFC compliant 🙂

Tim Albert

Senior Systems Engineer

Lies mehr von Tim und triff unser Team

Fronted-Performance optimieren in Chrome – Like a Boss

von Florian Strohmaier | Mrz 31, 2016 | Development

Nicht nur Frontend Entwickler kennen es: Man freut sich, dass die hollywoodreifen Animationen auf der Webseite oder im User Interface endlich funktionieren. Ein raffinierter Parallax-Effekt verleiht dem Ganzen dann noch den letzten Schliff. Das Problem: Es ruckelt und hakt an allen Enden, die Lüfter seines nagelneuen Rechners fangen an zu drehen. Was tun?
Zum Glück bieten die Chrome-Developer Tools einige hilfreiche Werkzeuge an, um die Performancefresser zu identifizieren. Diese geben nicht nur einen guten Überblick über Performance-Engpässe sondern dokumentieren außerdem die Bildwiederholrate, CPU-Auslastung und das Asset-Handling.

Wo finde ich diese Tools nun?

Wer die Chrome Developer-Tools kennt, ist möglicherweise schon mal über das Timeline Tab gestolpert. Öffnet man die Ansicht das erste Mal, ist es nicht ganz unwahrscheinlich, dass man von der hohen Informationsdichte erschlagen ist. Daher soll dieser Artikel als eine Art Entry-Point für den Einstieg sein. Denn es lohnt sich.
Ist das Timeline-Tab bereits geöffnet und die Seite wird neu geladen, werden die Performance-Daten des initialen Seitenaufrufes bis zum fertigen Rendern der Seite automatisch aufgezeichnet.
Danach kann man einzelne Aufzeichnungen starten, um z.B. die Performance einzelner Interaktionen auf der Seite untersuchen zu können. Dabei sollte beachtet werden: Je kürzer die Aufnahme und je weniger Aktionen aufgezeichnet werden, desto einfacher ist die Analyse.

Überblick

Der Einstieg: Ein kurzer Überblick über die Oberfläche.

A) Bedienelemente

Die beiden linken Symbole dienen zum Starten und Stoppen der Aufzeichnung. Alternativ kann hierfür das Tastenkürzel cmd + E / Strg + E verwendet werden. Mit den Checkboxen können zusätzliche Informationen an/abgewählt werden, die dann entsprechend mit aufgezeichnet werden.

B) Überblick

Diese Ansicht bietet eine Übersicht über den Verlauf der Seiten-Performance. Sie dient außerdem als Navigation, um den aktuellen Bereich auszuwählen.

C) Flame-Chart

Hier werden die einzelnen Ereignisse und deren Dauer als horizontale Balken visualisiert. Parallele Ereignisse werden nach unten gestapelt. Der findige Beobachter erkennt hier drei unterschiedliche gefärbte vertikale gestrichelte Linien: die blaue Line stellt den DOMContentLoaded-Event dar. Die grüne Linie markiert den ersten Paint-Event und die rote den load Event.

D) Details

Ist kein Ereignis angewählt werden hier die Statistiken für Zeitraum aufgeführt, der in der Übersichtsansicht ausgewählt ist. Um die Anzeige auf ein Ereignis zu begrenzen, kann im Flame-Chart ein Ereignis ausgewählt werden.
In der Überblicksansicht kann man die Auswahl der Ereignisse eingrenzen in dem man die Regler verschiebt. Die Visualisierungen im Flame-Chart und dem Detailbereich passen sich entsprechend an und beziehen sich nur auf den ausgewählten Bereich.

Exkurs: Die typische Rendering-Pipeline

In der Regel gibt es fünf verschiedene Schritte bei der Frame-Berechnung, die bei der Entwicklung zu beachten sind. Über diese Bereiche hat der Entwickler die größte Kontrolle.

Javascript

Typischerweise werden Scriptaufrufe verwendet um Werte zu ändern, die dann in Änderungen der Darstellung resultieren. Das kann z.B. die animate Funktion in jQuery sein oder das Hinzufügen von DOM-Elementen. Diese Darstellungsänderungen werden nicht ausschließlich durch Javascript ausgelöst. Es können auch CSS-Animationen, Transistions, o.ä. dafür verantwortlich sein.

Style Calculations

In diesem Prozess findet der Browser heraus, welche CSS-Regeln anhand der Style-Angaben für welche Elemente angewandt werden müssen.

Layout

Darauf folgt in der üblicherweise die Berechnung der Positionen der jeweiligen Elemente und wie viel Platz diese benötigen. Das Layout-Modell des Webs ist so konzipiert, dass gewisse Abhängigkeiten der Elemente untereinander herrschen. Verändert ein Element, welches mit float positioniert ist seine Breite, beeinflusst es die Position und Größe der umliegenden Elemente.

Paint

Im Painting-Prozess werden die Pixel der einzelnen Elemente berechnet. Es berücksichtigt Eigenschaften wie Text, Farben, Bilder, Rahmen. Die Berechnung findet auf verschiedenen Ebenen (Layers) statt.

Composite

Nachdem Painting-Prozess sind die einzelnen Komponenten (Layers) der Seite bereits berechnet. Beim Compositing werden diese Komponenten dann übereinander gelegt. Besonders entscheidend ist dies bei überlappenden Elementen.

1. JS/CSS >Style > Layout > Paint > Composite

Wenn eine Eigenschaft eines Elements verändert wird, welche dessen Abmessungen oder Position verändert (z.B. height, width, top, left, o.ä, muss der Browser alle oder zumindest alle umliegenden Elemente neu berechnen und zusammengesetzt werden (Layout > Paint > Composite)

2. JS/CSS > Style > Paint > Composite

Werden nur Paint-only Eigenschaften geändert (background-image, color, box-shadow), kann der Browser den Layout-Prozess überspringen.

3. JS/CSS > Style > Composite

Wenn eine Eigenschaft verändert wird, bei denen der Layout und Painting-Prozess übersprungen werden kann, überspringt der Browser diese Schritte und springt direkt in den Compositiing-Prozess. Darunter fallen z.B. transform oder opacity.
Vor allem für performance-kritische Fälle, z.B. für Animationen oder bei Scroll-Events, bei denen die entsprechenden Funktionen in der Regel besonders oft aufgerufen werden, ist diese Variante besonders erstrebenswert.

Repaintbereiche auf der Seite visualisieren

Im DevTools Hauptmenü gibt es einen Eintrag mit der Bezeichnung More Tools nennt. Wählt man hier die Rendering Settings aus, erhält man weitere Funktionen. Ist die zusätzliche Leiste am unteren Bildschirmrand nicht sichtbar, kann man diese mit der Esc-Taste wieder erscheinen lassen.
Im Teilfenster am unteren Bildschirmrand befindet sich dann eine Check-Box mit dem Titel Enable paint flashing.

Über das DevTools Hauptmenü können weitere Tools eingeblendet werden.

Aktiviert man diese werden auf der Seite Bereiche markiert, bei denen Painting-Events auftreten. So erhält man in Echtzeit einen guten Überblick, welche Bereiche für mögliche Performance-Engpässe sorgen.

————
Es gibt einen Talk von Paul Irish, der mehrere Anwendungsbeispiele veranschaulicht.

Florian Strohmaier

Senior UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Lies mehr von Florian und triff unser Team

Weekly Snap: CSS & Chrome, Quickstatd & Graphite, Monitoring & CERN

von Amanda Mailer | Aug 12, 2013 | WeeklySnap

5 – 9 August was a brief week of developer and sys admin tips plus a look at monitoring in an organisation with 3000+ servers and a Large Hadron Collider.
Eva began by counting 78 days to the OSMC with Christophe Haen’s presentation on Monitoring at CERN.
Jannis played with Chrome developer tools for CSS and Sebastian ended the week with his discovery of Quickstatd and Graphite for near real-time performance graphs.

Chrome Devtools: CSS Helfer

von Jannis Mosshammer | Aug 7, 2013 | Development

Wer kennt das nicht: Man baut ein wenig an einer HTML Seite/Webanwendung (wohlmöglich einer, die man nicht selbst entwickelt hat) herum und möchte das Styling eines Elementes anpassen. Doch egal was man macht und wie laut man brüllt: Der Browser übernimmt die Änderungen einfach nicht. Grund sind meist irgendwelche zusätzliche CSS Regeln die die eigenen Überscheiben, oder sonstiger CSS Voodoo der (scheinbar) keinen Sinn ergibt.
Oft rutscht man dabei in ein iteratives Try & Error Prinzip:

CSS Anpassen
Seite neu aufrufen
Fluchen
CSS Anpassen
…

Spätestens ab Punkt 4. sollte man merken, dass hier etwas Ineffizient ist. Tools wie die eingebaute Entwicklerkonsole im Chrome können hier den totalen Nervenzusammenbruch (ungefähr bei der zehnten Iteration) verhindern. Natürlich gibt es ähnliche Features auch für die anderen Browser. Die Chrome Entwicklertools sind meiner Meinung nach nur am umfangreichsten und effizientesten, darum gehe ich hier nicht auf andere Tools ein.
Ruft man die Tools auf (Ctrl-Shift-i, Cmd-Shift-I (Mac) oder Tools->Developer tools) und geht in den Elements Dialog, begrüßt einen folgendes Fenster (hier habe ich eine Seite des W3C CSS Tutorials aufgerufen) :

Developer tools

Während die linke Seite den aktuell gerenderten DOM Baum anzeigt (also mit dynamisch hinzugefügten/geänderten Elementen) gibt die rechte Spalte Auskunft über das aktuelle ausgewählte Element (CSS Regeln, Maße, Eventlistener, etc).

Das ‚Computed style‘ Feld zeigt alle Regeln, die angewendet werden

Interessant für die CSS-Fehlersuche sind eigentlich nur die ersten drei Sektionen :

Computed Style gibt an, welche Regeln für dieses Element letztenendes wirklich angewendet werden, also in das Rendering einfliessen
Style gibt an, welche Regeln im ’style=‘ Attribut des Objektes hinterlegt sind
Matched CSS Rules zeigt alle CSS-Regeln und deren Quelldateien an, die für den aktuellen Knoten gelten. Dabei ist die Reihenfolge gleich der CSS Hierarchie, d.h.
weiter oben liegende Regeln unterschreiben die generischen Regeln aus der Ebene darunter (Ausnahme: Regeln mit !important)

Sollte etwas nicht gehen muss der Blick zuerst auf die Computed Style Sektion gehen: Ist meine Regel hier vorhanden?
Wenn ja sollte die Regel überprüft werden: Passt das CSS auf das angegebene Element? Gibt es spezielle Bedingungen für die Regel? Passt der Kontext (z.B. bei Problemen mit float, hier müssen auch andere Knoten berücksichtigt werden).
Wenn die Regel nicht im Computed Style steht, kann man in dem Matched CSS Rules Feld hoffentlich sehen warum das so ist:

Kein tingting.mp3 für mich – nicht unterstützte Regeln zeigt Chrome netterweise an

Erscheint die Regel nicht ist das CSS schlicht und ergreifend nicht korrekt (ist das CSS geladen? Passt die CSS Query auf den Knoten?)
Erscheint die Regel, jedoch durchgestrichen, lohnt sich ein Blick auf das gelbe Ausrufezeichen: Dann ist die Regel entweder invalide (hat z.b. einen Tippfehler) oder wird nicht unterstützt.
Ist die Regel vorhanden, aber der Wert im Computed Style ein anderer, sollte man schauen ob die Regel irgendwo überschrieben wird: Gibt es Regeln die über der eigenen liegen? Ist die Regel mit !important definiert?

Zum Experimentieren ausserdem sehr nett: Click man auf eine Regel kann man neue Attribute hinzufügen oder bestehende Attribute verändern. Chrome greift einem mit den Eigenschaften und Werten ein wenig unter die Arme. Kleinere CSS Experimente oder Wertänderungen kann man so direkt im Browser ausprobieren.
Man darf aber nicht vergessen dass einem die Tools nur helfen können Fehler zu finden – ein Blick in die Doku sollte bei Problemen immer als erstes Erfolgen. Wer nicht weiß, was sein CSS bewirkt wird auch mit den besten Tools nicht weit kommen (spätestens wenn ein anderer Browser das Dokument anders rendert).

« Ältere Einträge