Seedbox à la maison

[Kirinenko]

7. Mise en place de h5ai :

Un indexeur de fichiers plus esthétique que celui par défaut d'apache : https://larsjung.de/h5ai/

On va donc dire que l'on veut partager le contenu de notre répertoire "partage" qui est dans "/var/www/nom_du_repertoire" et qu'on veut donc afficher son contenu avec apaxy. Je concatène ainsi afin de pouvoir mettre une page d'accueil dans le dossier "nom_du_repertoire" plus tard.
On crée ce dossier :

Code :

mkdir /var/www/nom_du_repertoire/partage"

Afin de voir comment ce comporte le style pour différents types de fichiers/dossiers, je vais mettre dans ce répertoire les élements suivants :
- un dossier qui contiendra des fichiers pour plusieurs dizaines de Mo
- des fichiers de différentes types : mp4, mkv, txt, raccourci (vers un dossier dans notre "home"), ...

Pour réaliser le lien symbolique de votre dossier, utilisez la comande suivante :
ln -s /home/utilisateur/source /var/www/nom_lien

J'ai donc un dossier "partage" qui contient tout ça :

On installe des dépendances :

Code :

sudo apt-get -y install php7.0 libapache2-mod-php7.0

On redémarre apache :

Code :

service apache2 restart

Vérifiez que la dernière version de h5ai est la 0.29.2 sinon il faudra changer le lien en conséquence dans les lignes de code suivantes :

Code :

cd /home/utilisateur/disque
wget https://release.larsjung.de/h5ai/h5ai-0.29.2.zip

Pour le dézipper, on va se servir de 7zip, pour cela, on l'installe :

Code :

apt install p7zip-full

Puis on dézipppe :

Code :

7z x h5ai-0.29.2.zip

Et on supprime le zip téléchargé :

Code :

rm -f h5ai-0.29.2.zip

On obtient un dossier "_h5ai" qui a tout le contenu qu'il nous faut. On va déplacer le contenu du dossier "_h5ai" dans notre dossier root web, "partage" :

Code :

mv /home/utilisateur/disque/_h5ai /var/www/nom_du_repertoire

On va éditer le ".htaccess" qui est dans "nom_du_repertoire/partage" :

Code :

nano /var/www/nom_du_repertoire/partage.htaccess

Et on ajoute en fin de fichier :

Code :

<IfModule dir_module>
DirectoryIndex  index.html  index.php  /_h5ai/public/index.php
</IfModule>

Sinon, pour les logs d'erreur d'apache :

Code :

tail -n 25 /var/log/apache2/error.log

Moi j'avais :

Code :

