En aquest vídeo us mostro com millorar la seguretat de la vostra aplicació web, mitjançant la manipulació de les capçaleres d’HTTP, utilitzant el paquet Helmet.js.
¿Què es Helmet.js
Si entreu a aquest post, segurament ja estareu familiaritzats amb Node.js i Express. Express es un dels frameworks més utilitzats a l’hora de desenvolupar aplicacions amb Node.js. Tot i que es considerat un framework agil i robust, no considera alguns aspectes relatius a la seguretat.
Helmet.js es una extensió d’Express, i està pensada per cubrir aquest buit entre Node.js i Express. Helmet.js funciona basicament com a Middleware d’Express, i actua a nivell de les capçaleres HTTP que retorna Express.
¿Com Instal·lar Helmet.js
Per utilitzar Helmet.js juntament amb la teva aplicació Express, al igual que amb qualsevol altre extensió de Node.js, l’has d’instal·lar primer utilitzant npm, i posteriorment incloure la dependencia en el codi de la aplicació.
Per instal·lar Helmet, el primer pas és obrir la consola de Node, situar-te en el mateix directori on tens el fitxer principal amb el codi de l’aplicació, i exectuar npm:
npm i helmet¿Com Utilitzar Helmet.js en la Teva Aplicació?
En aquest exemple, com també veuràs en el vídeo, em centro en uns pocs casos pràctics, perque entenguis el funcionament i la utilitat que brinda Helmet.
Per començar a entrar en materia, et recomano utilitzar el mateix cas pràctic del vídeo, que trobaràs en el següent enllaç de Github, tot i que si tens un projecte propi amb Express, també servirà.
https://github.com/terminal379/helmet
Un cop tinguis els fitxer de l’aplicació en local, per inicialitzar el servidor de l’aplicació cal que copiïs la següent sentència en la consola de Node (cal que estigui situada en el mateix directori on es trobi el fitxer principal de l’aplicació):
npm run startUn cop s’obri l’aplicació en el navegador, si obres la consola del navegador i et situes a la pestanya Network, podràs veure els diferents headers o capçaleres de la teva aplicació. Entre les diferents capçaleres, podràs veure, per exemple, quin servidor de backend utilitza l’aplicació, o el User-Agent del navegador que l’executa:
X-Powered-By: Express
User-Agent: Mozilla/5.0Com pots veure, per defecte és bastanta la informació que es filtra, i algunes dades poden resultar sensibles o inclús ser utilitzades per algun atacant.
Aqui és un entra en joc Helmet, al permetre ofuscar part de tota aquesta informació. A continuació veuràs com integrar algunes de les seves funcionalitats en el codi de la teva aplicació.
Al igual que passa amb altres dependències, el primer que cal fer es requerir Helmet en el fitxer principal de la teva aplicació. Per fer-ho, només cal que enganxis la següent línia de codi, juntament amb les altres línies que ja tinguis per requerir altres llibreríes utilitzades, com és el cas d’Express.
const helmet = require("helmet");Fet això, toca implementar Helmet. Per fer-ho, dins dels middlewares, pots copiar algunes de les següents línieas, que et permetrar ofuscar algunes de les capçaleres HTTP que hem vist abans.
Si, per exemple, vols amagar el tipus de servidor de backend, pots utilitzar la següent línia de codi:
app.use(helmet.hidePoweredBy())Un cop guardat al fitxer amb aquests canvis, si executes el servidor de nou, podràs comprobar com, en la consola del navegador, aquesta capçalera que abans era perfectament visible, ara ja no es mostra.
X-Powered-By: ExpressAquesta és només un exemple de les diferents capçaleres que permet ofuscar o modificar Helmet. Si vols profunditzar pel teu compte, totes les funcionalitats que facilita la dependència les pots trobar aquí: https://helmetjs.github.io/.