Attach payload into detached pkcs#7 signature

If you are doing signature generation via a hardware token (for instance 3Skey) then, for large files it is impractical to send the file to the hardware token. Instead you send a hash (SHA256), get a detached PKCS#7 signature and you need to re-attach the payload in java code. For once this was easier to do with plain JCE code instead of my favorite BouncyCastle provider. However for really large files BC does provide the streaming mechanism required.

Of course the best commands to use to help debug the code bellow are:

Verify pkcs#7 signature

#the -noverify means do not verify the certificate chain, this will only verify the signature not the originating certificate
openssl smime -inform DER -verify -noverify -in signature.p7s


openssl recipes

These last days I had to tinker with openssl a lot and this is a short memory reminder of the params.

PKCS#7 manipulation

Verify pkcs#7 signature

#the -noverify means do not verify the certificate chain, this will only verify the signature not the originating certificate
openssl smime -inform DER -verify -noverify -in signature.p7s

Show the structure of the file (applies to all DER files)

#for debuging
openssl asn1parse -inform DER -i -in signature.p7s

Extract certificate and public key

openssl pkcs7 -inform DER -in signature.p7s -print_certs > certificate.crt
openssl x509 -in certificate.crt -noout -pubkey > pubKey.key

JKS certificate import

Export private key from jks keystore

#convert jks to pkcs#12 format
keytool -importkeystore -srckeystore myKeystore.jks -destkeystore myKeystore.p12
-deststoretype PKCS12 -srcalias myAlias
#export private key (WARNING, manipulate with care)
openssl pkcs12 -in myKeystore.p12  -nodes -nocerts -out myKey.pem

Check .csr or .crt public key against a private key

This will generate the sha256 hash for the public key, compare manualy. Very useful if you lost your key or are getting “No certificate matches private key”.

#generate hash for pubKey generated from privateKey
openssl pkey -in myPrivateKey.key -pubout -outform pem | sha256sum 
#generate hash for pubKey from cert
openssl x509 -in myCertificate.crt -pubkey -noout -outform pem | sha256sum 
#generate hash for pubKey from csr
openssl req -in myCSR.csr -pubkey -noout -outform pem | sha256sum

Convert p7b signed certificate response to jks keystore

This is very useful if you lost your jks keystore containing the original .csr

#export certs from signed certificate response to .pem
openssl pkcs7 -print_certs -in myStore.p7b -out certs.pem
#combine certs and key in pkcs#12 format
openssl pkcs12 -export -name server -in certs.pem -out myKeystore.p12 -inkey myPrivateKey.key
#convert pkcs#12 to jks
keytool -importkeystore -srcstoretype pkcs12 -srckeystore myKeystore.p12 -destkeystore myKeystore.jks

piBot – bot for monitoring temperature

This is a long due project using a raspberry Pi to monitor the temperature of a cabin I’ve been building for a very long time. I’ve bought the hardware almost 4 years ago and only arrived to the point where I could use it.


Beside the geek motivation the main practical motivation is to measure inside and outside temperature in order to estimate:

  • degree of insulation and week points
  • min temperature in order to calculate needed anti-freeze mix for heating pipes
  • temperature monitoring for pump automation (TODO)
  • min temperature in order to start some electric heating (TODO)
  • accuracy of weather predictions for the location


The architecture of the system is quite simple and has the following components:

    • the raspberry PI, model B which uses several DS18B20 sensors to monitor temperature
    • the piBot (this project) which is basicaly a main loop with sensors and output plugins
  • the vpn client over 3G in order to ensure connectivity in the lack of a fixed ip
  • the vpn server and db where data is stored
  • the visualisation which uses Grafana with a pgsql backend


