如何从浏览器的右键菜单中禁用“另存为…”以防止客户端下载视频?
是否有更完整的解决方案来阻止客户端直接访问文件路径?
如何从浏览器的右键菜单中禁用“另存为…”以防止客户端下载视频?
是否有更完整的解决方案来阻止客户端直接访问文件路径?
当前回答
你不能。
这是因为浏览器的设计目的就是:提供内容。但你可以让它更难下载。
方便的“解决方案”
我会把我的视频上传到第三方视频网站,比如YouTube或Vimeo。他们有很好的视频管理工具,优化设备的播放,他们努力防止他们的视频被撕掉,而你却没有付出任何努力。
解决方案1、禁用“右键单击”
你可以禁用上下文菜单事件,也就是“右键单击”。这将防止你的常规skiddie公然撕扯你的视频右击和另存为。但他们可以禁用JS,绕过这个问题,或者通过浏览器的调试器找到视频源。另外,这是糟糕的用户体验。在上下文菜单中有很多合法的东西,而不仅仅是另存为。
解决方案2,视频播放器库
使用自定义视频播放器库。它们中的大多数实现了视频播放器,可以根据您的喜好定制上下文菜单。你不会得到默认的浏览器上下文菜单。如果他们确实提供类似于另存为的菜单项,你可以禁用它。但同样,这是一个JS的解决方案。弱点类似于解决方案1。
解决方案3,HTTP直播
另一种方法是使用HTTP Live Streaming提供视频。它本质上是把视频切成块,然后一个接一个地播放。这就是大多数流媒体网站提供视频的方式。因此,即使你设法另存为,你只保存了一部分,而不是整个视频。收集所有的块并使用一些专用软件将它们缝合起来需要更多的努力。
解决方法4,在画布上作画
另一种技巧是在<canvas>上绘制<video>。在这种技术中,使用一些JavaScript,您在页面上看到的是一个<canvas>元素从隐藏的<video>渲染帧。因为它是一个<canvas>,上下文菜单将使用一个<img>的菜单,而不是一个<video>的。你会得到另存图像,而不是另存视频。
解决方案5,CSRF令牌
您还可以利用CSRF令牌。您可以让服务器在页面上发送一个令牌。然后使用该令牌获取视频。您的服务器在提供视频之前检查它是否是一个有效的令牌,或者获得HTTP 401。这个想法是,你只能通过有一个令牌来获得一个视频,你只能从页面来,而不是直接访问视频url。
其他回答
PHP将html5视频标记和一个会话一起发送,其中键是一个随机字符串,值是文件名。
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>';
现在PHP被要求发送视频。PHP恢复文件名;删除会话并立即发送视频。此外,所有“无缓存”和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:
现在,如果用户复制url在一个新的选项卡或使用上下文菜单,他将没有运气。
你不能。
这是因为浏览器的设计目的就是:提供内容。但你可以让它更难下载。
方便的“解决方案”
我会把我的视频上传到第三方视频网站,比如YouTube或Vimeo。他们有很好的视频管理工具,优化设备的播放,他们努力防止他们的视频被撕掉,而你却没有付出任何努力。
解决方案1、禁用“右键单击”
你可以禁用上下文菜单事件,也就是“右键单击”。这将防止你的常规skiddie公然撕扯你的视频右击和另存为。但他们可以禁用JS,绕过这个问题,或者通过浏览器的调试器找到视频源。另外,这是糟糕的用户体验。在上下文菜单中有很多合法的东西,而不仅仅是另存为。
解决方案2,视频播放器库
使用自定义视频播放器库。它们中的大多数实现了视频播放器,可以根据您的喜好定制上下文菜单。你不会得到默认的浏览器上下文菜单。如果他们确实提供类似于另存为的菜单项,你可以禁用它。但同样,这是一个JS的解决方案。弱点类似于解决方案1。
解决方案3,HTTP直播
另一种方法是使用HTTP Live Streaming提供视频。它本质上是把视频切成块,然后一个接一个地播放。这就是大多数流媒体网站提供视频的方式。因此,即使你设法另存为,你只保存了一部分,而不是整个视频。收集所有的块并使用一些专用软件将它们缝合起来需要更多的努力。
解决方法4,在画布上作画
另一种技巧是在<canvas>上绘制<video>。在这种技术中,使用一些JavaScript,您在页面上看到的是一个<canvas>元素从隐藏的<video>渲染帧。因为它是一个<canvas>,上下文菜单将使用一个<img>的菜单,而不是一个<video>的。你会得到另存图像,而不是另存视频。
解决方案5,CSRF令牌
您还可以利用CSRF令牌。您可以让服务器在页面上发送一个令牌。然后使用该令牌获取视频。您的服务器在提供视频之前检查它是否是一个有效的令牌,或者获得HTTP 401。这个想法是,你只能通过有一个令牌来获得一个视频,你只能从页面来,而不是直接访问视频url。
首先,要意识到完全阻止视频下载是不可能的,你所能做的只是让下载变得更加困难。也就是说,你隐藏了视频的来源。
网络浏览器会在缓冲区中临时下载视频,所以如果可以阻止下载,你也就阻止了视频被观看。
您还应该知道,世界上只有不到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>
The
<body oncontextmenu="return false;">
不再有效。截至2018年6月,Chrome和Opera在时间轴上有一个子菜单,允许直接下载,所以用户不需要右键单击来下载视频。有趣的是,Firefox和Edge没有这个功能……
它似乎通过websocket流视频是一个可行的选择,就像在流帧和绘制他们在画布之类的东西。
使用JavaScript在websockets上传输视频流
我认为这将提供另一个级别的保护,使客户更难获取视频,当然解决了您的问题,“另存视频为…”右键单击上下文菜单选项(过量?!).