DEV Community: Lorenzo Millucci

JavaScript: How to decode the GreenPass QR code

Lorenzo Millucci — Thu, 15 Jul 2021 06:58:15 +0000

The holidays are upon us and thanks to the advancement of vaccinations against the coronavirus pandemic it is finally possible to travel abroad.
In particular, starting from July 1st, it is be possible to travel freely within the borders of the European Union thanks to the release of the so-called "green pass".

But what is contained in the QR code that is sent to users? Thanks to the publication of all the specifications of the vaccination pass, I had some fun creating a script in JavaScript to read its contents.

But before explaining how I read the QR code of the green pass, let me introduce myself: I'm Lorenzo Millucci and I'm a software engineer who loves working with Symfony. You can read all my post on my blog (in Italian)

Reading the QR code

In order to create a script to decode the QR code of the green pass, the first thing to do is to prepare the environment by installing some dependencies:

npm install base45 cbor jpeg-js jsqr pako

At this point you are ready to import them into a script:

const base45 = require('base45');
const cbor = require('cbor');
const fs = require('fs')
const jpeg = require('jpeg-js');
const jsQR = require("jsqr");
const pako = require('pako');

Now you can start decoding the file containing the green pass. In this example I'm using the image file called greenpass.jpg that I've downloaded directly from the Italian app IO.

NOTE: if you used a different name or saved the file in another location, adjust the code accordingly.

const greenpassJpeg = fs.readFileSync(__ dirname + '/greenpass.jpg');
const greenpassImageData = jpeg.decode(greenpassJpeg, {useTArray: true});

NOTE 2: the useTArray option passed to the decoder is used to make sure that the image is decoded as Uint8Array

Once this is done you can pass the file to the QR code decoder:

const decodedGreenpass = jsQR(greenpassImageData.data, greenpassImageData.width, greenpassImageData.height);

The string you get from this code is something like:

HC1: 6BFOXM% TS3DHPVO13J /G-/2YKVA.R/K86PP2FC1J9M$DI9C3 [....] CS62GMVR + B1YM K5MJ1K: K: 2JZLT6KM + DTVKPDUG $ E7F06FA3O6I-VA126Y0

To proceed with the decoding of the green pass you have to remove the first 4 characters of the string (which indicate the use of the HCERT protocol)

const greenpassBody = decodedGreenpass.data.substr(4);

At this point, in order to have the data in readable format, you must first decode the string from the Base45 format and then decompress it using zlib:

const decodedData = base45.decode(greenpassBody);
const output = pako.inflate(decodedData);

As the certificate is encrypted using the COSE format (CBOR Object Signing and Encryption) you have to decrypt it:

const results = cbor.decodeAllSync(output);
[headers1, headers2, cbor_data, signature] = results[0].value;

The certificate contains various types of data useful to guarantee its validity but the part that contains the user's data is that contained in the variable cbor_data

const greenpassData = cbor.decodeAllSync(cbor_data);

At this point, finally, it is possible to print the JSON with the user data:

console.log (JSON.stringify(greenpassData[0].get(-260).get (1), null, 2));

For example this is the content of my green pass:

{
  "t": [
    {
      "sc": "2021-06- []",
      "but": "1606",
      "tt": "LP217198-3",
      "co": "IT",
      "tc": "Dr. [....]",
      "there": "[....]",
      "is": "Ministry of Health",
      "tg": "840539006",
      "tr": "26041 [....]"
    }
  ],
  "nam": {
    "fnt": "MILLUCCI",
    "fn": "MILLUCCI",
    "gnt": "LORENZO",
    "gn": "LORENZO"
  },
  "ver": "1.0.0",
  "dob": "1992-08-10"
}

Where:

sc indicates the date and time of the test but it indicates "Marketing Authorization Holder" which simply indicates the body that put the test on the market
tt indicates the type of test
tc indicates the place where the test was performed
ci the unique certificate number (Unique Certificate Identifier or UVCI)
is the entity that issued the certificate
tg is the type of agent against which the vaccine acts (at the moment the only allowed value is 840539006 and that is COVID-19)
tr is the test result

To get all the details on the meaning of these acronyms you can read the official JSON Schema.

NOTE: my vaccination pass was obtained for having done the rapid test and therefore the data contained in it refers to an antigen test. The data contained in a green pass issued after a vaccine shot are different.

The complete script can be read below or can be found here

