# Outils

# Thumbor

# Fonctionnement

### Introduction

Thumbor est un service open-source de traitement d'image en temps réel. Il permet de redimensionner, découper, ajuster, et transformer des images de manière dynamique via des requêtes HTTP. Thumbor est particulièrement utile pour les développeurs web et les administrateurs de sites qui ont besoin de manipuler des images sur le serveur de manière flexible et efficace.

### Fonctionnalités principales

- **Redimensionnement** : Redimensionne les images à des dimensions spécifiées.
- **Recadrage** : Recadre les images pour mettre en avant une partie spécifique.
- **Transformations** : Applique des transformations telles que la rotation, le renversement, et le changement de format (JPEG, PNG, etc.).
- **Filtrage** : Applique des filtres pour ajuster la luminosité, le contraste, ajouter des effets comme le flou, et plus encore.
- **Optimisation** : Optimise les images pour le web, réduisant ainsi leur taille tout en maintenant la qualité.
- **Sécurité** : Intègre des options de sécurité pour contrôler l'accès aux transformations d'image.

### Exemples de Transformations

1. ##### **Redimensionnement** 
    
    **Description :** Redimensionne l'image à des dimensions spécifiques. <p class="callout info">https://proxy.hyundai.media/thumb/?**500x300**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Redimensionne l'image à 500 pixels de large et 300 pixels de haut.
2. ##### **Recadrage Centré**
    
    **Description :** Recadre l'image pour qu'elle soit centrée sur une zone de 300x200 pixels. <p class="callout info">https://proxy.hyundai.media/thumb/?**300x200:600x400**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Recadre l'image de 300x200 pixels en son centre.
3. ##### **Rotation**
    
    **Description :** Tourne l'image de 90 degrés. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:rotate(90)**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Tourne l'image de 90 degrés dans le sens des aiguilles d'une montre.
4. ##### **Effet de Flou**
    
    **Description :** Applique un effet de flou sur l'image. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:blur(10)**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Applique un flou de 10 pixels sur l'image.
5. ##### **Conversion en Noir et Blanc**
    
    **Description :** Convertit l'image en noir et blanc. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:grayscale()**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image en niveaux de gris, supprimant toutes les couleurs.
6. ##### **Ajustement de la Luminosité**
    
    **Description :** Augmente la luminosité de l'image. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:brightness(20)**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Augmente la luminosité de l'image de 20%.
7. ##### **Ajout de Bordures**
    
    **Description :** Ajoute une bordure noire autour de l'image. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:frame(5, "black")**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Ajoute une bordure de 5 pixels de large de couleur noire autour de l'image.
8. ##### **Miroir Horizontal**
    
    **Description :** Retourne l'image horizontalement. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:flip()**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Retourne l'image de gauche à droite.
9. ##### **Miroir Vertical**
    
    **Description :** Retourne l'image verticalement. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:flop()**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Retourne l'image de haut en bas.
10. ##### **Format de Sortie JPEG**
    
    **Description :** Convertit l'image au format JPEG. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:format(jpeg)**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image au format JPEG.

### Formats pris en charge

1. ##### **JPEG**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:format(jpeg)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image au format JPEG.
2. ##### **PNG**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:format(png)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image au format PNG.
3. ##### **WebP**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:format(webp)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image au format WebP.
4. ##### **GIF**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:format(gif)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image au format GIF.
5. ##### **AVIF**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:format(avif)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image au format AVIF.

### Exemple avec Plusieurs Filtres

Thumbor permet d'appliquer plusieurs filtres en les combinant dans l'URL. Voici un exemple où plusieurs filtres sont appliqués :

**Description :** Redimensionne l'image, applique un effet de flou, ajuste la luminosité, et convertit l'image au format JPEG.

<p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:blur(5):brightness(10):format(jpeg)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>

**Explication :**

