Come posso disabilitare "Salva video con nome ..." dal menu di scelta rapida di un browser per impedire ai client di scaricare un video?

Esistono soluzioni più complete che impediscono al client di accedere direttamente a un percorso di file?

Non puoi . Questo perché è ciò che i browser sono stati progettati per fare: pubblicare contenuti . Ma puoi rendere più difficile il download .

La prima cosa è prima, si potrebbe disattivare l' contextmenuevento , alias "il tasto destro del mouse". Ciò impedirebbe al tuo skiddie normale di strappare in modo palese il tuo video facendo clic con il tasto destro e Salva con nome. Ma poi potrebbero semplicemente disabilitare JS e aggirare il problema o trovare la sorgente video tramite il debugger del browser. Inoltre questa è una cattiva UX. Ci sono molte cose legittime in un menu contestuale oltre a Salva con nome.

Puoi anche utilizzare librerie personalizzate di lettori video. La maggior parte di essi implementa lettori video che personalizzano il menu di scelta rapida a proprio piacimento. Quindi non ottieni il menu contestuale del browser predefinito. E se mai servono una voce di menu simile a Salva con nome, è possibile disabilitarlo. Ma ancora una volta, questa è una soluzione alternativa a JS. I punti deboli sono simili all'opzione precedente.

Un altro modo per farlo è servire il video usando lo streaming live HTTP . Ciò che essenzialmente fa è tagliare il video in pezzi e servirlo uno dopo l'altro. Ecco come la maggior parte dei siti di streaming serve video. Quindi, anche se riesci a salvare con nome, salvi solo un pezzo, non l'intero video. Ci vorrebbe un po 'più di sforzo per raccogliere tutti i pezzi e cucirli usando un software dedicato.

Un'altra tecnica è quella di disegnare <video>su<canvas> . In questa tecnica, con un po 'di JavaScript, quello che vedi nella pagina è un <canvas>elemento che rende i fotogrammi da un nascosto <video>. E poiché è un <canvas>, il menu contestuale utilizzerà un <img>menu, non un <video>. Otterrai un Salva immagine come anziché un Salva video come.

È inoltre possibile utilizzare i token CSRF a proprio vantaggio. Avresti il ​​tuo server di inviare un token sulla pagina. Quindi utilizzare quel token per recuperare il video. Il tuo server verifica se è un token valido prima di pubblicare il video o ottiene un HTTP 401 . L'idea è che puoi sempre ottenere un video solo con un token che puoi sempre ottenere solo se vieni dalla pagina, non visitando direttamente l'URL del video.

Alla fine della giornata, avrei appena caricato il mio video su un sito di video di terze parti, come YouTube o Vimeo. Hanno buoni strumenti di gestione video, ottimizzano la riproduzione sul dispositivo e si impegnano per impedire che i loro video vengano strappati senza sforzo da parte tua.

Questa è una soluzione semplice per coloro che desiderano semplicemente rimuovere l'opzione "salva" del tasto destro dai video html5

$(document).ready(function(){
   $('#videoElementID').bind('contextmenu',function() { return false; });
});

Risposta semplice,

NON PUOI

Se stanno guardando il tuo video, ce l' hanno già

Puoi rallentarli ma non puoi fermarli.

Sì, puoi farlo in tre passaggi:

1. Inserire i file che si desidera proteggere in una sottodirectory della directory in cui è in esecuzione il codice.

   www.foo.com/player.html
   www.foo.com/videos/video.mp4
   

2. Salvare un file nella sottodirectory denominata ".htaccess" e aggiungere le righe seguenti.

   www.foo.com/videos/.htaccess

   #Contents of .htaccess
   
   RewriteEngine on
   RewriteCond %{HTTP_REFERER} !^http://foo.com/.*$ [NC]
   RewriteCond %{HTTP_REFERER} !^http://www.foo.com/.*$ [NC]
   RewriteRule .(mp4|mp3|avi)$ - [F]

Ora il link di origine è inutile , ma dobbiamo comunque assicurarci che qualsiasi utente che tenti di scaricare il file non possa ricevere direttamente il file.

3. Per una soluzione più completa , ora pubblica il video con un flash player (o canvas html) e non collegare mai direttamente al video. Per rimuovere semplicemente il menu di scelta rapida, aggiungi al tuo HTML:

   <body oncontextmenu="return false;">

