Comment empêcher les captures d’écran et enregistrements vidéo sur son site web

Peut-on vraiment empêcher les captures d’écran ?

Non, pas totalement. Même Netflix ou Disney+, avec des systèmes de protection très avancés, ne peuvent pas empêcher quelqu’un de filmer son écran avec un téléphone. Dès qu’un contenu s’affiche, il peut être copié d’une manière ou d’une autre.

Mais cela ne veut pas dire qu’il ne faut rien faire. Comme pour un local ou un ordinateur, chaque barrière supplémentaire décourage un peu plus les curieux et les personnes malveillantes. Que tu sois développeur, formateur, propriétaire d’une plateforme e-learning ou créateur de contenu, voici comment empêcher les captures d’écran et les enregistrements autant que possible.

Étape 1 : empêcher les captures d’écran via le clic droit et les raccourcis

Beaucoup d’utilisateurs passent par le clic droit, la touche Impr. écran ou les outils de développement (F12, Ctrl + Maj + I, Ctrl + U). Ce script les bloque et affiche un message :

<script>
  document.addEventListener('contextmenu', e => e.preventDefault());

  document.addEventListener('keydown', function(e) {
    if (e.key === 'PrintScreen') {
      alert("La capture d'écran est désactivée sur ce site.");
      e.preventDefault();
    }
    if ((e.ctrlKey && e.shiftKey && e.key === 'I') || 
        (e.ctrlKey && e.key === 'U') || 
        (e.key === 'F12')) {
      alert("Cette action n’est pas autorisée.");
      e.preventDefault();
    }
  });
</script>

<script>
  document.addEventListener('contextmenu', e => e.preventDefault());

  document.addEventListener('keydown', function(e) {
    if (e.key === 'PrintScreen') {
      alert("La capture d'écran est désactivée sur ce site.");
      e.preventDefault();
    }
    if ((e.ctrlKey && e.shiftKey && e.key === 'I') || 
        (e.ctrlKey && e.key === 'U') || 
        (e.key === 'F12')) {
      alert("Cette action n’est pas autorisée.");
      e.preventDefault();
    }
  });
</script>

• Il bloque le menu du clic droit
• Il empêche l’affichage du code source avec Ctrl + U
• Il bloque l’accès à la console avec F12 ou Ctrl + Maj + I
• Il affiche une alerte quand la touche Impr. écran est détectée

Étape 2 : protéger tes vidéos contre les enregistrements

Une vidéo visible est une vidéo enregistrable. Tu peux toutefois limiter fortement les risques.

Solution 1 : un lecteur vidéo avec DRM

Pour des formations ou des contenus payants, utilise un lecteur comme Shaka Player ou Video.js avec un système de gestion des droits numériques (DRM) comme Google Widevine. La vidéo est chiffrée et ne se lit que dans un contexte autorisé :

• Le téléchargement direct du fichier devient impossible
• Les extensions et logiciels de téléchargement sont bloqués
• Sur certains navigateurs et systèmes, la capture d’écran de la vidéo affiche même un écran noir

Solution 2 : désactiver le clic droit sur la vidéo

Pour empêcher les captures d’écran faciles du lecteur, cette astuce retire le menu « Enregistrer la vidéo sous » du clic droit :

<video controls oncontextmenu="return false;">
  <source src="video.mp4" type="video/mp4">
</video>

<video controls oncontextmenu="return false;">
  <source src="video.mp4" type="video/mp4">
</video>

Étape 3 : flouter le contenu quand la page perd le focus

Pour empêcher les captures d’écran discrètes, une astuce souvent négligée consiste à flouter automatiquement le contenu quand l’utilisateur change d’onglet ou réduit la fenêtre. L’événement visibilitychange détecte ce changement :

<style>
  #contenu-confidentiel.flou {
    filter: blur(10px);
    pointer-events: none;
  }
</style>

<div id="contenu-confidentiel">
  <p>Voici du contenu que tu veux garder privé.</p>
</div>

<script>
  document.addEventListener('visibilitychange', () => {
    const contenu = document.getElementById('contenu-confidentiel');
    if (document.hidden) {
      contenu.classList.add('flou');
    } else {
      contenu.classList.remove('flou');
    }
  });
</script>

<style>
  #contenu-confidentiel.flou {
    filter: blur(10px);
    pointer-events: none;
  }
</style>

<div id="contenu-confidentiel">
  <p>Voici du contenu que tu veux garder privé.</p>
</div>

<script>
  document.addEventListener('visibilitychange', () => {
    const contenu = document.getElementById('contenu-confidentiel');
    if (document.hidden) {
      contenu.classList.add('flou');
    } else {
      contenu.classList.remove('flou');
    }
  });
</script>

Dès que la page est masquée, le contenu devient illisible. Pour aller plus loin, tu peux aussi écouter l’événement blur de la fenêtre, déclenché quand certains outils de capture prennent le focus.