[Tue Apr 02 21:02:23.0073 2019] [core:crit] [pid 8946] (13)Permission denied: [client 192.168.1.###:41622] AH00529: /var/www/nom_du_repertoire/_h5ai/.htaccess pcfg_openfile: unable to check htaccess file, ensure it is readable and that '/var/www/nom_du_repertoire/_h5ai/' is executable

Je fais donc :

Code :

chmod 755 /var/www/nom_du_repertoire/_h5ai

Puis :

Code :

[Tue Apr 02 21:14:29.216624 2019] [core:crit] [pid 8945] (13)Permission denied: [client 192.168.1.###:41728] AH00529: /var/www/nom_du_repertoire/_h5ai/public/.htaccess pcfg_openfile: unable to check htaccess file, ensure it is readable and that '/var/www/nom_du_repertoire/_h5ai/public/' is executable

Je fais donc :

Code :

chmod 755 /var/www/nom_du_repertoire/_h5ai/public

Et comme ça a continué de m'emmerder :

Code :

chmod -R 755 /var/www/nom_du_repertoire/_h5ai

Vous rechargez la page web de votre navigateur "https://ip.de.la.machine/partage"/ et BINGO !

Maintenant, si on visite la page suivante : "https://ip.de.la.machine/_h5ai/public/index.php" vous obtenez une page de login avec le message suivant :
"The preset password is the empty string, just click login. Change it in '_h5ai/private/conf/options.json'. "

On va donc modifier le mot de passe :

Code :

nano /var/www/nom_du_repertoire/_h5ai/private/conf/options.json

Vers le haut du fichier vous avez :
"passhash": "cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e"

Le morceau de chiffre et de lettres correspond à un mot de passe hashé via sha512. Il va falloir remplacer cette valeur par celle équivalente à votre mot de passe. Par exemple, pour le mot de passe "motdepasse" cela devrait devenir :
"passhash": "72905e7b32d847468edcdbf99f7d218e466cd828300306f1d9f8c3e0512e44fe4394644b581ed52656a2870c9a67c592bc40ca322099aa52bf528c54f9cabde0"

Vous pouvez obtenir le sha512 via ce site : https://md5hashing.net/hash/sha512 , ou celui là : http://md5decrypt.net/Sha512/ .

On va permettre le système de cache public de h5ai :

Code :

chmod o+w /var/www/nom_du_repertoire/_h5ai/public/cache/
chmod o+w /var/www/nom_du_repertoire/_h5ai/private/cache/

Vous pouvez vous connecter à l'adresse suivante :
https://ip.de.votre.machine:####/_h5ai/public/index.php

Si vou voulez aussi activer les modules suivants : image thumbs, movie thumbs, pdf thumbs et shell zip ; il faut installer les dépendances suivantes :

Code :

apt install php-gd ffmpeg zip imagemagick

Vous pouvez configurer h5ai via le fichier suivant :

Code :

nano /var/www/nom_du_repertoire/_h5ai/private/conf/options.json

Dans ce fichier, on peut voir au début :

Code :

"styles": [
           "//fonts.googleapis.com/css?family=Ubuntu:300,400,700%7CUbuntu+Mono:400,700"
       ]

Il s'agit d'un appel aux polices qui sont hébergées chez google. Vous pouvez obtenir la liste en visitant l'url :
fonts.googleapis.com/css?family=Ubuntu:300,400,700%7CUbuntu+Mono:400,700

Ce que l'on va faire c'est modifier un peu tout ça afin d'héberger les polices directement sur la machine. Osef de google, ils ont pas besoin de savoir qu'on a besoin de ces polices.
Pour cela, on va regrouper les différents fichiers dans un dossier "Polices" :

Code :

cd /var/www/nom_du_repertoire
mkdir _h5ai/public/Polices

On se rend dans ce dossier et on va commencer par télécharger le fichier qui est appelé dans la configuration de h5ai :

Code :

cd _h5ai/public/Polices
wget -O polices.css "fonts.googleapis.com/css?family=Ubuntu:300,400,700%7CUbuntu+Mono:400,700"

Note : En faisant cela, j'obtenais un fichier qui comportait moins d'appel à ces polices et vers des fichiers ttf au lieu de woff2 cela doit être du à l'agent (type navigateur web) déclaré par le wget lors du téléchargement. J'ai donc téléchargé le fichier sur mon ordi pour travailler dessus.

Vous voilà avec un fichier "polices_css.css" qui contient donc :

Code :

/* cyrillic-ext */
@font-face {
 font-family: 'Ubuntu';
 font-style: normal;
 font-weight: 300;
 src: local('Ubuntu Light'), local('Ubuntu-Light'), url(https://fonts.gstatic.com/s/ubuntu/v9/X_EdMnknKUltk57alVVbVxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
 font-family: 'Ubuntu';
 font-style: normal;
 font-weight: 300;
 src: local('Ubuntu Light'), local('Ubuntu-Light'), url(https://fonts.gstatic.com/s/ubuntu/v9/nBF2d6Y3AbOwfkBM-9HcWBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
.
.
.

Ce qu'il va falloir faire maintenant, c'est télécharger chacune des polices mentionnées dans ce fichier et changer l'url pour le chemin local. Dans mon cas, je vais utiliser une numérotation des polices automatique en ajout de leur nom. Par exemple pour les deux mises en exemple dans le fichier, je vais les télécharger ainsi :

Code :

sudo wget -O ubuntu1.woff2 https://fonts.gstatic.com/s/ubuntu/v9/X_EdMnknKUltk57alVVbVxJtnKITppOI_IvcXXDNrsc.woff2
sudo wget -O ubuntu2.woff2 https://fonts.gstatic.com/s/ubuntu/v9/nBF2d6Y3AbOwfkBM-9HcWBJtnKITppOI_IvcXXDNrsc.woff2

J'avais pas envie de faire ça à la main, du coup j'ai pris un peu plus de temps pour ça. J'ai fait un petit script qui permet de télécharger chacun des fichiers de polices et remplacer l'url google vers le nouveau nom.
Le script est disponible ici :

Script foogle :

#!/bin/bash

# On met en place un systeme pour eviter de faire tourner le script s il tourne deja
FOOGLELOCKFILE=/tmp/fooglelockfile.txt
if [ -e ${FOOGLELOCKFILE} ] && kill -0 `cat ${FTPLOCKFILE}`; then
   exit 0
fi

# On s'assure que le fichier fooglelockfile est supprimé quand on quitte et on le demande
trap "rm -f ${FOOGLELOCKFILE}; exit" INT TERM EXIT
echo $$ > ${FOOGLELOCKFILE}

# On définit les fichiers en entree et autres parametres
# le fichier telecharge depuis google
googlefontcss="police.css"
# le dossier ou vont etre telecharge les polices
fontfolder="fongle"
# la regex sur l url google dans le css
regexfoogle="(.*)https://fonts\.gstatic\.com/s/(.*)/(.*)/(.*)\.woff2(.*)"
# fichier de sortie css
fooglecss="foogle.css"

mkdir ./"$fontfolder"
cp ./"$googlefontcss" ./"$fooglecss"
i=1

cat "$googlefontcss" | while read -r "line" ; do
if [[ "$line" =~ $regexfoogle ]]; then
url="https://fonts.gstatic.com/s/""${BASH_REMATCH[2]}""/""${BASH_REMATCH[3]}""/""${BASH_REMATCH[4]}"".woff2"
fontname="${BASH_REMATCH[2]}""$i"
echo "$url" >> ./listurl.txt
wget -O ./"$fontfolder"/"$fontname".woff2 "$url"
sed -i "s|$url|$fontname.woff2|g" ./"$fooglecss"
i=$[$i+1]
fi
done

echo "-----------------------------------"
echo "-----------------------------------"
echo "Et ba on dirait que c est tout bon."
echo "-----------------------------------"
echo "-----------------------------------"

# On supprime le FOOGLELOCKFILE
rm -f ${FOOGLELOCKFILE}

exit 0

Vous pouvez copier tout ça dans un fichier :

Code :

nano script_foogle.bash

Vous donnez la permission d'exécution et lancez ce script avec les commandes :

Code :

sudo chmod +x script_foogle.bash
bash -x script_foogle.bash

Note : Fonctionne sous linux ou via l'interpréteur de commande linux de windows en ayant les bonnes dépendances.

Vous obtiendrez un dossier "fongle" qui contiendra toutes les polices renommées et un fichier "foogle.css" qui sera identique au fichier css téléchargé depuis google sauf que les urls des polices sont des chemins relatifs depuis ec fichier aux emplacements des fichiers. On va mettre le fichier "foogle.css" dans le même dossier "Polices" donc on a juste besoin des noms des fichiers.

Pour votre facilité, voici un zip du dossier fongle avec le fichier css inclu dedans : fongle.zip

Vous mettez le contenu du dossier "fongle" et le fichier "foogle.css" dans le dossier "Polices" créé plus tôt, en utilisant filezilla et une connexion sftp.

On va maintenant modifier le fichier de configuration de h5ai :

Code :

sudo nano /var/www/nom_du_repertoire/_h5ai/private/conf/options.json

Et on modifie le début avec l'appel à google en :

Code :

"styles": [
           "../Polices/foogle.css"
       ]

Voilà, la configuration des polices est modifiée et on utilise les fichiers locaux :) On va maintenant modifier d'autres options de ce fichier :

Code :

"view": {
       "binaryPrefix": false,
       "disableSidebar": true,

Je désactive la barre sur le côté qui peut afficher l'arborescence, il y a un fil d'arianne en haut, cela suffira.

Code :

"download": {
       "enabled": false,
       "type": "php-tar",
       "packageName": null,
       "alwaysVisible": false

Je désactive la possibilité de télécharger plusieurs fichiers en même temps.

Code :

"filter": {
       "enabled": false,
       "advanced": true,
       "debounceTime": 100,
       "ignorecase": true
   },

Je désactive la recherche par mots clefs, on se servira de la fonction de recherche.

Code :

"foldersize": {
       "enabled": true,
       "type": "shell-du"
   },

Je modifie le clacul de la taille des dossiers avec "shell-du' qui est plus rapide mais prend en compte la taille des dossiers (pas grande différence).

Code :

"info": {
       "enabled": false,
       "show": false,
       "qrcode": false,
       "qrFill": "#999",
       "qrBack": "#fff"
   },

Je désactive cette barre d'infos avec possibilité de qrcode (pas vu de différence).

Code :

"search": {
       "enabled": true,
       "advanced": true,
       "debounceTime": 300,
       "ignorecase": true
   },

J'active la fonction de recherche récursive avec sa fonction avancée ("ab" trouvera "ab", "axbx", "amotbmot", mais pas "ba").

Code :

"thumbnails": {
       "enabled": false,
       "img": ["img-bmp", "img-gif", "img-ico", "img-jpg", "img-png"],
       "mov": ["vid-avi", "vid-flv", "vid-mkv", "vid-mov", "vid-mp4", "vid-mpg", "vid-webm"],
       "doc": ["x-pdf", "x-ps"],
       "delay": 1,
       "size": 240,
       "exif": false,
       "chunksize": 20
   },

Je désactive la création de miniatures.

Code :

"tree": {
       "enabled": false,
       "show": false,
       "maxSubfolders": 50,
       "naturalSort": true,
       "ignorecase": true
   }

Je désactive l'arborescence.

Maintenant que l'on a fait, ça, on peut styliser un peu notre page.
Lors de nos modifications du fichiers de configuration, on a pu voir la partie suivante :

Code :

/*
   Allow customized header and footer files.
   First checks for files "_h5ai.header.html" and "_h5ai.footer.html" in the current directory.
   If not successful it checks all parent directories (starting in the current directory) for
   files "_h5ai.headers.html" and "_h5ai.footers.html".
   Note the different filenames: "header" (only current) - "headers" (current and sub directories)!
   The file's content will be placed inside a <div/> tag above/below the main content.
   If a file's extension is ".md" instead of ".html" its content will be interpreted as markdown.
   */
   "custom": {
       "enabled": true
   },

On va se servir de cette possibilité pour ajouter un style.
Je crée donc un fichier "_h5ai.headers.html" dans le dossier "nom_du_repertoire" :

Code :

cd /var/www/nom_du_repertoire/
nano _h5ai.headers.html

Dedans on met :

Code :

<div class="top-message">
   <table><tr>
       <td><img src="/kaamlogo.png" alt="logo" width="163px"></td>
       <td><p>On a même un tabouret ! Quand on s’assoit d’ssus, on se retrouve sur un autre tabouret dans une taverne dans le Languedoc [...] Ouais, le siège de transport qu’ils appellent. En plus, comme par hasard c’est moi qui ai essayé le premier. Deux semaines et demi plus le bateau qu’ça m’a pris pour revenir. J’avais pas compris qu’en me rasseyant d’ssus, ça me ramenait de l’aut’côté. Et à l’arrivée j’me suis fait mettre une chasse, parce que j’avais ramené l’autre tabouret, et que soit-disant il aurait fallu qu’il reste là-bas. Pourtant ils marchent les deux tabourets ! Eh ben ils sont l’un à côté de l’autre. Alors ça fait pas pareil.<br><br>
       Perceval, <i>Le Chaudron Rutilant</i></p></td>
   </tr></table>
</div>

Puis le fichier "_h5ai.footers.html" :

Code :

nano _h5ai.footers.html

Qui contient :

Code :

<div class="bottom-message">
   <div class="bottom-p-message">
   <p>Allez, y'a plein de bruit, là ! Si ça se trouve c'est bourré d'oiseaux venimeux. Y'en a des rouges, des jaunes, des re-rouges et des pourpres !<br>
Y bouffent que des noisettes et des escalopes de veau. Et quand ils vous donnent un coup de bec vous voyez une grande lumière et ça vous donne la diarrhée !<br>
Perceval, <i>Dux Bellorum</i></p>
   </div>
</div>

Dans le fichier "_h5ai/public/css/styles.css" on ajoute en fin de fichier :

Code :

.top-message p{padding-left:20px;padding-right:40px;font-size:1.3em;text-align:justify;}#content{padding-left:15%;padding-right:15%;background-image:url("/fond.png");}.bottom-message p{position:fixed;bottom:0;text-align:center;background-color:#ffffff;box-shadow:0 0 50px 50px #ffffff;width:65%;}.bottom-message{vertical-align:text-bottom;}

Et on uploade les fichiers images suivant dans le répertoire "nom_du_repertoire" :
- fond.png
- kaamlogo.png

Et vous obtenez un style de ce genre :

A vous d'adapter comme vous le souhaitez.


On va maintenant modifier le style de la page "https://ip.de.la.machine/" afin qu'elle soit plus sympa à voir et contienne un lien vers notre répertoire avech5ai de mis en place.

Pour cela, on crée un fichier nommé "index.html" dans le réperoire "nom_du_repertoire" :

Code :

nano index.html

Dedans vous mettez :

Code :

<!DOCTYPE html>
<html>
<head>
 <title>Caverne</title>
</head>
<body style="background-image:url(background.jpg);background-size:cover;">

<a style="position: fixed; top:10px;right:20px;" href="/partage"><img src="ninja.png" alt="Lien ninja"></a>


<p style="background-color:#FFF;font-size=small;position: fixed; bottom:10px;right:20px;box-shadow: 0 0 5px 5px #ffffff;opacity: 0.7;">Image source : http://xxxgigagaloxxx.web.fc2.com/</p>

</body>
</html>

Note : Modifier " href="/partage" " au besoin si vous avez appelé votre dossier partagé autrement.

Puis vous uploadez les images suivantes dans ce même répertoire :
- background.jpg
- ninja.png

Vous voilà avec une page d'accueil et un lien vers votre listing en haut à droite en cliquant sur le ninja :)

On va mettre en place un accès via un compte utilisateur à ce répertoire.
Pour cela on rajoute des lignes dans le .htaccess situé dans le dossier "partage" :

Code :

nano partage/.htaccess

Et on rajoute en fin de fiichier :

Code :

# Authentification
AuthType Basic
AuthName "Acces limité, rentrez le mot de passe."
AuthBasicProvider file
AuthUserFile /usr/local/apache/passwords
Require valid-user

On va donc stocker les mots de passe dans le dossier "/usr/local/apache" :

Code :

mkdir /usr/local/apache

Pour ajouter un utilisateur à la liste des personnes autorisées, créé son compte à l'aide de la commande suivante :

Code :

htpasswd -c /usr/local/apache/passwords nom_d_utilisateur

il vous sera demandé le mot de passe associé.
Note : Ce compte n'a pas besoin d'être un utilisateur du système, c'est même mieux dans le cas contraire.

Pour créer un nouveau compte en plus il faut faire :

Code :

htpasswd /usr/local/apache/passwords nouveau_compte

Note : Il n'y a plus l'option -c.

Pour en supprimer un, il faut juste supprimer la ligne correspondante dans le fichier "/usr/local/apache/passwords".

Maintenant, lorsque vous voudrez accéder à votre listing, un couple utilisateur/mot de passe vous sera demandé. :)