Il risultato:

www.foo.com/player.html riprodurrà correttamente il video , ma se visiti www.foo.com/videos/video.mp4:

Codice errore 403: VIETATO

Questo funzionerà per il download diretto, cURL, hotlinking, lo nominerai.

Questa è una risposta completa alle due domande poste e non una risposta alla domanda: "posso impedire a un utente di scaricare un video che hanno già scaricato".

Il modo migliore che di solito uso è molto semplice, disabilito completamente il menu di scelta rapida nell'intera pagina, puro html + javascript:

 <body oncontextmenu="return false;">

Questo è tutto! Lo faccio perché puoi sempre vedere la fonte facendo clic con il tasto destro.
Ok, dici: "Posso usare direttamente la fonte di visualizzazione del browser" ed è vero, ma iniziamo dal fatto che NON PUOI smettere di scaricare html5video.

Come sviluppatore sul lato client, consiglio di utilizzare l'URL BLOB, l'URL BLOB è un URL sul lato client che fa riferimento a un oggetto binario

<video id="id" width="320" height="240"  type='video/mp4' controls  > </video>

in HTML lascia srcvuoto il tuo video e in JS recupera il file video utilizzando AJAX, assicurati che il tipo di risposta sia BLOB

window.onload = function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'mov_bbb.mp4', true);
    xhr.responseType = 'blob'; //important
    xhr.onload = function(e) {
        if (this.status == 200) {
            console.log("loaded");
            var blob = this.response;
            var video = document.getElementById('id');
            video.oncanplaythrough = function() {
                console.log("Can play through video without stopping");
                URL.revokeObjectURL(this.src);
            };
            video.src = URL.createObjectURL(blob);
            video.load();
        }
    };
    xhr.send();
}

Nota: questo metodo non è raccomandato per file di grandi dimensioni

MODIFICARE

• Utilizzare il blocco tra origini per evitare il download diretto

• se il video viene distribuito da un'API Utilizzare un metodo diverso (PUT / POST) anziché "GET"

PHP invia il tag video html5 insieme a una sessione in cui la chiave è una stringa casuale e il valore è il nome file.

ini_set('session.use_cookies',1);
session_start();
$ogv=uniqid(); 
$_SESSION[$ogv]='myVideo.ogv';
$webm=uniqid(); 
$_SESSION[$webm]='myVideo.webm';
echo '<video autoplay="autoplay">'
    .'<source src="video.php?video='.$ogv.' type="video/ogg">'
    .'<source src="video.php?video='.$webm.' type="video/webm">'
    .'</video>'; 

Ora a PHP viene chiesto di inviare il video. PHP recupera il nome file; elimina la sessione e invia il video all'istante. Inoltre, devono essere presenti tutte le intestazioni "no cache" e di tipo mime.

ini_set('session.use_cookies',1);
session_start();
$file='myhiddenvideos/'.$_SESSION[$_GET['video']];
$_SESSION=array();
$params = session_get_cookie_params();
setcookie(session_name(),'', time()-42000,$params["path"],$params["domain"],
                                         $params["secure"], $params["httponly"]);
if(!file_exists($file) or $file==='' or !is_readable($file)){
  header('HTTP/1.1 404 File not found',true);
  exit;
  }
readfile($file);
exit:

Ora, se l'utente copia l'URL in una nuova scheda o utilizza il menu di scelta rapida, non avrà fortuna.

Puoi almeno impedire alle persone non esperte di tecnologia di utilizzare il menu contestuale del tasto destro del mouse per scaricare il tuo video. È possibile disabilitare il menu di scelta rapida per qualsiasi elemento utilizzando l'attributo oncontextmenu.

oncontextmenu="return false;"

Funziona con l'elemento body (intera pagina) o solo un singolo video che lo utilizza all'interno del tag video.

<video oncontextmenu="return false;" controls>...</video>

Abbiamo finito per utilizzare AWS CloudFront con URL in scadenza. Il video verrà caricato, ma quando l'utente fa clic con il pulsante destro del mouse e sceglie Salva poiché l'URL del video che ha ricevuto inizialmente è scaduto. Effettua una ricerca per CloudFront Origin Access Identity.

