Comment puis-je désactiver "Enregistrer la vidéo sous ..." dans le menu contextuel d'un navigateur pour empêcher les clients de télécharger une vidéo?
Existe-t-il des solutions plus complètes qui empêchent le client d'accéder directement à un chemin de fichier?
File→Save As
). Même si vous pouviez bloquer cela d'une manière ou d'une autre, ils peuvent afficher la source pour trouver l'URL du fichier. Même si vous pouviez obscurcir un peu cela, ils peuvent l'extraire du cache. Même si vous pourriez compliquer cela (par exemple, le flux), ils peuvent capturer le trafic réseau avec un renifleur ou quelque chose. Le fait est que si vous l'envoyez à un utilisateur, il peut l'enregistrer. Pas moyen de contourner cela. La question que vous devez vous poser est de savoir pourquoi vous devez si mal l'arrêter. Est-ce vraiment nécessaire? Vaut-il l'effort et le manque de convivialité?Réponses:
Vous ne pouvez pas . C'est parce que c'est ce pour quoi les navigateurs ont été conçus: diffuser du contenu . Mais vous pouvez rendre le téléchargement plus difficile .
Tout d'abord, vous pouvez désactiver l'
contextmenu
événement , c'est-à-dire "le clic droit". Cela empêcherait votre skiddie habituel d'extraire de manière flagrante votre vidéo en cliquant avec le bouton droit de la souris et en enregistrant sous. Mais ensuite, ils pourraient simplement désactiver JS et contourner cela ou trouver la source vidéo via le débogueur du navigateur. De plus, c'est une mauvaise UX. Il y a beaucoup de choses légitimes dans un menu contextuel que le simple Enregistrer sous.Vous pouvez également utiliser des bibliothèques de lecteurs vidéo personnalisées. La plupart d'entre eux implémentent des lecteurs vidéo qui personnalisent le menu contextuel à votre guise. Vous n'obtenez donc pas le menu contextuel par défaut du navigateur. Et si jamais ils servent un élément de menu similaire à Enregistrer sous, vous pouvez le désactiver. Mais encore une fois, c'est une solution de contournement JS. Les faiblesses sont similaires à l'option précédente.
Une autre façon de le faire est de diffuser la vidéo en utilisant HTTP Live Streaming . Ce qu'il fait essentiellement, c'est découper la vidéo en morceaux et la servir les uns après les autres. C'est ainsi que la plupart des sites de streaming diffusent des vidéos. Ainsi, même si vous parvenez à enregistrer sous, vous n'enregistrez qu'un morceau, pas la vidéo entière. Il faudrait un peu plus d'efforts pour rassembler tous les morceaux et les assembler à l'aide d'un logiciel dédié.
Une autre technique consiste à peindre
<video>
sur<canvas>
. Dans cette technique, avec un peu de JavaScript, ce que vous voyez sur la page est un<canvas>
élément rendant des cadres à partir d'un caché<video>
. Et comme c'est un<canvas>
, le menu contextuel utilisera<img>
le menu d'un, pas celui d'un<video>
. Vous obtiendrez une image Enregistrer sous au lieu d'une vidéo Enregistrer sous.Vous pouvez également utiliser les jetons CSRF à votre avantage. Votre serveur enverrait un jeton sur la page. Vous utilisez ensuite ce jeton pour récupérer votre vidéo. Votre serveur vérifie s'il s'agit d'un jeton valide avant de diffuser la vidéo ou d'obtenir un HTTP 401 . L'idée est que vous ne pouvez obtenir une vidéo qu'en ayant un jeton que vous ne pouvez obtenir que si vous venez de la page, et non en visitant directement l'URL de la vidéo.
À la fin de la journée, je téléchargerais simplement ma vidéo sur un site vidéo tiers, comme YouTube ou Vimeo. Ils disposent de bons outils de gestion vidéo, optimisent la lecture sur l'appareil et s'efforcent d'éviter que leurs vidéos ne soient extraites sans effort de votre part.
la source
src
du<video>
. Au moment où votre page est chargée, la base de données a le jeton, la page a le jeton. Une fois le<video>
chargement commencé (accède au point de terminaison), le serveur vérifie si le jeton se trouve dans la base de données, le supprime et diffuse le fichier. Si le jeton n'est pas là à la suite d'un deuxième accès , ne diffusez pas le fichier.C'est une solution simple pour ceux qui souhaitent simplement supprimer l'option "enregistrer" du clic droit des vidéos html5
la source
src
attribut et ouvrez-le dans un autre onglet ou utilisez-lewget
pour le télécharger!Réponse simple,
VOUS NE POUVEZ PAS
S'ils regardent votre vidéo, ils l' ont déjà
la source
Oui, vous pouvez le faire en trois étapes:
Enregistrez un fichier dans ce sous-répertoire nommé ".htaccess" et ajoutez les lignes ci-dessous.
Maintenant, le lien source est inutile , mais nous devons toujours nous assurer que tout utilisateur qui tente de télécharger le fichier ne peut pas recevoir directement le fichier.
Pour une solution plus complète , diffusez maintenant la vidéo avec un lecteur flash (ou un canevas html) et ne créez jamais de lien direct vers la vidéo. Pour supprimer simplement le menu contextuel, ajoutez à votre HTML:
Le résultat:
www.foo.com/player.html lira correctement la vidéo , mais si vous visitez www.foo.com/videos/video.mp4:
Cela fonctionnera pour le téléchargement direct, cURL, hotlinking, vous le nommez.
Il s'agit d'une réponse complète aux deux questions posées et non d'une réponse à la question: "Puis-je empêcher un utilisateur de télécharger une vidéo qu'il a déjà téléchargée."
la source
.htaccess
contenuLa meilleure façon que j'utilise habituellement est très simple, je désactive complètement le menu contextuel dans toute la page, pur html + javascript:
C'est tout! Je fais cela parce que vous pouvez toujours voir la source par un clic droit.
Ok, vous dites: "Je peux utiliser directement la source de la vue du navigateur" et c'est vrai mais nous partons du fait que vous NE POUVEZ PAS arrêter de télécharger des
html5
vidéos.la source
En tant que développeur côté client, je recommande d'utiliser l'URL blob, l'URL blob est une URL côté client qui fait référence à un objet binaire
en HTML, laissez votre vidéo
src
vide et dans JS récupérez le fichier vidéo en utilisant AJAX, assurez-vous que le type de réponse est blobRemarque: cette méthode n'est pas recommandée pour les fichiers volumineux
ÉDITER
Utilisez le blocage d'origine croisée pour éviter le téléchargement direct
si la vidéo est livrée par une API Utilisez une méthode différente (PUT / POST) au lieu de 'GET'
la source
PHP envoie la balise vidéo html5 avec une session où la clé est une chaîne aléatoire et la valeur est le nom de fichier.
Maintenant, PHP est invité à envoyer la vidéo. PHP récupère le nom du fichier; supprime la session et envoie la vidéo instantanément. De plus, tous les en-têtes «no cache» et de type mime doivent être présents.
Maintenant, si l'utilisateur copie l'url dans un nouvel onglet ou utilise le menu contextuel, il n'aura aucune chance.
la source
Vous pouvez au moins empêcher les non-experts en technologie d'utiliser le menu contextuel du clic droit pour télécharger votre vidéo. Vous pouvez désactiver le menu contextuel pour n'importe quel élément à l'aide de l'attribut oncontextmenu.
Cela fonctionne pour l'élément body (page entière) ou juste une seule vidéo en l'utilisant à l'intérieur de la balise vidéo.
la source
Nous avons fini par utiliser AWS CloudFront avec des URL expirant. La vidéo se chargera, mais au moment où l'utilisateur cliquera avec le bouton droit de la souris et choisit Enregistrer sous, l'URL de la vidéo initialement reçue a expiré. Effectuez une recherche sur CloudFront Origin Access Identity.
La production de l'URL de la vidéo nécessite une paire de clés qui peut être créée dans l'AWS CLI. FYI ce n'est pas mon code mais ça marche très bien!
la source
Nous pourrions rendre cela pas si facile en masquant le menu contextuel, comme ceci:
la source
+1 manière simple et multi-navigateurs: vous pouvez également mettre une image transparente sur la vidéo avec un z-index et une opacité css. Ainsi, les utilisateurs verront «enregistrer l'image sous» au lieu de «enregistrer la vidéo» dans le menu contextuel.
la source
le
ne fonctionne plus. Chrome et Opera à partir de juin 2018 ont un sous-menu sur la chronologie pour permettre un téléchargement direct, donc l'utilisateur n'a pas besoin de cliquer avec le bouton droit pour télécharger cette vidéo. Fait intéressant, Firefox et Edge ne l'ont pas ...
la source
À l'aide d'un service tel que Vimeo: connectez-vous
Vimeo > Goto Video > Settings > Privacy > Mark as Secured
et sélectionnez également les domaines d'intégration. Une fois les domaines d'intégration définis, il ne permettra à personne d'intégrer la vidéo ou de l'afficher à partir du navigateur à moins de se connecter à partir des domaines spécifiés. Donc, si vous avez une page sécurisée sur votre serveur qui charge le lecteur Vimeo dans iframe, cela rend les déplacements assez difficiles.la source
Tout d'abord, sachez qu'il est impossible d'empêcher complètement le téléchargement d'une vidéo, tout ce que vous pouvez faire est de le rendre plus difficile . Ie vous cachez la source de la vidéo.
Un navigateur Web télécharge temporairement la vidéo dans une mémoire tampon, donc si cela pouvait empêcher le téléchargement, vous empêcheriez également la vidéo d'être visionnée.
Vous devez également savoir que <1% de la population totale du monde sera capable de comprendre le code source, ce qui le rend de toute façon assez sûr. Cela ne signifie pas que vous ne devez pas non plus le cacher dans la source - vous devriez le faire .
Vous ne devez pas désactiver le clic droit et encore moins afficher un message disant
"You cannot save this video for copyright reasons. Sorry about that."
. Comme suggéré dans cette réponse .Cela peut être très ennuyeux et déroutant pour l'utilisateur. Mis à part cela; s'ils désactivent JavaScript sur leur navigateur, ils pourront quand même faire un clic droit et enregistrer.
Voici une astuce CSS que vous pourriez utiliser:
CSS ne peut pas être désactivé dans le navigateur, protégeant votre vidéo sans réellement désactiver le clic droit. Cependant, un problème est qu'il
controls
ne peut pas non plus être activé, en d'autres termes, ils doivent être définis surfalse
. Si vous allez installer votre propre fonction Lecture / Pause ou utiliser une API qui a des boutons séparés de lavideo
balise, c'est une option réalisable.controls
a également un bouton de téléchargement, donc l'utiliser n'est pas non plus une bonne idée.Voici un exemple JSFiddle .
Si vous souhaitez désactiver le clic droit à l'aide de JavaScript, stockez également la source de la vidéo dans JavaScript. De cette façon, si l'utilisateur désactive JavaScript (permettant un clic droit), la vidéo ne se chargera pas (elle masque également un peu mieux la source vidéo).
De la réponse TxRegex :
Maintenant, ajoutez la vidéo via JavaScript:
JSFiddle fonctionnel
Une autre façon d'empêcher le clic droit consiste à utiliser la
embed
balise. Cela ne fournit cependant pas les contrôles pour exécuter la vidéo, ils devraient donc être intégrés en JavaScript:la source
pointer-events: none;
Eh bien, vous ne pouvez pas le protéger à 100%, mais vous pouvez le rendre plus difficile. ces méthodes que j'explique , je les ai affrontées lors de l'étude des méthodes de protection dans PluralSight et BestDotNetTraining . néanmoins, aucune de ces méthodes ne m'a empêché de télécharger ce que je veux, mais j'ai eu du mal à organiser le téléchargeur pour passer sa protection.
En plus d'autres méthodes mentionnées pour désactiver le menu contextuel. l'utilisateur peut toujours utiliser des outils tiers comme InternetDownload Manager ou un autre logiciel similaire pour télécharger les vidéos. la méthode de protection que j'explique ici est d'atténuer ces logiciels tiers.
l'exigence de toutes ces méthodes est de bloquer un utilisateur lorsque vous identifiez quelqu'un qui télécharge vos vidéos. de cette façon, ils ne peuvent télécharger qu'une ou deux vidéos uniquement avant que vous ne leur interdisiez d'accéder à votre site Web.
avertissement
Je n'accepterai aucune responsabilité si quelqu'un abuse de ces méthodes ou les utilise pour nuire à d'autres ou aux sites Web que j'ai mentionnés à titre d'exemple. c'est juste pour partager des connaissances pour vous aider à protéger votre produit intellectuel.
générer des liens avec une expiration
la condition requise pour cela est de créer un lien de téléchargement par utilisateur. celui-ci peut facilement être géré par le stockage blob azure ou amazon s3. vous pouvez créer un lien de téléchargement avec deux fois l'horodatage d'expiration de la durée de la vidéo. Ensuite, vous devez capturer ce lien vidéo et l'heure demandée. cela est nécessaire pour la méthode suivante. le hic pour cette méthode est que vous générez le lien de téléchargement lorsque l'utilisateur clique sur le bouton de lecture.
lors de l'événement du bouton de lecture, vous enverrez une demande au serveur, obtenez le lien et mettez à jour la source.
réduire le taux de demande de vidéo
puis vous surveillez la vitesse à laquelle l'utilisateur demande la deuxième vidéo. si l'utilisateur demande un lien de téléchargement trop rapidement, vous le bloquez immédiatement. vous ne pouvez pas mettre ce seuil trop grand car vous pouvez bloquer par erreur les utilisateurs qui ne font que parcourir ou parcourir les vidéos.
Activer la plage HTTP
utilisez une bibliothèque js comme videojs pour lire votre vidéo, vous devez également renvoyer un AcceptRange dans votre en-tête. Le stockage d'objets blob Azure prend en charge cela par défaut. de cette façon, le navigateur commence à télécharger la vidéo morceau par morceau. généralement, 32 octets par 32 octets. alors vous devez écouter le
timeupdate
changement de videojs et mettre à jour votre serveur sur le pourcentage de visionnage de la vidéo. le pourcentage de visionnage de la vidéo ne peut pas être supérieur au pourcentage de diffusion de la vidéo. et si vous diffusez un contenu vidéo sans recevoir de changement de pourcentage, vous pouvez bloquer l'utilisateur. parce que c'est sûr qu'ils téléchargent.l'implémentation est délicate car l'utilisateur peut sauter la vidéo en avant ou en arrière, alors soyez conscient de cela lorsque vous l'implémentez.
c'est ainsi que BestDotnetTraining gère le
timeupdate
de toute façon, l'utilisateur est capable de contourner ce problème en utilisant une méthode de téléchargement qui télécharge un fichier via le streaming. presque c # faites-le hors de la boîte et pour nodejs, vous pouvez utiliser
request
module. Ensuite, vous devez démarrer un chronomètre, écouter un paquet reçu et comparer l'octet total reçu par rapport à la taille totale. de cette façon, vous pouvez calculer un pourcentage et le temps passé pour obtenir ce pourcentage. puis utilisez leThread.Sleep()
ou quelque chose comme ça pour retarder le thread le montant que vous devez attendre si vous regardez la vidéo normalement. également avant la mise en veille, l'utilisateur peut appeler le serveur et mettre à jour le pourcentage reçu. donc le serveur pense que l'utilisateur regarde réellement une vidéo.le calcul sera quelque chose comme ceci, par exemple, si vous calculez que vous avez reçu 1 pour cent jusqu'à présent, vous pouvez calculer le montant que vous devez attendre pour dormir le fil de téléchargement. de cette façon, vous ne pouvez pas télécharger une vidéo plus rapidement que sa longueur réelle. si une vidéo dure 24 min. il faudra 24 minutes pour le télécharger. (plus le seuil que nous avons mis dans la première méthode)
vérifier l'agent du navigateur
lorsque vous diffusez une page Web et que vous diffusez le lien vidéo ou que vous acceptez la demande de mise à jour de progression, vous pouvez consulter l'agent du navigateur. si c'est différent, bannissez l'utilisateur.
sachez simplement qu'un ancien navigateur ne transmet pas ces informations. vous devez donc l'ignorer lorsqu'il n'y a pas d'agent de navigateur dans la requête vidéo et la requête de page Web. mais si une demande l'a et une autre pas, alors vous devriez bannir l'utilisateur.
pour contourner ce problème, l'utilisateur peut définir manuellement l'en-tête de l'agent du navigateur comme le navigateur sans tête qu'il utilise pour capturer le lien de téléchargement.
vérifier l'en-tête du référent
lorsque le référent est autre chose que votre URL hôte ou l'URL de la page sur laquelle vous diffusez la vidéo, vous pouvez bannir l'utilisateur, car il place le lien de téléchargement dans un autre onglet ou une autre application. même vous pouvez le faire pour la demande de mise à jour de progression.
la condition pour cela est d'avoir un mappage de la vidéo et la page qui montre cette vidéo. vous pouvez créer une convention ou un modèle pour comprendre ce que devrait être l'URL, cela dépend de votre conception.
pour contourner ce problème, l'utilisateur peut définir manuellement l'en-tête du référent égal à l'URL de la page de téléchargement lors du téléchargement des vidéos.
Calculez le temps entre les demandes
si vous recevez tellement de demandes que le temps entre elles est le même, vous devez bloquer l'utilisateur. vous devez mettre cela pour capturer le temps écoulé entre la demande de génération de lien vidéo. s'ils sont identiques (plus / moins un certain seuil) et que cela se produit plus d'un certain nombre de fois, vous pouvez bannir l'utilisateur. car s'il y a un bot qui va explorer votre site Web ou vos vidéos, ils ont généralement le même temps de sommeil entre leur demande. donc si vous recevez chaque demande, par exemple, toutes les 1,3 (plus / min un écart) minutes. puis vous déclenchez une alarme. pour cela, vous pouvez utiliser un calcul statistique pour connaître l'écart entre les demandes.
pour contourner ce problème, l'utilisateur peut mettre un temps de sommeil aléatoire entre les demandes.
exemple de code
J'ai un repo PluralSight-Downloader qui le fait à moitié. J'ai créé ce repo il y a presque 5 ans. parce que je l'ai écrit à des fins d'étude et pour mon usage personnel uniquement, le dépôt n'a pas encore reçu de mise à jour et je ne vais pas le mettre à jour ou le rendre facile à travailler. ce n'est qu'un exemple de la façon dont cela peut être fait.
la source
Vous pouvez utiliser
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList
Cela n'empêche pas d'enregistrer la vidéo, mais il supprime le bouton de téléchargement et l'option "Enregistrer sous" dans le menu contextuel.
la source
Réponse courte: Cryptez le lien comme le fait YouTube, je ne sais pas comment demander à youtube / google comment ils le font. (Juste au cas où vous voudriez entrer directement dans le vif du sujet.)
Je voudrais faire remarquer à quiconque que cela est possible parce que YouTube le fait et s'ils le peuvent, tout autre site Web le peut et ce n'est pas non plus à partir du navigateur parce que je l'ai testé sur quelques navigateurs tels que Microsoft Edge et Internet Explorer et il y a donc un moyen de le désactiver et de voir que les gens le disent encore ... J'essaie de chercher une réponse parce que si YouTube le peut, il doit y avoir un moyen et le seul moyen de voir comment ils le font est si quelqu'un a regardé les scripts de youtube que je fais maintenant. J'ai également vérifié pour voir s'il s'agissait d'un menu contextuel personnalisé et ce n'est pas parce que le menu contextuel déborde de l'élément inspect et je veux dire comme s'il était dessus et j'ai regardé et cela ne crée jamais de nouvelle classe et aussi est impossible d'accéder réellement à l'élément inspect avec javascript, donc cela ne peut pas être. Lorsque vous double-cliquez avec le bouton droit de la souris sur une vidéo youtube, vous pouvez dire que le menu contextuel de Chrome s'affiche. De plus ... YouTube n'ajouterait pas cette fonction. Je fais des recherches et je regarde la source de YouTube, donc je reviendrai si je trouve la réponse ... si quelqu'un dit que vous ne pouvez pas, eh bien, ils ne l'ont pas fait ' t faire des recherches comme moi. Le seul moyen de télécharger des vidéos youtube consiste à télécharger une vidéo.
D'accord ... j'ai fait des recherches et mes recherches restent que vous pouvez le désactiver sauf qu'il n'y a pas de javascript ... vous devez être capable de crypter les liens vers la vidéo pour que vous puissiez la désactiver car je pense que tout le navigateur ne l'affichera pas s'il ne le trouve pas et lorsque j'ai ouvert un lien vidéo youtube, il s'affichait sous la forme "blob: https://www.youtube.com/e5c4808e-297e-451f-80da-3e838caa1275"sans guillemets, il le crypte donc il ne peut pas être enregistré ... vous devez connaître php pour cela, mais comme la réponse que vous avez choisie pour rendre les choses plus difficiles, youtube en fait le plus difficile à chiffrer, vous devez être un avancez le programmeur php mais si vous ne le savez pas, prenez la personne que vous avez choisie comme meilleure réponse pour rendre son téléchargement difficile ... mais si vous connaissez php, cryptez lourdement le lien vidéo pour qu'il ne puisse être lu que dessus les vôtres ... Je ne sais pas comment expliquer comment ils le font, mais ils l'ont fait et il y a un moyen. La façon dont youtube chiffre les vidéos est assez intelligente, donc si vous voulez savoir comment, demandez simplement à youtube / google comment ils le font ... j'espère que cela vous aidera bien que vous ayez déjà choisi la meilleure réponse. Donc, crypter le lien est préférable à court terme.
la source
Il semble que la diffusion en continu de la vidéo via websocket soit une option viable, comme diffuser les cadres et les dessiner sur une sorte de toile.
Streaming vidéo sur Websockets à l'aide de JavaScript
Je pense que cela fournirait un autre niveau de protection, ce qui rendrait plus difficile pour le client d'acquérir la vidéo et bien sûr de résoudre votre problème avec l'option de menu contextuel "Enregistrer la vidéo sous ..." (exagération?!).
la source
Voici ce que j'ai fait:
la source
@ Clayton-Graul avait ce que je cherchais, sauf que j'avais besoin de la version CoffeeScript pour un site utilisant AngularJS. Juste au cas où vous en auriez besoin aussi, voici ce que vous mettez dans le contrôleur AngularJS en question:
"des choses étranges se passent au cercle k" (c'est vrai)
la source