- `350x200` : Redimensionne l'image à 350 pixels de large et 200 pixels de haut.
- `filters:blur(5)` : Applique un flou de 5 pixels.
- `filters:brightness(10)` : Augmente la luminosité de 10%.
- `filters:format(jpeg)` : Convertit l'image au format JPEG.

### Autres Exemples de Filtres Combinés


1. ##### **Recadrage Centré et Conversion en PNG**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?300x200:600x400/filters:format(png)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Recadre l'image de 300x200 pixels en son centre et la convertit au format PNG.

1. ##### **Rotation et Noir et Blanc**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:rotate(90):grayscale()/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Tourne l'image de 90 degrés et la convertit en niveaux de gris.
2. ##### **Flip Horizontal et Frame**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:flip():frame(5,"black")/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Retourne l'image horizontalement et ajoute une bordure noire de 5 pixels.
3. ##### **JPEG avec qualité modifiée**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:quality(80):format(jpeg)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg </p>
    
    **Explication :** Redimensionne l'image à 350x200 pixels et ajuste la qualité du JPEG à 80%.

### Paramètres AVIF dans Thumbor

- **Qualité (quality)**: Permet de spécifier la qualité de l'image AVIF.
- **Vitesse (speed)**: Contrôle la vitesse de compression. Une valeur plus basse donne une meilleure compression (meilleure qualité mais plus lente), tandis qu'une valeur plus élevée donne une compression plus rapide (moins bonne qualité mais plus rapide).

<p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:quality(60):speed(4):format(avif)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>

**Explication :**

- `350x200` : Redimensionne l'image à 350 pixels de large et 200 pixels de haut.
- `filters:quality(60)` : Ajuste la qualité de l'image AVIF à 60%.
- `filters:speed(4)` : Définit la vitesse de compression à 4 pour l'image AVIF.
- `filters:format(avif)` : Convertit l'image au format AVIF.

### Exemple d'URL pour Ajouter un Watermark

  
**Description :** Ajoute un watermark à une image, spécifie l'image de watermark, sa position, et son opacité.