La produzione dell'URL video richiede una coppia di chiavi che può essere creata nella CLI AWS. Cordiali saluti, questo non è il mio codice ma funziona benissimo!

$resource = 'http://cdn.yourwebsite.com/videos/yourvideourl.mp4';
$timeout = 4;

//This comes from key pair you generated for cloudfront
$keyPairId = "AKAJSDHFKASWERASDF";

$expires = time() + $timeout; //Time out in seconds
$json = '{"Statement":[{"Resource":"'.$resource.'","Condition" {"DateLessThan":{"AWS:EpochTime":'.$expires.'}}}]}';     

//Read Cloudfront Private Key Pair
$fp=fopen("/absolute/path/to/your/cloudfront_privatekey.pem","r"); 
$priv_key=fread($fp,8192); 
fclose($fp); 

//Create the private key
$key = openssl_get_privatekey($priv_key);
if(!$key)
{
    echo "<p>Failed to load private key!</p>";
    return;
}

//Sign the policy with the private key
if(!openssl_sign($json, $signed_policy, $key, OPENSSL_ALGO_SHA1))
{
    echo '<p>Failed to sign policy: '.openssl_error_string().'</p>';
    return;
}

//Create url safe signed policy
$base64_signed_policy = base64_encode($signed_policy);
$signature = str_replace(array('+','=','/'), array('-','_','~'), $base64_signed_policy);

//Construct the URL
$url = $resource.'?Expires='.$expires.'&Signature='.$signature.'&Key-Pair-Id='.$keyPairId;

return '<div class="videowrapper" ><video autoplay controls style="width:100%!important;height:auto!important;"><source src="'.$url.'" type="video/mp4">Your browser does not support the video tag.</video></div>';

Potremmo renderlo non così semplice nascondendo il menu di scelta rapida, in questo modo:

<video oncontextmenu="return false;"  controls>
  <source src="https://yoursite.com/yourvideo.mp4" >
</video>

+1 modo semplice e cross-browser: puoi anche mettere un'immagine trasparente sul video con css z-index e opacità. Quindi gli utenti vedranno "salva immagine come" invece di "salva video" nel menu contestuale.

Il

<body oncontextmenu="return false;"> 

non lavora più. Chrome e Opera a partire da giugno 2018 hanno un sottomenu nella sequenza temporale per consentire il download diretto, quindi l'utente non deve fare clic con il pulsante destro del mouse per scaricare quel video. È interessante notare che Firefox e Edge non hanno questo ...

Utilizzando un servizio come Vimeo: accedi Vimeo > Goto Video > Settings > Privacy > Mark as Securede seleziona anche i domini incorporati. Una volta impostati i domini di incorporamento, non consentirà a nessuno di incorporare il video o visualizzarlo dal browser a meno che non si colleghi dai domini specificati. Quindi, se hai una pagina protetta sul tuo server che carica il lettore Vimeo in iframe, questo rende piuttosto difficile spostarsi.

Prima di tutto renditi conto che è impossibile impedire completamente il download di un video, tutto ciò che puoi fare è renderlo più difficile . Cioè nascondi la fonte del video.

Un browser web scarica temporaneamente il video in un buffer, quindi se si potesse impedire il download si impedirebbe anche la visualizzazione del video.

Dovresti anche sapere che <1% della popolazione totale del mondo sarà in grado di comprendere il codice sorgente rendendolo comunque piuttosto sicuro. Ciò non significa che non dovresti nasconderlo anche nella fonte - dovresti .

Si dovrebbe Non disabilitare tasto destro del mouse, e ancora meno si dovrebbe visualizzare un messaggio che dice "You cannot save this video for copyright reasons. Sorry about that.". Come suggerito in questa risposta .

Questo può essere molto fastidioso e confuso per l'utente. A parte quello; se disabilitano JavaScript sul proprio browser saranno comunque in grado di fare clic con il tasto destro e salvare.

Ecco un trucco CSS che potresti usare:

video {
    pointer-events: none;
}

I CSS non possono essere disattivati ​​nel browser, proteggendo il tuo video senza in realtà disabilitare il clic destro. Tuttavia, un problema è che controlsnon può essere abilitato neanche, in altre parole devono essere impostati su false. Se hai intenzione di implementare la tua funzione Play / Pause o utilizzare un'API con pulsanti separati dal videotag, questa è un'opzione fattibile.