PiBot is a python main loop which has a plugin mechanism for sensors and outputs (check it on gitHub). Currently I implemented:

  • sensor: ds18b20 which reads /sys/bus/w1/devices/%s/w1_slave data (sensor integration is present in the raspbian)
  • sensor: /sys/class/thermal/*/temp temperature for CPU temperature
  • output: csv plain output
  • pgsql: postgresql output in grafana friendly format

Grafana output

piBot grafana output

An “obvious” improvement

It’s been a long time since I felt such satisfaction debuging something so I decided to write about it.

Let’s assume that you need to store (cache) in memory a large object tree during some operations. In practice this happens because some regulatory constraints so you end up having to parse a very large file and store the resulting object tree. Actually you have a single entry cache. You parse your object, store it in memory for search and processing while the current object tree is used.

public ObjectHandler getObjectHandler(Long id) throws Exception{
	if(cachedObjectHandler != null){
			return cachedObjectHandler;
	cachedObjectHandler = parse(...)
	return cachedObjectHandler;

The code above is a simplified way to do it, no? Please note that the parse(…) function creates the object tree by parsing a stream and allocates a new object tree. In my particular case the object tree holded a max of 120k objects (~150Mb) and did some large xml parsing using stax.

So what is wrong with the code above? Take a look at what a single change can do:

public ObjectHandler getObjectHandler(Long id) throws Exception{
	if(cachedObjectHandler != null){
			return cachedObjectHandler;
	cachedObjectHandler = null;
	cachedObjectHandler = parse(...)
	return cachedObjectHandler;

Did we just reduced the max needed memory by 2? In the first case since java does right to left assignment first a new object tree is allocated by the parse function and only when done it is assigned to the cachedObjectHandler object allowing for the old object tree to be gc-ed. However with the null assignment it can be gc-ed while the new allocation takes place if memory is needed.

As I said, a small change with a big smile.

Remove old kernels

for i in $(dpkg --list | grep linux-image | cut -c5-48 | grep -v $(uname -r) | grep -v linux-image-generic); do apt-get remove --purge -y $i; done

Simple pomodoro script

This is a very basic pomodoro script I am using to avoid getting in a fixed position for hours at a time:

notify-send -i clock "Starting interval..."
for i in $(seq $UNIT_CNT); do
    sleep ${UNIT}m
    let c=$i*$UNIT
    notify-send -i clock "$c minutes"
(for i in $(seq $PAUSE); do let c=$PAUSE-$i+1; echo -n "Pause ${c}m"; echo -e '\f'; sleep 1m; done; echo -e '\f'; echo "Work";) | sm -

Simple hdmi activate script

This is a simple script I bound to ‘meta+F7’ to activate a second hdmi display I am using:

disper -l | grep $EXTERNAL
function on {
    disper -e -d $INTERNAL,$EXTERNAL -r 1920x1080,1920x1080
    touch $LOCK
function off {
    disper -s -d $INTERNAL -r auto
    rm -f $LOCK
if [ $? -eq 1 ]; then #there is no EXTERNAL, run single command
elif [ -f $LOCK ]; then


The dark side of the force

I have been spending a lot of time lately working on a new javascript based interface. As with any js project we ended up with a lot of layers. For instance for a simple numeric input there are:

The fun part is that we needed of course some functionality which did not existed in the kendo component (adding support for financial shortcuts: 10k => 10,000).

Since I still have an OOP structured mind, with lot of years of java pattern I thought: Ok, will create a component which extends on kendo and re-wrap.

This would look similar to:

$(function() {
    // wrap the widget in a closure. Not necessary in doc ready, but a good practice
    (function($) {
        // shorten references to variables. this is better for uglification 
        var kendo = window.kendo,
            ui = kendo.ui,
            NumericTextBox = ui.NumericTextBox;
        // create a new widget which extends the first custom widget
        var NumberInput = NumericTextBox.extend({
            // every widget has an init function
            init: function(element, options) {
                var that = this;
      , element, options);
            _keypress: function(e) {
                //override here!!
            options: {
                name: "NumberInput"
        // add this new widget to the UI namespace.

Well, this seemed ok and it worked ok but still requires a lot of work to wrap into an usable aurelia component which maps all the events and options: precision, step …

At this moment it struck me! This is javascript! BUHUHU, there is no need for all this. I could just do this in our wrapper:

    attached() {
        this.taskQueue.queueTask(() => {
            //assuming ak-numerictextbox="k-widget.bind:numericTextBox; in the template
            this.numericTextBox._orig_keypress = this.numericTextBox._keypress;
            this.numericTextBox._keypress = this._keypress;

Now I have switched to the dark side of the force! More details on this github.


A few thoughts about http fetch

Fetch is the “de facto” standard now if building a new javascript code. Even if not yet supported by all browsers it is warmly recommended. There are numerous examples of usage but after reading a lot of them most of them seemed to miss the answer to my questions. These where:

  • how to proper do error handling including having a default error handler which can be overriden
  • how to do http POST?
  • how to use in real-life application? I mean one would expect to do a fetch for a login api and then all other api to work (i.e. have cookie support).

The following code (typescript) will try to answer the above questions:

function myFetch(path: string, params: Object, customCatch: boolean = false): Promise {
    let requestParams: RequestInit = {
        mode: 'cors',
        cache: 'default',
        credentials: 'include' //this is REQUIRED to enable cookie management
    requestParams.body = $.params(object); //generate a query string: 'param1=val&param2=val';
    requestParams.headers = {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" //this is REQUIRED for POST with this payload
    requestParams.method = 'POST';
    return fetch(path, requestParams)
        .then(response => {
            if (response.ok) {
                return response.text();
            } else {
                throw (response);
        .catch(err => {
            //please note that "TYPEERROR: FAILED TO FETCH" is a very BAD error message. From the spec:
            //"A fetch() promise will reject with a TypeError when a network error is encountered, 
            //although this usually means permission issues or similar"
            if (customCatch) {
                //this allows to override error handler with a custom function
                throw (err);
            } else {
                if (err instanceof Response) { //server error code, thrown from else above
                    //handle this error
                } else { //this is network error
                    //handle this error
            return null;
//fetch with default error handling
myFetch('/api', {user: 'toto', task: 'info'})
        response => {
            if(response != null){
                //handle response
//fetch with custom error handling
myFetch('/api', {user: 'toto', task: 'info'}, true)
        response => {
            if(response != null){
                //handle response
    .catch(errResponse => {
        //handler errResponse (both error status and network error)



Dynamic Aurelia

From someone used to developing in a “traditional” way, switching to a javascript framework is like crossing over to a different universe where the laws of physics do not really apply. They might seem similar but they’re not. Take inheritance for instance, the foundation stone of OOP and throw it down the drain. No more inheritance, everything is composition right now.

Yet in time you will learn the new laws and adapt. Making the decision on which framework to choose has been one of the toughest things I had to do, but finally I am content with choosing Aurelia. It’s structured and comprehensible.

One of the things less documented, however, is the way to do dynamic composition programmatically (in code), as opposed to declarative (in html). This means adding a new element in the DOM and loading a component into it or loading directly some html string with Aurelia markup.

I currently found 3 ways of doing this, and even if I don’t know which is the recommended, one I will mention all of them below. I want to thank all the articles and gitter help I got in making the code below work.

Using the compositionEngine.compose()

The compose element is the way Aurelia allows you to insert a dynamic component into the page. What if there is no compose markup and you want to add a variable number of components?
This corresponds to the following use case scenario: I have a menu navigation which opens tabs for each different application module. Each module is implemented as a component (they do not inherit a base class!). When the user opens a menu entry, a new tab is created and the corresponding component loaded. A working example can be found in this gist.

To add a new tab, a new DOM node is created using basic javascript, then the CompositionEngine.compose is called provided with a viewModel, the component name, and a slot to attach to, the newly created element.

this.instruction = Object.assign(this.instruction, {viewModel: menuId, host: el, viewSlot: vSlot});
this.compositionEngine.compose(this.instruction).then(controller => {

Please note that the limitation I currently found to this method is that if 2 instances of the same component are created they will share the same instance of the viewModel. Test here by opening “second module” twice and changing the value. This is due to the fact that the viewModel is obtained using container.get() which by default returns a singleton. One solution is the mark the viewModel with transient(), another would be to create the viewModel instance and add it to the child container (I guess this is Aurelia does internally for the components). Also don’t forget to call unbind and detach on the component if you also plan to allow for the components to be removed.

Using enhance

A simpler method is to insert the markup for the compose element directly and call templatingEngine.enhance on it. This also does not suffer from previous viewModel reusage limitation.

              content: '<compose view-model="' + menuId + '" id="' + moduleDivId + '"></compose>',
              encoded: false
      let el = document.getElementById(moduleDivId);
      let view = this.templatingEngine.enhance({ element: el, bindingContext: {}, overrideContext: {}});

See more info here.

Please note that I think the api has changed recently since I am experiencing some trouble with this method on latest aurelia-templating.

Using the viewCompiler

Both previous methods add a component dynamically in html in a place where no previous markup exists. At some point however one might wish to load a chunk of html containing aurelia markup in the current DOM. Take the usecase where parts of a form are user generated and are loaded from the server at runtime. Check the gist here. As you see, when the html is loaded, binding also takes place.

The dynamic part happens here:

        let viewFactory = this.viewCompiler.compile(html, this.resources);
        let view = viewFactory.create(this.container);
        view.bind(viewModel, createOverrideContext(viewModel));
        let viewSlot = new ViewSlot(containerElement, true);
        return () => {