Analyzing bundle size

When an Angular application is build for production (ng build –prod), the CLI build creates multiples bundles in the dist folder. Source-map-explorer is a tool to figure out what libraries make the size of these bundles. First it has to be installed:

npm i -g source-map-explorer

Then, a production build can be performed with the sourcemaps flag set to true:

ng build —-prod —-sourcemaps=true

As soon as the build has finished, source-maps can be shown in a web browser as follows:

source-map-explorer bundle-name.js

It will display something like that:

Capture

Werbung

Image services

I just want to briefly list some helpful links to image services that I came across the other day.

Flaticon: https://www.flaticon.com/

Flaticon is the largest search engine of free icons in the world.

Giphy: https://giphy.com/

Giphy is a website that provides lots of gifs. There also exists a public API that allows to search for gifs and embed their url in your website.

Public API: http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&limit=1&q=yourSearchTerm

Placeimg: https://placeimg.com/

Placeimg provides placeholder images for your project in progress. Custom URLs generate placeholder pictures in various sizes with categories and effects.

Certificates and OpenSSL

Basics

SSL creates an encrypted connection between your web server and your visitors‘ web browser. It is critical for protecting sensitive information such as a credit card numbers, banking details, passwords etc.

SSL provides confidentiality and integrity.  Confidentiality means message privacy. No one other than the intended recipient can read the message. Integrity means that message can not be changed. SSL provides data integrity by calculating a message digest.

SSL uses asymmetric cryptography, also know as public key cryptography. It uses a key pair, known as public and private key. Private keys are never shared and must be kept private. Public keys are freely available. The principle of those key is as follows: Anything encrypted with the public key, can be decrypted with the matching private key. And anything encrypted with the private key, can be decrypted with the matching public key.  The picture below explains the asymmetric cryptography. Since asymmetric encryption is slower than symmetric, it is often only used to initiate a session to exchange a symmetric key. As soon as the symmetric key is available for the sender and receiver, it switches to this algorithm.

ssl_handling1

ssl_handling2

Note that when talking about certificates in the context of SSL, public keys are meant!

OpenSSL is a SSL toolkit. It allows to create and manage SSL certificates, keys and all other things. I highly recommend this tool when working with SSL. It can be downloaded here: https://www.heise.de/download/product/win32-openssl-47316/download

In the following, I will not dig deeper into the basics of SSL. Lots of information can be found on the internet. Instead I will list some practical aspects working with OpenSSL.

Creating a self-signed certificate

Creating a self-signed certificate with openssl is done as follows:

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out certificate.pem -days 365

If you don’t want to protect your private key with a passphrase, you can also add -nodes , otherwise it will prompt you for „at least a 4 character“ password. You specify the expiration date by the days parameter.

You can review the certificate as follows:

openssl x509 -text -noout -in certificate.pem

If you want to combine your private key and certificate in a PKCS#12 (P12) bundle, do it as follows:

openssl pkcs12 -inkey key.pem -in certificate.pem -export -out certificate.p12

This will prompt you for an export password. Just press enter, if you want no password set.

At last, you can validate your P12 file:

openssl pkcs12 -in certificate.p12 -noout -info

or display the public and the private key:

openssl pkcs12 -in certificate.p12 -info

Important note: In order to show the bundle content (public and private key), you first enter the bundle password. Then you are prompted for a private key password. Here you can enter anything, it does not check this password! If you are using a jks instead of a pkcs bundle, you have to enter the correct private key password. These two bundle formats behave differently.

Some other useful commands

Certificates can be verified as follows:

openssl verify certificate.pem

A connection with a certificate can be tested as follows:

openssl s_client -CAfile com.pem -connect my-ldap-server.com:636

Keytool and Keystore

Java Keytool is a key and certificate management tool that is used to manipulate Java Keystores, and is included with Java. A Java Keystore is a container for authorization certificates or public key certificates. A good summary is given here: https://www.digitalocean.com/community/tutorials/java-keytool-essentials-working-with-java-keystores

Both, OpenSSL and Keytool are crypto key generation tools, but keytool has the additional feature of manipulating Java’s preferred key storage file format, the Keystore. Java strongly prefers to work with keys and certificates that are stored in a Keystore (also called a TrustStore when it’s only got certificates in it). It is possible, but not trivial, to get Java to work with straightforward PEM/CER/CRT/PKCS/etc files, so for all intents and purposes if you’re coding crypto in Java you’re going to use a Keystore.

To list all certificates in the Keystore, execute this command:

keytool -list -keystore "C:Program Files\jre\lib\security\cacerts" -storepass changeit

Certificates can be imported in the keystore as follows (Note this commands need admin privileges):

keytool -importcert -keystore "C:Program Files\jre\lib\security\cacerts" -storepass changeit -trustcacerts -file certificates.der

Certificate Conversion

There are lots of certificate types and even more endings. A good overview is given here:

https://www.sslshopper.com/ssl-converter.html

It further provides a handy, graphical SSL converter. All this conversion can also be done with OpenSSL as listed on this page.