controls ha anche un pulsante per il download, quindi usarlo non è neanche una buona idea.

Ecco un esempio di JSFiddle .

Se hai intenzione di disabilitare il clic con il tasto destro del mouse su JavaScript, archivia anche la fonte del video in JavaScript. In questo modo se l'utente disabilita JavaScript (consentendo il clic destro) il video non verrà caricato (nasconde anche un po 'meglio la sorgente video).

Dalla risposta TxRegex :

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

Ora aggiungi il video tramite JavaScript:

document.getElementById("video").src = "https://www.w3schools.com/html/mov_bbb.mp4";

Funzionale JSFiddle

Un altro modo per impedire il clic con il tasto destro consiste nell'utilizzare il embedtag. Questo non fornisce tuttavia i controlli per eseguire il video, quindi dovrebbero essere integrati in JavaScript:

<embed src="https://www.w3schools.com/html/mov_bbb.mp4"></embed>

bene, non puoi proteggerlo al 100% ma puoi renderlo più difficile. questi metodi che sto spiegando, li ho affrontati durante lo studio dei metodi di protezione in PluralSight e BestDotNetTraining . tuttavia, nessuno di questi metodi mi ha impedito di scaricare ciò che voglio, ma ho avuto difficoltà a curare il downloader per passare la loro protezione.

Oltre agli altri metodi citati per disabilitare il menu di scelta rapida. l'utente è ancora in grado di utilizzare strumenti di terze parti come InternetDownload Manager o altri software simili per scaricare i video. il metodo di protezione che sto spiegando qui è quello di mitigare quei software di terze parti.

il requisito di tutti questi metodi è bloccare un utente quando identifichi che qualcuno sta scaricando i tuoi video. in questo modo sono in grado di scaricare solo uno o due video solo prima che tu abbia vietato loro di accedere al tuo sito web.

disconoscimento

Non accetterò alcuna responsabilità se qualcuno abusa di questi metodi o lo usa per danneggiare altri o i siti Web che ho citato come esempio. serve solo a condividere le conoscenze per aiutarti a proteggere il tuo prodotto intellettuale.

generare collegamenti con una scadenza

il requisito per questo è creare un collegamento per il download per utente. quello può essere facilmente gestito da un archivio BLOB BLU o da Amazon S3. puoi creare un link per il download con il doppio del timestamp di scadenza della durata del video. quindi è necessario acquisire quel collegamento video e l'ora richiesta. questo è necessario per il metodo successivo. il trucco per questo metodo è che stai generando il link di download quando l'utente fa clic sul pulsante di riproduzione.

in caso di pulsante Play, invierai una richiesta al server, otterrai il link e aggiornerai la fonte.

limitare il tasso di richiesta video

quindi monitora la velocità con cui l'utente richiede il secondo video. se l'utente richiede un collegamento per il download troppo velocemente, lo blocchi immediatamente. non puoi impostare questa soglia troppo grande perché puoi erroneamente bloccare gli utenti che stanno solo navigando o scorrendo i video.

Abilita intervallo HTTP

utilizzare alcune librerie js come videojs per riprodurre il video, inoltre è necessario restituire un AcceptRange nell'intestazione. L'archiviazione BLOB di Azure lo supporta immediatamente. in questo modo il browser inizia a scaricare il video pezzo per pezzo. di solito, 32 byte per 32 byte. quindi è necessario ascoltare la timeupdatemodifica dei videojs e aggiornare il server sulla percentuale di visualizzazione del video. la percentuale di visualizzazione del video non può essere superiore alla percentuale di consegna del video. e se stai distribuendo un contenuto video senza ricevere alcuna variazione percentuale, puoi bloccare l'utente. perché sicuramente stanno scaricando.

l'implementazione è complicata perché l'utente può saltare il video in avanti o indietro, quindi sii consapevole di ciò quando lo stai implementando.

questo è il modo in cui BestDotnetTraining gestisce timeupdate