<p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:watermark(https://example.com/path/to/watermark.png,10,10,50)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>

  
**Explication :**

- **350x200 :** Redimensionne l'image à 350 pixels de large et 200 pixels de haut.
- **filters:watermark(URL, X, Y, Alpha) :** Applique un watermark à l'image.
- **URL :** L'URL de l'image à utiliser comme watermark.
- **X :** Position horizontale du watermark (en pixels) par rapport au coin supérieur gauche de l'image.
- **Y :** Position verticale du watermark (en pixels) par rapport au coin supérieur gauche de l'image.
- **Alpha :** Opacité du watermark (0-100, où 0 est totalement transparent et 100 totalement opaque).

### Filtres Supplémentaires

##### **Fill (Remplissage)**

**Description :** Remplit l'image avec une couleur spécifique si elle n'atteint pas les dimensions spécifiées.

<p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:fill(white)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>

**Explication:** Remplit l'image avec une couleur blanche pour atteindre les dimensions 350x200 pixels.

##### **Round Corner (Coins Arrondis)**

**Description :** Applique des coins arrondis à l'image.

<p class="callout info">https://proxy.hyundai.media/thumb/?filters:round\_corner(20,20,5)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>

**Explication:** Applique des coins arrondis avec un rayon de 20 pixels, un lissage de 20, et une opacité de 5.

### Gestion des images issues de NocoDB

Le proxy gère également les transformations d'images issues de nocodb

<p class="callout info">https://proxy.hyundai.media/thumb/?fit-in/350x300/filters:fill(002c5f):background\_color(002c5f):border(5,white):format(webp):quality(100)/dltemp/DtS-QtG9HKyOFvv7/1720804200000/noco/pt1ltv5xyoreh11/md6xxnbcufy5s3c/cn472ajk23jslj8/s2L4pI30SPEDfKnSr-.png</p>

L'url de l'image NocoDB doit obligatoirement commencer par "dltemp/"

# Proxy

### Proxy PHP pour Thumbor avec Support de NocoDB

#### Description

Ce script PHP sert de proxy pour accéder à Thumbor, tout en téléchargeant et en traitant les images provenant de NocoDB. Il cache également les images pour améliorer les performances et inclut des fonctionnalités de journalisation.

### Structure du Projet

1. **proxy.php**: Script principal pour servir les images via Thumbor.
2. **config.php**: Fichier de configuration contenant les paramètres essentiels.
3. **cleanup.php**: Script pour nettoyer les fichiers temporaires et le cache.
4. **debug.log**: Fichier de journalisation des événements du proxy.
5. **temp/**: Dossier pour stocker temporairement les images téléchargées.
6. **cache/**: Dossier pour stocker les images mises en cache.

### Explication du Code

#### 1. proxy.php

- **Initialisation** :
    
    
    - Active les rapports d'erreurs et affiche les erreurs.
    - Charge les dépendances via Composer.
    - Charge la configuration depuis `config.php`.
    - Initialise le cache.
- **Fonction de Journalisation** :
    
    
    - `log_message` écrit les messages de log dans un fichier spécifié si la journalisation est activée dans la configuration.
- **Vérification et Création des Dossiers Temporaire** :
    
    
    - Vérifie et crée le dossier temporaire s'il n'existe pas.
    - Vérifie si le dossier est accessible en écriture.
- **Fonction de Vérification de Domaine Autorisé** :
    
    
    - `isDomainAllowed` vérifie si le domaine d'une URL donnée est autorisé en se basant sur une liste de domaines autorisés.
- **Fonction pour Générer des Noms de Fichier Aléatoires** :
    
    
    - `generateRandomFileName` génère un nom de fichier aléatoire pour les fichiers temporaires.
- **Traitement de la Requête** :
    
    
    - Récupère et analyse les paramètres de la requête.
    - Vérifie si l'URL de l'image est vide ou mal formée.
    - Vérifie si l'URL de l'image est une URL NocoDB ou une URL externe autorisée.
    - Télécharge et traite l'image si elle provient de NocoDB.
    - Construit l'URL Thumbor et récupère l'image transformée.
- **Mise en Cache** :
    
    
    - Met en cache les images transformées pour améliorer les performances.

#### 2. config.php

Ce fichier contient les paramètres de configuration pour le proxy, incluant :

- Les domaines autorisés.
- Les URLs de base pour Thumbor et NocoDB.
- Les chemins pour les dossiers temporaires et de cache.
- Les options de journalisation.
- Les types MIME autorisés.
- Les tailles maximales d'image.

#### 3. cleanup.php

- **Nettoyage des Fichiers Temporaires et de Cache** : 
    - `cleanupOldFiles` supprime les fichiers plus anciens qu'une certaine période dans les dossiers temporaires et de cache.

### Conclusion

Ce proxy PHP est conçu pour servir les images via Thumbor tout en téléchargeant et en traitant les images provenant de NocoDB. Il met en cache les images pour des performances optimales et inclut des fonctionnalités de journalisation et de nettoyage pour gérer les fichiers temporaires et de cache.

# Uptime Kuma

# Monitorring

### Présentation

Uptime Kuma est un logiciel open-source de surveillance de la disponibilité des services web et des serveurs. Il permet aux utilisateurs de suivre en temps réel le statut de divers services, sites web, et serveurs, en vérifiant régulièrement leur disponibilité et leur temps de réponse. Les principales fonctionnalités d'Uptime Kuma incluent :

1. **Surveillance de la disponibilité** : Uptime Kuma peut surveiller une variété de services comme les sites web HTTP/HTTPS, les services TCP, les bases de données et les serveurs de messagerie.
2. **Notifications** : Les utilisateurs peuvent configurer des notifications via plusieurs canaux (email, Slack, Telegram, Discord, etc.) pour être alertés en cas de panne ou de rétablissement d'un service.
3. **Interface utilisateur** : L'application dispose d'une interface web intuitive qui permet de visualiser rapidement l'état de tous les services surveillés, avec des graphiques et des statistiques sur la disponibilité et les temps de réponse.
4. **Historique et rapports** : Uptime Kuma garde un historique des incidents et des périodes de disponibilité, permettant aux utilisateurs de générer des rapports détaillés pour analyser la performance de leurs services au fil du temps.
5. **Installation facile** : Le logiciel est facile à installer et à configurer, souvent déployé via des conteneurs Docker ou directement sur un serveur Linux.

En résumé, Uptime Kuma est un outil puissant et flexible pour assurer la surveillance continue et proactive des infrastructures numériques, aidant les administrateurs à maintenir une haute disponibilité et à réagir rapidement en cas de problème.

### Connexion

[http://192.168.1.146:3001/dashboard](http://192.168.1.146:3001/dashboard)

login : innocean  
mdp : x?Gbr99q#$eF#Ca3

# Plane

# Déploiement Vercel

*Un guide étape par étape pour déployer une application sur Vercel*

##### **Étape 1 :**

Avoir un repository Github sous l'organisation INNOCEAN.  
Se connecter à Vercel avec le compte TeamProd.

##### **Étape 2 :**

Ouvrir le terminal et lancer la commande `vercel login`  
Se connecter avec le compte GitHub TeamProd

Lancer la commande `vercel --prod`

##### **Étape 3 :**

Installer Vercel-CLI avec la commande suivante : `npm i -g vercel`

Ajouter à la racine du projet un dossier ".github"  
Dans ce dossier, créer un nouveau dossier "workflows".  
A l'intérieur de ce dossier, créer un fichier "deploy.yml" contenant la configuration suivante :

```yaml
name: Deploy to Vercel

on:
  push:
    branches:
      - "*" # Déclencher pour toutes les branches sauf celles explicitement ignorées

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18" # Utilisez la version Node.js requise par votre projet

      - name: Install dependencies
        run: npm install

      - name: Deploy to Vercel (Production)
        if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master' # Si la branche est 'main ou master'
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
        run: npx vercel --token $VERCEL_TOKEN --prod --confirm --cwd .

      - name: Deploy to Vercel (Staging)
        if: github.ref != 'refs/heads/main' && github.ref != 'refs/heads/master' # Si la branche n'est pas 'main ou master'
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
        run: npx vercel --token $VERCEL_TOKEN --confirm --cwd .
```

**NE PAS OUBLIER COMMIT &amp; PUSH SUR MAIN**

##### **Étape 4 :**

Dans le repository GitHub, aller à l'onglet **Settings &gt; Secrets and variables &gt; Actions &gt; New Repository Secret**  
Le nom de la clé doit être : "VERCEL\_TOKEN"  
Le secret doit être : `HqqGOjsZyXFgAkKmvJkmLite` (Clé Vercel qui est déjà générée)

##### **Étape 5 :**

Si vous voulez que l'URL de déploiement soit différente sur Vercel, vous pouvez créer une variable d'environnement qui prendra en valeur votre URL de déploiement en production (par exemple sur le site de Hyundai) dans votre projet Vue.js et la changer directement dans Vercel pour qu'elle soit à la racine.

Aller dans votre projet sur le site de Vercel puis **Settings &gt; Environnement Variables.** Ensuite, ajouter le nom de la variable que vous avez créée dans votre fichier .env et ne rien mettre dans la value.

##### **Étape 6 :**

Vérifier l'avancement du déploiement dans GitHub Actions.  
Vérifier le déploiement sur Vercel

# Annexe 2 : Harcèlement moral et Sexuel

Voici des exemples de fraudes internes, sans que cette liste soit exhaustive :

#### Schémas de facturation

- Surfacturation des clients.
- Enregistrement de crédits, rabais ou remboursements fictifs aux clients.
- Schémas de « pay and return » (où un employé crée un trop-payé à un fournisseur et empoche ensuite le remboursement).
- Utilisation de fournisseurs fictifs ou de sociétés-écrans pour générer de fausses factures.

#### Mauvaise utilisation des comptes

- Fraude par virement bancaire (transferts frauduleux vers des comptes bancaires).
- Ventes ou créances non enregistrées.
- Fraude sur les comptes employés (où un employé est également client et procède à des ajustements non autorisés sur ses comptes).
- Création de notes de crédit falsifiées au nom de clients, versées sur un compte personnel de l'employé ou sur celui d'une entreprise qu'il contrôle.
- Vol de mots de passe des systèmes de paiement et saisie de paiements frauduleux sur son propre compte.

#### Inventaire et actifs fixes

- Vol d'inventaire.
- Radiations frauduleuses et autres débits fictifs d'inventaire.
- Ventes frauduleuses d'inventaire.
- Vol d'actifs fixes, y compris les ordinateurs et autres biens liés aux technologies de l’information.
- Vol ou utilisation abusive d’informations propriétaires ou confidentielles (informations sur les clients, propriété intellectuelle, grilles tarifaires, plans d’affaires, etc.).
- Réception de biens ou services gratuits ou à prix réduit de la part de fournisseurs.
- Utilisation non autorisée de biens de l'entreprise à des fins personnelles.
- Transactions personnelles effectuées par des employés en utilisant des ressources de l'entreprise.

#### Approvisionnement

- Modification de bons de commande légitimes.
- Falsification de documents pour obtenir des autorisations de paiement.
- Contrefaçon de signatures sur des autorisations de paiement.
- Soumission de fausses factures de fournisseurs fictifs ou existants.
- Changements non autorisés des termes de paiement des fournisseurs ou d’autres détails les concernant.
- Interception de paiements destinés aux fournisseurs.
- Envoi de factures fictives ou en double à des fournisseurs.
- Mauvaise utilisation des cartes de crédit de l’entreprise.
- Factures majorées pour des contrats attribués à des fournisseurs liés à un employé.
- Vente d’informations sensibles sur des appels d’offres, des contrats ou d'autres données confidentielles.

#### Paie

- Employés fictifs (« ghost employees ») sur la liste des salariés.
- Falsification des heures travaillées pour obtenir des paiements d’heures supplémentaires frauduleux.
- Abus des systèmes de commission.
- Changements non autorisés des niveaux de salaire.
- Abus des droits à congé ou des jours de repos.
- Déclarations de frais gonflées ou frauduleuses.
- Ajout de dépenses personnelles à des demandes de remboursement légitimes.
- Demande de remboursement multiple pour les mêmes dépenses.
- Fausse déclaration pour des indemnités de travailleur.

#### Pots-de-vin

- Pots-de-vin versés par des fournisseurs à des employés en échange d’un traitement favorable.
- Pots-de-vin versés à la direction en lien avec l'acquisition ou la cession d'une activité.
- Vente de biens appartenant à l’entreprise à un prix inférieur au marché, permettant à l’employé de percevoir une rétrocommission ou de revendre les biens à un prix supérieur ultérieurement.
- Achat de biens à un prix supérieur au marché en échange d’un pot-de-vin.
- Traitement préférentiel accordé à des clients en échange d’un pot-de-vin.

#### Intérêts personnels

- Collusion avec des clients et/ou des fournisseurs.
- Favoritisme envers un fournisseur dans lequel l'employé a un intérêt financier.
- Création et utilisation d’une société de conseil personnelle par l’employé à des fins personnelles, au détriment de l'entreprise.
- Embauche par l’employé d’une personne de son entourage, au détriment d’un candidat plus qualifié.
- Transfert d’informations à un concurrent par un employé prévoyant de rejoindre l’entreprise concurrente.
- Fausse déclaration par des initiés dans le cadre d’une fusion, acquisition ou investissement.
- Délit d’initié (utilisation d’informations commerciales non publiques pour réaliser des profits sur les marchés financiers).