如何从浏览器的右键菜单中禁用“另存为…”以防止客户端下载视频?

是否有更完整的解决方案来阻止客户端直接访问文件路径?


当前回答

它似乎通过websocket流视频是一个可行的选择,就像在流帧和绘制他们在画布之类的东西。

使用JavaScript在websockets上传输视频流

我认为这将提供另一个级别的保护,使客户更难获取视频,当然解决了您的问题,“另存视频为…”右键单击上下文菜单选项(过量?!).

其他回答

@Clayton-Graul有我正在寻找的东西,除了我需要一个使用AngularJS的网站的CoffeeScript版本。以防你也需要它,下面是你在AngularJS控制器中输入的内容:

    # 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

“奇怪的事情正在k圈发生”(这是真的)

你不能。

例如,人们可以使用一些api例如desktopCapture, getUserMedia 允许用户记录屏幕、窗口、选项卡。

人们可以使用它并将其写入画布,然后将所有的块连接在一起以获得视频,

所以如果他们真的想要视频,没有办法阻止他们下载。

首先,要意识到完全阻止视频下载是不可能的,你所能做的只是让下载变得更加困难。也就是说,你隐藏了视频的来源。

网络浏览器会在缓冲区中临时下载视频,所以如果可以阻止下载,你也就阻止了视频被观看。

您还应该知道,世界上只有不到1%的人口能够理解源代码,这使得它相当安全。这并不意味着你不应该把它隐藏在源代码中——你应该这样做。

您不应该禁用右键单击,甚至更不应该显示一条消息说“由于版权原因,您无法保存此视频。对此我很抱歉。”正如这个答案所暗示的。

这对用户来说是非常烦人和困惑的。除此之外;如果他们在浏览器上禁用JavaScript,他们将能够右键单击并保存。

下面是一个你可以使用的CSS技巧:

video {
    pointer-events: none;
}

CSS不能在浏览器中关闭,保护您的视频而不实际禁用右键单击。然而,一个问题是控件也不能启用,换句话说,它们必须设置为false。如果你打算添加自己的播放/暂停功能,或者使用一个有独立于视频标签的按钮的API,那么这是一个可行的选择。

控件也有一个下载按钮,所以使用它也不是一个好主意。

下面是一个JSFiddle的例子。


如果你打算使用JavaScript禁用右键,那么也要将视频源存储在JavaScript中。这样,如果用户禁用JavaScript(允许右击),视频将无法加载(它也更好地隐藏了视频源)。

从TxRegex回答:

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

现在通过JavaScript添加视频:

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

功能性JSFiddle


防止右击的另一种方法是使用embed标记。然而,这并没有提供运行视频的控件,所以它们需要在JavaScript中实现:

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

我发现了一个类似问题的好答案,使用PHP而不是JavaScript以获得更好的安全性。

我想使用浏览器的默认播放器在用户的浏览器中播放test.mp4(就像在Web页面上单击了URL/test.mp4一样),但需要密码,该密码由用户提供或由软件内部提供。

下面是这个想法的一个简要概述。它开始于用户去(运行)一个我写的叫做secure.php的程序来播放test.mp4。

文件test.mp4位于一个子目录("secureSubdirectory")中,该子目录包含一个包含"Require all denied"的.htaccess。这立即阻止了任何通过URL的直接访问。

当secure.php运行时,它提供一个密码(或向用户查询密码),然后对自己执行一个包含密码的POST,使用一个salt,使用PHP命令验证它:

$Hash=base64_encode(hash_hmac("sha256",$Pwd,$Salt,true));
$HashesAreSame=hash_equals($Hash,$GoalHash);

然后测试test.mp4是否存在,并执行以下PHP代码将test.mp4文件作为字节流返回给用户的浏览器:

header("Content-Type: video/mp4");
echo file_get_contents("secureSubdirectory/$path");
exit;

视频和预期的一样。如果我然后右键单击显示视频的页面并尝试保存视频,结果文件将只包含一个错误字符串,如“错误:密码未找到”,因为test.mp4是使用普通的secure.php URL查询的,而不是使用正确的密码通过POST。

当然,您可以使用浏览器调试工具的Network选项来获得响应有效负载(视频字节),但是如果浏览器提供了阻止访问调试工具的选项,那么PHP程序或.htaccess文件就可以阻止这种情况。

我无法想象失败的案例,但如果存在的话我会非常感兴趣,因为简单而完美的授权是非常罕见的事情。(请注意,由于这种方法依赖于密码,因此将其与用户关联并不是一种安全的身份验证方式,因为用户可能会意外或故意地发布或共享密码。)

我们最终使用了url过期的AWS CloudFront。视频将加载,但当用户右键单击并选择另存为最初收到的视频url时,该视频已过期。搜索CloudFront Origin Access Identity。

生成视频url需要一个密钥对,这个密钥对可以在AWS CLI中创建。供参考,这不是我的代码,但它工作得很好!

$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>';