---
# System prepended metadata

title: https - accés a webs amb certificat

---

# https - accés a webs amb certificat
### Vas a fer canvis a una màquina virtual. Si ja la tens importada, i has fet una snapshot (punt de recuperació) passa directament al pas 5)
Aquest article se basa en la següent búsqueda a internet:
```
generate localhost certificate
```
...i seleccionaré un parell de links:

a) Una de les persones que més sap de SSL [Filippo Valsorda](https://github.com/FiloSottile/mkcert)  
b) Una explicació detallada per [windows](https://www.jasoft.org/Blog/post/como-generar-certificados-https-para-desarrollo-local-que-no-produzcan-errores)


**[TLDR](https://es.wiktionary.org/wiki/TLDR): ves al pas 1;** *Si per contra vols entendre perquè fem les coses d'aquesta manera continua lleguint ;)* 

Caldrà diferenciar dos escenaris totalment incompatibles entre sí:  
a) generació de certificat en local/desenvolupament/testing  
b) generació del certificat en producció  
Per al primer cas podríem generar un certificat autosignat (sense intervenció de l'entitat certificadora) amb les "protestes/advertències" dels navegadors web. La manera elegant per evitar aquestes protestes és crear l'entitat certificadora local i que sigui ella la que signe (done fé) dels certificats generats. L'inconvenient: hem de "presentar" la "nova" entitat certificadora als navegadors web que facis servir.
En el segon cas (producció) letsencrypt és la nostra solució (certificats generats per una entitat certificadora no local i que tots els navegadors reconeixen)

Anem per feina!
1. **descàrrega, importa la vm i engega-la**

[ubuntu_server_ova](https://drive.google.com/file/d/1V1pi2Ik1b1G5A8GvWiZIG2f8IuFwsh-p/view?usp=sharing)

2. **accedim a la vm a través d'una connexió ssh gràcies al port forwarding**
### :warning: !!!!! a la màquina física
```
ssh -p 40022 alumne01@127.0.0.1
```
3. **comprova que te connectivitat**
```
ping -c 3 8.8.8.8
ping -c 3 google.com
```

4. **atura la vm i crea una snapshot per poder tornar al punt de partida**
5. **instal·la apache i unzip (doncs el necessitarem més tard)**
```
sudo apt update
sudo apt install apache2 unzip
```
:arrow_down::warning::warning::warning::warning::warning:
**NOTA: els passes 6 a 10 són a la màquina física!!** 

**6. Necessitarem instal·lar prèviament**
```
sudo apt install libnss3-tools
```
**7-8 (NEW) Descarreguem mkcert i el situem en un lloc del PATH**
```
curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64"
chmod +x mkcert-v*-linux-amd64
sudo cp mkcert-v*-linux-amd64 /usr/local/bin/mkcert
```
:::spoiler **forma antiga alternativa** 

**7 (OLD). Ara descarreguem directament el binari de la secció de "releases" del [github](https://github.com/FiloSottile/mkcert/releases/latest)**
```
wget https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3-linux-amd64
```
Com a curiositat podem comprovar que és un binari:
```
file mkcert-v1.4.3-linux-amd64
```
**8 (OLD). li otorgarem permissos d'execució**
```
chmod a+x mkcert-v1.4.3-linux-amd64
```

**9 (OLD). i generarem l'entitat certificadora**
```
./mkcert-v1.4.3-linux-amd64 -install
```
:::
**9 (NEW). i generarem l'entitat certificadora**
```
mkcert -install
```

... que ens contestarà:
```
Created a new local CA 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox and/or Chrome/Chromium trust store (requires browser restart)! 🦊
```
**10. ara ja podem crear el certificat i la clau privada per fer-los servir amb el servidor web (apache/nginx/caddy...)**
```
mkcert webssl.edu "*.webssl.edu" localhost 127.0.0.1 ::1
```
amb el següent resultat:
```
mkcert webssl.edu "*.webssl.edu" localhost 127.0.0.1 ::1

Created a new certificate valid for the following names 📜
 - "webssl.edu"
 - "*.webssl.edu"
 - "localhost"
 - "127.0.0.1"
 - "::1"

Reminder: X.509 wildcards only go one level deep, so this won't match a.b.webssl.edu ℹ️

The certificate is at "./webssl.edu+4.pem" and the key at "./webssl.edu+4-key.pem" ✅

It will expire on 14 February 2024 🗓

ls -l
total 4708
-rw-rw-r-- 1 joaniznardo joaniznardo    1460 de nov.   7 19:03 guio-video-s
-rwxrwxr-x 1 joaniznardo joaniznardo 4803796 de nov.  25  2020 mkcert-v1.4.3-linux-amd64
-rw-rw-r-- 1 joaniznardo joaniznardo     372 de nov.  10 14:48 observacions
-rw------- 1 joaniznardo joaniznardo    1704 de nov.  14 11:15 webssl.edu+4-key.pem
-rw-r--r-- 1 joaniznardo joaniznardo    1537 de nov.  14 11:15 webssl.edu+4.pem

```
els fitxers que ens interessen són **webssl.edu+4-key.pem** (la clau) i **webssl.edu+4.pem** (el certificat)

:end::warning::warning::warning::warning:

11. **descarrega la web d'exemple**
```
wget -O /tmp/example-site.zip https://s3.eu-west-2.amazonaws.com/tiiny.host/example-site.zip
```

12. **consulta quines webs estan disponibles**
```
a2query -s
```

13. **deshabilita la web per defecte**
```
sudo a2dissite 000-default.conf
```

14. **prepara el fitxer de configuració de la nova web** 
:sunglasses: *ara és el* **default-ssl.conf**
```
sudo cp /etc/apache2/sites-available/default-ssl.conf /etc/apache2/sites-available/010-webssl.edu.conf
```

15. **modifica el contingut del nou fitxer, indicant:** 
a) **el ServerName** (*què posarem al navegador per accedir a la web*) - www.webssl.edu
b) **i el DomumentRoot** (*el lloc/directori/carpeta on copiaràs el contingut de la web: index.html & friends*) - /var/www/webssl.edu
c) **reemplaçarem** les directives relatives als certificats auto-signats

