Month: May 2017

Angular: how to add a progress bar to show during a file upload

Angular: how to add a progress bar to show during a file upload

The vanilla  XMLHttpRequest() method implements the”progress” event  and it is pretty easy to use.
In angularJS (angular 1) we had to wait till the 1.5.something to have this method supported.
In angular (angular 2 which I am talking about) there is no support yet.

The easiest way to get this feature, is to use this good lib:
https://github.com/DarkXaHTeP/angular-progress-http

You can find all the instructions in the github page, the lib is updated and tested with the latest angular version.

Once you’ve got the progress percentage in your controller, you can easily implement a graphical progress bar with few lines of html and css,
An useful guide for ionic2, but it is a good input for any other implementation.
https://www.joshmorony.com/build-a-simple-progress-bar-component-in-ionic-2/

ionic2: how to automatically redirect to the login page

ionic2: how to automatically redirect to the login page

I got a point where it was important to implement an automatic redirection to the login page when the user tries to access a page that should be accessed from logged users only.

I needed something easy to add on every “reserved” page.
The first attempt was to create a service, I immediately faced with a problem:
The NavController (needed for the page change) can’t work form inside a service.

This is the error I got:
No provider for NavController

https://github.com/driftyco/ionic/issues/9581

I decided for a component.
The working principle is easy:

  1. When the app starts deletes the storage obj “user”
  2. Immediately after it tries to get a new obj from an api call by using the access token stored in the storage obj “session”
  3. If the call succeeds it saves the new storage obj “user”
  4. Every page that needs to be “protected” includes the component <login-redirect>
  5. <login-redirect> checks if the storage obj “user” exists, if it does not, it redirects to the login page passing a parameter used from the login component to redirect to a page(or back) if the login succeeds
  6. When the login succeeds, the login component calls the api again to fetch and set the storage obj “user”
  7. The login page redirects to the right page (passed as parameter on the point 5)

Let’s see some code:

I don’t need to modify the template or the scss file.

controller

The @Input() is used to read from the tag’s attribute “redirect” the page to pass to the login component (we’ll see it later)

The login component has some logic like this

In every page I want to reserve for logged users, I add this line in the template


This method works fine, anyway I don’t know yet if this is the best method to achieve the result, for example a little side effect is that the page we want to protect appears for a short time before the redirection.
As soon as I discover a better method I’ll share it.

Any suggestion?

ionic storage and objects: how to add a property

ionic storage and objects: how to add a property

Ionic has a really useful module to locally store the data that the app wants to save.
I use it for many things, for example to save the auth token the user receives after the login.
It is a very simple layer that automatically chooses the best available store engine in the browser.
If you want to go deeper http://ionicframework.com/docs/storage/

The usage is super easy :

The problem is when you come to deal with objects.
The api is not capable to add or remove a property, you have to replace the whole object.

For me this is extremely annoying, plus if you do it often you get your code quite “dirty”.
I decided to write a little provider that by saving a json string, allows me to add a single property to the object.

$ ionic g provider MtfStorage

To use it, you just have to import the provider in the component you like


 

How to define the right scope context (this) while passing a callback function to a component

How to define the right scope context (this) while passing a callback function to a component


A super common situation is to pass a callback function to component.

Template

 

Controller

 

The component takes the callback in input

In this scenario the method this.apicall(value) would fail since “this” is not what we expect.
To be sure that “this” refers to the controller’s scope, we can add a simple line on its constructor:

 

Solution


 

solve letsencrypt erros in a debian 7

solve letsencrypt erros in a debian 7


I was following the official guide at https://certbot.eff.org/#debianwheezy-apache
Is soon as I launched ./certbot-auto –apache I’ got:

Backports saved me!

Et voilà!

Add a layer over an element with 1 css rule

Add a layer over an element with 1 css rule


Sometime we want to make an element like a  picture darker to better read the text over it,
we can solve it with 1 css rule without adding any html element.

Parameters are pretty clear, anyway the last one is the opacity.

vsftpd con utenti mysql e custom chrooted homedir

vsftpd con utenti mysql e custom chrooted homedir

I motivi per i quali possiamo voler scegliere vsftpd come server ftp, sono innumerevoli e non saranno oggetto di questo articolo.
Mi limito a dire che personalmente, l’ho scelto per la sua sicurezza, snellezza, prestazioni.
Del resto, si tratta di una soluzione scelta da redhat e consigliata da ibm.
Come al solito, tutto parte dalle mie esigenze per cui descriverò la mia soluzione e non tutte le possibilità che questo magnifico strumento offre.

La prima caratteristica desiderata è una gestione degli users tramite mysql e questo tramite pam è abbastanza semplice.
Leggermente più complicato è stato far si che più utenti potessero condividere la stessa homedir (immaginate 3 sviluppatori diversi che lavorano sullo stesso sito e di cui si vogliono tracciare gli accessi con differenti login)
Tutti gli accessi saranno chroot ossia gli utenti non potranno navigare l’intero filesystem.

La difficoltà principale è che non si può scrivere la homedir chroot in uno dei campi del db e sperare che vsftpd legga quel valore.
Questo limita di fatto, la possibilità di avere una gestione centralizzata degli accessi (in maniera nativa), per esempio tramite un front-end web, ecco come ho deciso di procedere e soprattutto di aggirare tale limitazione:

