

HTML5のvideoタグで動画を閲覧できるようにした上で、閲覧したユーザーがローカルへ動画をダウンロードすることを難しくしたいと考えています。HLSやRTMPといったストリーミングプロトコルを使わずに、sourceタグにmp4動画のURLを指定する形を想定しています。  
ある程度の知識と動機のあるユーザーでなければダウンロードしないよね、ぐらいのレベルでOKです。ちなみに、サーバーはrailsで構築されていますが、コードはどんな言語でもかまいません。

私の方では、以下のような方法を考え付きました。

  * JavaScriptで動的にsourceタグを設定し、JavaScriptが無効化された状態での動画閲覧を制限する。その上で、JavaScriptでコンテクストメニューを無効化する。（コンテクストメニューにダウンロードオプションが表示されるためです。）  
念のため、コンテクストメニューの無効化というのは、jQueryの以下のコードで実現されるものです。

[code]

    $('video').contextmenu(function() {
      return false;
    });
    
[/code]

  * リファラを動画閲覧ページのURLのみに制限する。

  * URLにトークンを付与し、有効期限を設定する。（一度限りのトークンを設定しようと考えたのですが、chromeなどのブラウザはリクエストにRangeヘッダーを付けて複数回リクエストを送るようになっており、断念しました。）

  * 上記sourceタグ内の動画URLにどのような文字列が入るのかわかりづらくするため、ソースコードを難読化する。（chromeのデベロッパーツールなどを見れば動画のURLが出てくるので、あまり意味がないかもと思っています。）

他にダウンロードのハードルを上げるような方法はありますでしょうか。皆様のお知恵をお貸しください。


CC BY-SA 3.0
2016-12-05T12:18:11.620
30927
2018-12-29T18:00:45.393
2016-12-18T06:22:23.847
15185
19822
question
javascript ruby-on-rails html5 video mp4
videoタグ内の動画のダウンロードを難しくしたい


`URLにトークンを付与し、有効期限を設定する` が一般的だとは思います。

video要素を利用してMP4を再生可能とする以上、根本的にダウンロードを不可能にすることはできませんが、パッと思いつくものとして

  * トークン発行のseedにUser-Agentを含め、検証時に同一User-Agentのみ許可する 
    * curl/wget などによるダウンロードを制限できます

などが挙げられます。が、いずれも悪足掻きレベルと言えます。


CC BY-SA 4.0
2018-05-27T22:55:30.813
44309
2018-05-27T22:55:30.813
7936
30927
answer


参考までに、勝手にダウンロードされない為のサーバー側phpでのサンプルです。  
※あらかじめcookieをloginしたときなどに、セットしておく事が動作条件で  
動作確認する為のサンプルです。 制限条件などを検討、追加する必要があります。

**呼び出し**

[code]

    <video src="hoge.php?f=sample.mp4"></video> 
    
[/code]

**hoge.php**

[code]

    //setcookie("test", time(), time());//loginしたときなどに、セットしておく
    //エラーは、手の内を明かしてしまうので、今回は出力しない。
    
    $file = '';
    $path = '/test/files/';
    
    if(!isset($_COOKIE["test"])) exit;
    $check = intval($_COOKIE["test"]) + (60*60*2);
    if($check < time()) exit;
    
    if(!isset($_GET['f'])){
        exit;
    }else{
        if(count($_GET) > 1) exit;//余計なパラメータが来ていたら（付いていたら）終了
        $file =  $_GET['f'];
        if($file == '') exit;
    }
    
    if (file_exists($path.$file)) {//ファイルの存在確認
    //今回は、最小限のヘッダーのみ出力、必要に応じて追加すること
    //  header('Content-Description: File Transfer');
    //  header('Content-Type: application/octet-stream');
        header('Content-Type: video/mp4');//動画形式により適時かえること
    //  header('Content-Disposition: attachment; filename='.basename($file));
    //  header('Content-Transfer-Encoding: binary');
    //  header('Expires: 0');
    //  header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
    //  header('Pragma: public');
        header('Content-Length: ' . filesize($path.$file));
        ob_clean();
        flush();
        readfile($path.$file);
        exit;
    }
    
    exit;
    
[/code]


CC BY-SA 4.0
2018-05-28T03:37:49.670
44314
2018-05-28T03:37:49.670
22793
30927
answer