const base45 = require('base45');
const cbor = require('cbor');
const fs = require('fs')
const jpeg = require('jpeg-js');
const jsQR = require("jsqr");
const pako = require('pako');

// Set the path to the green pass QR
const FILE_PATH = __dirname + '/greenpass.jpg';

// Read image file
const greenpassJpeg = fs.readFileSync(FILE_PATH);
const greenpassImageData = jpeg.decode(greenpassJpeg, {useTArray: true});

// Decode QR
const decodedGreenpass = jsQR(greenpassImageData.data, greenpassImageData.width, greenpassImageData.height);

// Remove `HC1:` from the string
const greenpassBody = decodedGreenpass.data.substr(4);

// Data is Base45 encoded
const decodedData = base45.decode(greenpassBody);

// And zipped
const output = pako.inflate(decodedData);

const results = cbor.decodeAllSync(output);

[headers1, headers2, cbor_data, signature] = results[0].value;

const greenpassData = cbor.decodeAllSync(cbor_data);

console.log(JSON.stringify(greenpassData[0].get(-260).get(1), null, 2));

Building a Vue 3 component with Typescript

Lorenzo Millucci — Mon, 09 Mar 2020 17:45:48 +0000

The alpha version of Vue 3 has been available for some time now!
While I’m writing this post the alpha 8 version has just been released.

The new version of Vue will bring with it an avalanche of enhancements and improvements but the most significant changes in the new version will be:

Composition API: this is a much discussed feature inspired by the React hooks.
Portals: render certain content outside the current component.
Fragments: allows multiple root nodes.
Updated v-model-API: it now accepts multiple models.
Suspense: is a special component that renders a fallback content instead of your component until a condition is met (mostly for UX stuff).
TypeScript: Vue now has full TypeScript support.

Since Vue 3 is still under active development some of its components may still have bugs or some API may change but it is already possible to start writing a simple application to start playing with the new features.

Because I’m a big fan of TypeScript in this article I will describe you the steps that I followed to to create a new application with Vue 3 using TypeScript.
But talk is cheap, let’s start setting up a new app 🙂

Setting up the project

The first thing to do is to initialize a new application using the command on the next line:

yarn init

Next, add the dependencies needed by the project:

yarn add vue@3.0.0-alpha.8
yarn add --dev yarn vue-loader@v16.0.0-alpha.3 webpack-cli webpack webpack-dev-server typescript ts-loader @vue/compiler-sfc@v3.0.0-alpha.8

Now you have to define a simple webpack configuration creating the file webpack.config.js and adding the following code:

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = (env = {}) => ({
  mode: env.prod ? 'production' : 'development',
  devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
  entry: path.resolve(__dirname, './src/main.ts'),
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue': '@vue/runtime-dom'
    }
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  devServer: {
    inline: true,
    hot: true,
    stats: 'minimal',
    contentBase: __dirname,
    overlay: true
  }
})

So far so good, our setup is coming together, but it won’t compile TypeScript just yet, for that we need to add a tsconfig.json file with the following rules:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noLib": false,
    "sourceMap": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es2015",
    "baseUrl": ".",
  },
  "exclude": [
    "./node_modules"
  ],
  "include": [
    "./src/**/*.ts",
    "./src/**/*.vue",
  ],
}

After configuring Typescript and Webpack it is time to add a shortcut to start your application adding a new script to the package.json file:

{

  //...
  // Dependencies
  //...

  "scripts": {
    "dev": "webpack-dev-server"
  }
}

NOTE: to avoid error when you will import *.vue files you have to add the following shims-vue.d.ts file in ./src folder:

declare module "*.vue" {
    import { defineComponent } from "vue";
    const Component: ReturnType<typeof defineComponent>;
    export default Component;
}

To test that the infrastructure built so far is working correctly you will need some things:

Have a simple index.html in the root of the project

<!-- index.html -->
<h1>Hello Vue 3!</h1>
<script src="/dist/main.js"></script>

Have a /src folder
Have main.ts file to the project as follows:

// src/main.ts

console.log('Hello world from Typescript!');

Run the web server with yarn dev

If everything is working then connecting to http://localhost:8080 you should see the page we have just created.

To recap, at the end of these steps you should have the following architecture:

├── index.html
├── package.json
├── tsconfig.json
├── webpack.config.js
├── src
│    ├── shims-vue.d.ts
│    └── main.ts

Let’s build a component

Now that the environment needed to build the application is finally ready you can start creating your first Vue 3 component.

First of all, add a new file called App.vue inside the src folder as follows:

<template>
  <h2>This is a Vue 3 component!</h2>
  <button @click="increase">Clicked {{ count }} times.</button>
</template>
<script lang="ts">
import {defineComponent, ref} from "vue";
export default defineComponent({
  setup() {
    const count = ref(0)
    const increase = () => {
      count.value++
    }

    return {
      count,
      increase,
    }
  }
});
</script>

As you can see, compared to Vue 2 in which to create a new Vue component it was necessary to create a Typescript class and extend Vue using class MyClass extends Vue {}, now Vue 3 offers a defineComponent() function.
Inside the defineComponent() function you can see a setup function, which takes the props as the first argument. Since in this case the App component will be a top level component, no props will be passed (so I have omitted to pass them on).
Also, as you can see from the code, whatever is returned by the setup() method, it is then accessible from the template.

Now that the Vue component has been created, you just have to import it into the main.ts file as follows:

import {createApp} from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Also in this case you can see how compared to the previous version of Vue it is no longer necessary to initialize the new application with const app = new Vue (....).$Mount('# app') but with Vue 3 it is possible to use the function createApp() and the mount() method to bind the application to a DOM selector.

Finally, the last step is to edit the index.html file to include the selector specified to Vue in the previous step:

<h1>Hello Vue 3!</h1>

<div id="app"></div>

<script src="/dist/main.js"></script>

At this point, relaunching the application with yarn dev you can start playing with the new Vue component just created.

Recap

In this post I showed you how to create a very simple component using Vue 3, the composition API and Typescript. Obviously I have scratched just the tip of the iceberg and there are a thousand other features to try in Vue 3 but already with this simple component it is possible to appreciate the new "functional" approach with which it is possible to define the components in the next release of Vue.

PS: All the code is available on GitHub.

Feel free to reach out to me! Blog (in italian) || Twitter || GitHub || LinkedIn

Firefox: Installing Self-Signed certificate on Ubuntu

Lorenzo Millucci — Mon, 16 Dec 2019 13:12:34 +0000

While developing webapps you may need to use HTTPS to match production environment.
For local purposes you may not need a real certificate and a self-signed SSL certificate could be enough.

A self-signed certificate is a SSL certificate which is not signed by any of the recognized certification authorities.

If you want you can create your self-signed certificate in 2 minutes

Browsers do not trust self-signed certificate by default and display an error message that warns the user that the site you are connecting to does not have a recognized certificate and that this could be a potential security risk.

For local development these warnings could be pretty annoying so you may want to ensure that your browser recognizes your certificate as valid.

Let's see how to add a self-signed certificate to Firefox!

Finding Firefox profile folder

All the customizations you make in Firefox are stored in a special folder called profile.
To add a certificate the first thing to do is to find out where your proile is stored. You can find it simply by typing about:profiles in Firefox’s address bar, and then press Enter.

The folder you are looking for is the one with label Root Directory.
For example my profile is stored at /home/lorenzo/.mozilla/firefox/57w4ghfg.default-1394286602246-1560669052441

Installing the certificate

To install the certificate you have to ensure that certutil is installed on your system.

In case it is missing you can install it with:

sudo apt install libnss3-tools

Now you are ready to add the certificate:

certutil -A -n "<CERT_NICKNAME>" -t "TC,," -i <PATH_FILE_CRT> -d sql:<FIREFOX_PROFILE_PATH>

where:

CERT_NICKNAME: is an alias for the certificate
PATH_FILE_CRT: is the path of the certificate you want to add
FIREFOX_PROFILE_PATH: is the path where your Firefox profile is stored

NOTE: if you want to know what trustargs are you can read the documentation.

For example to add the certificate on my PC I have to use:

certutil -A -n "slope" -t "TC,," -i ~/Downloads/slope.crt -d sql:/home/lorenzo/.mozilla/firefox/57w4ghfg.default-1394286602246-1560669052441

NOTE: after you installed the certificate you have to restart Firefox for these changes to take effect.

Displaying installed certificates

To ensure that the certificate is added correctly you can display all the installed certificates using:

 certutil -d sql:<FIREFOX_PROFILE_PATH> -L

Removing a certificate

If you need to remove an installed certificate you can do it with:

certutil  -D -n "<CERT_NICKNAME>"  -d sql:<FIREFOX_PROFILE_PATH>

And voila! You're all done, ready and up and running!

Feel free to reach out to me! Blog (in italian) || Twitter || GitHub || LinkedIn