Settings

Sulla debian wheezy usata, avendo già installato e configurato mysql, è bastato un:

Le libpam-mysql sono fondamentali per permettere a vsftpd di leggere gli utenti presenti su mysql.

Aggiungere l’utente di sistema vsftpd:

Loggarsi come amministratore su mysql e creare database, utente e tabella.

Dentro /etc/pam.d/vsftpd commentare tutto e lasciare le seguenti righe che specificano a vsftpd come e dove cercare gli utenti su database

chiaramente è possibile cambiare i valori di crypt, debug e verbose a piacimento, tuttavia inizialmente è preferibile avere dei log prolissi.

L’ultimo file di configurazione è quello fondamentale per vsftpd ovvero /etc/vsftpd.conf
Per il significato di ognuna delle seguenti direttive vi rimando alla guida ufficiale.

Una delle direttive specificate in vsftpd.conf è la “user_config_dir”
che abbiamo settato a /etc/vsftpd/user_conf
Questa dice vsftpd dove cercare i settaggi specifici per ogni utente ed è il modo più semplice per avere una home diversa per ognuno di loro ma anche per poter avere più users con la stessa home.

Prima di tutto assicuriamoci di creare la directory che conterrà le configurazioni specifiche:

Il formato è molto semplice, basta creare un file con il nome utente presente nel db e mettere dentro poche righe di testo:

Non dimenticatevi di riavviare il servizio

Adesso tutto è funzionante ma è certamente scomodo dover inserire a mano gli utenti nel db e poi creare il relativo file di configurazione dentro /etc/vsftpd/user_conf
Per rendere tutto molto semplice ho creato un piccolo script perl che fa tutto il lavoro sporco per noi.
Lo script essenzialmente permette di aggiungere ed eliminare utenti in maniera velocissima, si preoccuperà lui di inserire o eliminare la voce del db e di conseguenza il file di configurazione necessario.
Lo script crea automaticamente la homeDir specificata e imposta i permessi corretti per poter lavorare in chroot.
Per un corretto chroot infatti è necessario che la directory specificata, non abbia i permessi di scrittura e che contenga all’interno una seconda directory con tali permessi, questa seconda directory sarà l’unico punto in cui l’utente potrà effettivamente scrivere.
Se non si rispettà questo schema, vsftpd non funzionerà correttamente e sui nostri client ftp leggeremo un laconico:

500 OOPS: vsftpd: refusing to run with writable root inside chroot ()

Entrambe le directory, devono poi appartenere a vsftpd e gruppo nogroup.
Lo script permette anche di vedere la lista di utenti presenti, modificare la password o la homeDir e di copiare automaticamente un file dentro la directory con i permessi di scrittura.
Quest’ultima caratteristica risulta utile nel caso si voglia lasciare all’utente un readme oppure nel caso si tratti di un sito web, creare una index di default.

Per aggiungere un utente basta digitare:

Tutte le modifiche saranno attive in tempo reale senza la necessità di riavviare il server.
L’unico “sforzo” richiesto è editare lo script per aggiungere i propri parametri di configurazione
del db, la directory dove vengono scritte le configurazioni degli utenti, uid e gid di vsftpd.
Insomma operazione da pochi minuti.

Lo script lo trovi su github:
https://github.com/bogomips/syncFtp.pl

Buon divertimento con vsftpd !

PS
Questa guida è stata utilizzata come base per un’altra guida su debianizzati.org dove è anche stata integrata una sezione relativa a TLS:
http://guide.debianizzati.org/index.php/Installare_un_server_vsFTPd_con_utenti_virtuali_su_MySQL

colword : A command line word highlighter

colword : A command line word highlighter


I often prefer just to hilight some words rather than grep them, it’s good not to loose the contexst.
colword is a very basic version of grep but it does not suppress any line, it just colors the matched word.

It’s super easy to use:

colworld’s source code

 

Bash scripting: Apply a firewall rule dynamically by reading a log file

Bash scripting: Apply a firewall rule dynamically by reading a log file

Some years ago, I needed to apply hundreds of firewall rules dynamically by reading a log file.
It was basically a DDos attack and the requests were easily identifyable since the attacker’s software was using the protocol HTTP/1.0.
I solved by pipeing some unix standard commands:  tail, grep, awk, iptables

Recap:

  • tail -f continuously reads  the log file
  • grep filters the rows containing  HTTP/1.0
  • awk extracts the attacker ip address and pass it to the firewall rule by the variable $1
Angular: Manually update a model from inside its custom validator avoiding loops

Angular: Manually update a model from inside its custom validator avoiding loops


I know, it could sound weird, in another post I will give more details about this need of mine.

Now I want to focus on the problem:
If you update a model inside its own custom validator, it will trigger the validator again in a devastaing loop.
I was looking for a way to update the model without to trigger the validator, so I played with the parameters of the two methods setValue and patchValue, but it did not work.

In the end, I decided to:

  1. validator to null
  2. update the value
  3. set the validator again.

It works well.

Does someone know a better way to achieve the result?