Étape 4 : protéger l’accès à tes fichiers sensibles

1. Exiger une authentification

Avant d’afficher un contenu sensible, vérifie que l’utilisateur est connecté et qu’il a les droits nécessaires. C’est la protection la plus importante : un contenu qui n’est jamais envoyé ne peut pas être copié.

2. Générer des liens de téléchargement temporaires

Pour tes PDF ou images, ne donne jamais l’adresse directe du fichier. Crée plutôt un lien signé, valable quelques minutes. Voici un exemple en PHP pour générer le lien :

<?php
$secret  = 'remplace-par-une-longue-cle-secrete';
$fichier = 'cours.pdf';
$expire  = time() + 300; // lien valable 5 minutes

$signature = hash_hmac('sha256', $fichier . $expire, $secret);
$lien = 'telecharger.php?f=' . urlencode($fichier) . '&e=' . $expire . '&s=' . $signature;

echo '<a href="' . htmlspecialchars($lien) . '">Télécharger le cours</a>';

<?php
$secret  = 'remplace-par-une-longue-cle-secrete';
$fichier = 'cours.pdf';
$expire  = time() + 300; // lien valable 5 minutes

$signature = hash_hmac('sha256', $fichier . $expire, $secret);
$lien = 'telecharger.php?f=' . urlencode($fichier) . '&e=' . $expire . '&s=' . $signature;

echo '<a href="' . htmlspecialchars($lien) . '">Télécharger le cours</a>';

Et le script qui vérifie la signature avant d’envoyer le fichier, stocké dans un dossier inaccessible depuis le web :

<?php
$secret    = 'remplace-par-une-longue-cle-secrete';
$fichier   = basename($_GET['f'] ?? '');
$expire    = (int) ($_GET['e'] ?? 0);
$signature = $_GET['s'] ?? '';

$attendue = hash_hmac('sha256', $fichier . $expire, $secret);

if (time() > $expire || !hash_equals($attendue, $signature)) {
    http_response_code(403);
    exit('Lien expiré ou invalide.');
}

$chemin = __DIR__ . '/prives/' . $fichier;
if (!is_file($chemin)) {
    http_response_code(404);
    exit('Fichier introuvable.');
}

header('Content-Type: application/pdf');
header('Content-Disposition: inline; filename="' . $fichier . '"');
readfile($chemin);

<?php
$secret    = 'remplace-par-une-longue-cle-secrete';
$fichier   = basename($_GET['f'] ?? '');
$expire    = (int) ($_GET['e'] ?? 0);
$signature = $_GET['s'] ?? '';

$attendue = hash_hmac('sha256', $fichier . $expire, $secret);

if (time() > $expire || !hash_equals($attendue, $signature)) {
    http_response_code(403);
    exit('Lien expiré ou invalide.');
}

$chemin = __DIR__ . '/prives/' . $fichier;
if (!is_file($chemin)) {
    http_response_code(404);
    exit('Fichier introuvable.');
}

header('Content-Type: application/pdf');
header('Content-Disposition: inline; filename="' . $fichier . '"');
readfile($chemin);

3. Bloquer le hotlinking de tes fichiers

Sur un serveur Apache, ce fichier .htaccess refuse l’accès à tes fichiers quand la demande ne vient pas de ton propre site (remplace ton-domaine.be par ton domaine) :

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?ton-domaine\.be/ [NC]
RewriteRule \.(pdf|jpe?g|png|mp4)$ - [F,NC]

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?ton-domaine\.be/ [NC]
RewriteRule \.(pdf|jpe?g|png|mp4)$ - [F,NC]

Étape 5 : bonnes pratiques complémentaires

• Utilise un gestionnaire de sessions pour repérer les connexions multiples ou suspectes
• Surveille les comportements anormaux : téléchargements massifs, scripts inconnus…
• Ajoute un filigrane avec le nom ou l’e-mail de l’utilisateur : une capture qui circule devient traçable
• Explique à tes utilisateurs pourquoi ces protections existent
• Garde ton CMS, tes extensions et tes scripts à jour

En résumé : comment empêcher les captures d’écran ?

Aucune méthode ne garantit une sécurité absolue, mais plus tu ajoutes de couches, plus tu compliques la tâche des curieux. Dans la grande majorité des cas, c’est suffisant :

Aller plus loin

• Mets en pratique la protection par authentification avec PHP et MySQL : crée une application de planning sans framework
• Teste tes protections dans un environnement local propre : installer Docker pour WordPress en local
• Choisis les bons outils pour tes projets : quel est le meilleur stack de développement ?

FAQ : questions fréquentes

Tu as maintenant toutes les clés pour empêcher les captures d’écran et les enregistrements autant que possible sur ton site. Tu veux faire analyser la sécurité de ton site ou protéger un espace e-learning ? Laisse un commentaire !