```
sudo vi /etc/apache2/sites-available/010-webssl.edu.conf 
------vvvvv------
SSLCertificateFile  /etc/ssl/certs/webssl.edu+4.pem
SSLCertificateKeyFile /etc/ssl/private/webssl.edu+4-key.pem
```
16.a (M.Física linux) :point_left: copia els fitxers generats a la màquina virtual (recomane a dintre de /tmp) i després a /etc/ssl/certs i a /etc/ssl/private
```
rsync -azv webssl.edu+4.pem  --rsync-path="sudo  rsync" -e "ssh -p 40022"  alumne01@127.0.0.1:/etc/ssl/certs
rsync -azv webssl.edu+4-key.pem  --rsync-path="sudo  rsync" -e "ssh -p 40022"  alumne01@127.0.0.1:/etc/ssl/private

```
16.b :point_right: (M.Física windows) copia els fitxers generats a la màquina virtual (recomane a dintre de /tmp) i després a /etc/ssl/certs i a /etc/ssl/private
```
# maquina física
scp webssl.edu+4.pem  -p 40022  alumne01@127.0.0.1:/tmp 
scp webssl.edu+4-key.pem  -p 40022  alumne01@127.0.0.1:tmp
```

...a un terminal de linux sobre la vm;
```
sudo cp /tmp/webssl.edu+4.pem /etc/ssl/certs
sudo cp /tmp/webssl.edu+4-key.pem /etc/ssl/private
```
17. **crea la nova carpeta a /var/www**
```
sudo mkdir /var/www/webssl.edu
```

18. **habilita la nova web**
```
sudo a2ensite 010-WEBSSL.edu.conf
```

19. **comprova que estigui habilitada**
```
a2query -s
```


20. **descomprimeix el contingut de la web al nou directori**
```
sudo unzip -d /var/www/webssl.edu /tmp/example-site.zip
```
21. **habilitar el mòdul de seguretat a apache**
```
sudo a2enmod ssl
```
22. **per a la resolució de noms ens caldrà al menys fer-ho de manera estàtica (sic)**
```
grep webssl /etc/hosts || (echo "127.0.0.1 www.webssl.edu" | sudo tee -a /etc/hosts) 
```
23. **reinicia l'apache**
```
sudo systemctl reload apache2.service
```


24. **comprova que funciona a la vm**
```
curl https://127.0.0.1
curl https://www.webssl.edu
curl -k 127.0.0.1
curl -k www.webssl.edu
```


## :+1: accés des de la teva màquina física a través del port forwarding de virtualbox 

25. **per accedir per nom des d'un navegador ens caldrà muntar un proxy**
### :warning: a la màquina física
```
ssh -N -f -D 39999 -p 40022 alumne01@127.0.0.1
```

26. **accés amb diferents navegadors**

a) **Brave (realitza la resolució en el proxy)**
```
brave-browser --proxy-server="socks5://127.0.0.1:39999" 
```

b) **Chromium també**
```
chromium-browser --proxy-server="socks5://127.0.0.1:39999"
```
c) **...i Chrome, quan no està gestionat (*managed*) també**
```
google-chrome --user-data-dir=/tmp --proxy-server="socks5://127.0.0.1:39999"
```

27. **ara ja pots posar al navegador**
:point_right: vigila amb **https**
``` 
https://www.webssl.edu
```
El resultat hauria de ser semblant a:
![](https://i.imgur.com/GZuTIxo.png)
![](https://i.imgur.com/RYXlaBF.png)
![](https://i.imgur.com/jWZ2St4.png)


## Alternativa gràfica :-1:
### ...després de completar el pas 24
1. **instal·la un entorn GUI a la VM i el firefox**
```
sudo apt install gnome-session gnome-terminal firefox
```

2. **reinicia la màquina virtual i des del firefox accedeix a**
```
https://www.primeraweb.edu
```

## referències
Tot l'article està bé però te porte directe al [reenviament dinàmic](https://linuxize.com/post/how-to-setup-ssh-tunneling/#dynamic-port-forwarding)  
Una de les persones que més sap de SSL [Filippo Valsorda](https://github.com/FiloSottile/mkcert)  
Una explicació detallada per [windows](https://www.jasoft.org/Blog/post/como-generar-certificados-https-para-desarrollo-local-que-no-produzcan-errores)