myPlayer.ready(function () {
    //var player = this;
    this.src({
        type: "video/mp4",
        src: videoURL
    });
    if (videoId) {
        myPlayer.play();
        this.on('timeupdate', function () {
            var currentPercent = parseInt(100 * myPlayer.currentTime() / myPlayer.duration());//calcualte as percentage
            if (currentPercent % 5 == 0) {
                //send percentage to server 
                SaveVideoDurationWatched(currentPercent, videoId);
            }
        });
    }

});

in ogni caso, l'utente è in grado di aggirare il problema utilizzando un metodo di download che scarica un file tramite streaming. quasi c # fallo fuori dalla scatola e per nodejs, puoi usare requestmodule. quindi è necessario avviare uno stopwatch, ascoltare un pacchetto ricevuto e confrontare il byte totale ricevuto confrontarlo con la dimensione totale. in questo modo è possibile calcolare una percentuale e il tempo impiegato per ottenere tale percentuale. quindi usa il Thread.Sleep()o qualcosa del genere per ritardare la discussione della quantità che devi aspettare se guardi il video normalmente. anche prima della sospensione l'utente può chiamare il server e aggiornare la percentuale ricevuta. quindi il server pensa che l'utente stia effettivamente guardando un video.

il calcolo sarà simile a questo, ad esempio, se si calcola di aver ricevuto finora l'1%, è possibile calcolare l'importo che si dovrebbe attendere per sospendere il thread di download. in questo modo non è possibile scaricare un video più velocemente della sua lunghezza effettiva. se un video è di 24 min. ci vorranno 24 minuti per scaricarlo. (più la soglia che abbiamo inserito nel primo metodo)

original video length 24 minute
24 min *60000 = 1,440,000 miliseconds 
1,440,000 % 100 = 14,400 milisecond is needed to download one percent

controlla l'agente del browser

quando offri una pagina web e il collegamento al video o accetti la richiesta di aggiornamento dell'avanzamento puoi guardare l'agente del browser. se è diverso, quindi vietare l'utente.

tieni presente che alcuni vecchi browser non trasmettono queste informazioni. quindi dovresti ignorarlo quando non c'è nessun agente browser sia nella richiesta video che nella richiesta pagina web. ma se una richiesta ce l'ha e un'altra no, allora dovresti vietare all'utente.

per ovviare a questo, l'utente può impostare l'intestazione dell'agente del browser manualmente come il browser senza testa che stanno utilizzando per acquisire il collegamento di download.

controlla l'intestazione del referer

quando il referer è diverso dall'URL dell'host o dall'URL della pagina in cui si sta offrendo il video, è possibile vietare l'utente perché inserisce il collegamento di download in un'altra scheda o in un'altra applicazione. anche tu puoi farlo per la richiesta di aggiornamento dell'avanzamento.

il requisito per questo è avere una mappatura del video e la pagina che mostra quel video. puoi creare una convenzione o un modello per capire quale dovrebbe essere l'URL, dipende dal tuo design.

per aggirare il problema l'utente può impostare manualmente l'intestazione del referrer uguale all'URL della pagina di download durante il download dei video.

Calcola il tempo tra una richiesta e l'altra

se ricevi così tante richieste che il tempo tra loro è lo stesso, allora dovresti bloccare l'utente. dovresti metterlo per catturare quanto tempo intercorre tra la richiesta di generazione del collegamento video. se sono uguali (più / meno una soglia) e succede più di un numero di volte, puoi vietare l'utente. perché se esiste un bot che eseguirà la scansione del tuo sito Web o dei tuoi video, di solito hanno lo stesso tempo di sospensione tra la loro richiesta. quindi se ricevi ogni richiesta, ad esempio, ogni 1,3 (più / min qualche deviazione) minuti. poi si genera un allarme. per questo, è possibile utilizzare alcuni calcoli statistici per conoscere la deviazione tra le richieste.

per ovviare a questo, l'utente può inserire un tempo di sospensione casuale tra le richieste.

codice di esempio

Ho un repository PluralSight-Downloader che lo sta facendo a metà. Ho creato questo repository quasi 5 anni fa. poiché l'ho scritto solo a scopo di studio e per uso personale, finora il repository non ha ricevuto alcun aggiornamento e non ho intenzione di aggiornarlo o semplificarlo. è solo un esempio di come si può fare.

Puoi usare

<video src="..." ... controlsList="nodownload">

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList

Non impedisce il salvataggio del video, ma rimuove il pulsante di download e l'opzione "Salva con nome" nel menu di scelta rapida.

Risposta breve: crittografa il collegamento come fa YouTube, non so come chiedere a YouTube / Google di come lo fanno. (Nel caso in cui si desideri entrare subito nel punto.)

Vorrei sottolineare a tutti che questo è possibile perché YouTube lo fa e se possono farlo anche su qualsiasi altro sito Web e non è nemmeno dal browser perché l'ho testato su un paio di browser come Microsoft Edge e Internet Explorer e quindi c'è un modo per disabilitarlo e visto che la gente continua a dirlo ... Provo a cercare una risposta perché se YouTube può, allora deve esserci un modo e l'unico modo per vedere come lo fanno è se qualcuno guardasse dentro gli script di youtube che sto facendo ora. Ho anche controllato per vedere se fosse anche un menu di scelta rapida personalizzato e non perché il menu di scelta rapida scorre sull'elemento inspect e intendo come se fosse su di esso e ho guardato e non crea mai una nuova classe e anche è impossibile accedere effettivamente all'elemento inspect con javascript, quindi non può essere. Puoi dire quando fa doppio clic con il pulsante destro del mouse su un video di YouTube che apre il menu di scelta rapida per Chrome. Inoltre ... youtube non aggiungerebbe quella funzione. Sto facendo ricerche e guardando la fonte di youtube, quindi tornerò se trovo la risposta ... se qualcuno dice che non puoi, beh non lo hanno fatto faccio ricerche come me. L'unico modo per scaricare i video di YouTube è tramite un download di video.

Ok ... ho fatto delle ricerche e la mia ricerca è che puoi disabilitarlo tranne che non c'è javascript ad esso ... devi essere in grado di crittografare i link al video per poterlo disabilitare perché penso che il browser non lo mostrerà se non lo trova e quando ho aperto un collegamento video di YouTube ha mostrato questo "blob: https://www.youtube.com/e5c4808e-297e-451f-80da-3e838caa1275"senza virgolette, quindi lo sta crittografando in modo che non possa essere salvato ... devi conoscere php per questo, ma come la risposta che hai scelto per renderlo più difficile, YouTube lo rende il più difficile da crittografare pesantemente, devi essere un anticipo programmatore php ma se non lo sai che prendere la persona che hai scelto come migliore risposta di rendere difficile scaricarlo ... ma se conosci php piuttosto che crittografare pesantemente il collegamento video in modo che possa essere letto solo il tuo ... non so come spiegare come lo fanno, ma l'hanno fatto e c'è un modo. Il modo in cui YouTube crittografa i video è abbastanza intelligente, quindi se vuoi sapere come non chiedere a YouTube / Google di come lo fanno ... spero che questo ti aiuti anche se hai già scelto la risposta migliore. Quindi, crittografare il link è la cosa migliore in breve tempo.

Sembra che lo streaming del video tramite websocket sia un'opzione praticabile, come in streaming i frame e disegnarli su una sorta di tela.

Streaming video su socket Web tramite JavaScript

Penso che fornirebbe un altro livello di protezione rendendo più difficile l'acquisizione del video da parte del cliente e, naturalmente, risolverà il problema con l'opzione del menu contestuale del tasto destro del mouse "Salva video come ..." (overkill?!).

Ecco cosa ho fatto:

function noRightClick() {
      alert("You cannot save this video for copyright reasons. Sorry about that.");
}

    <body oncontextmenu="noRightClick();">
    <video>
    <source src="http://calumchilds.com/videos/big_buck_bunny.mp4" type="video/mp4">
    </video>
    </body>

@ Clayton-Graul aveva quello che stavo cercando, tranne per il fatto che avevo bisogno della versione di CoffeeScript per un sito che utilizzava AngularJS. Nel caso abbiate bisogno anche di questo, ecco cosa mettete nel controller AngularJS in questione:

    # This is how to we do JQuery ready() dom stuff
    $ ->
        # let's hide those annoying download video options.
        # of course anyone who knows how can still download
        # the video, but hey... more power to 'em.
        $('#my-video').bind 'contextmenu', -> 
            false

"cose ​​strane sono in corso nel cerchio k" (è vero)