防止下载HTML5视频（单击右键保存）？ [英] Prevent HTML5 video from being downloaded (right-click saved)?
问题描述
如何从浏览器的右键菜单中禁用将视频另存为...以阻止客户端下载视频？
是否有更完整的解决方案这样可以防止客户端直接访问文件路径？ 实际上，不能 。但是你可以让它更难下载。
浏览器使得抓取太容易了
因为那是什么浏览器被设计为：服务内容 - 这意味着将内容提供给用户。为了向您展示它是多么容易，下面是我通常在任何视频流网站上抓取视频：
准备您的首选项的网络标签浏览器调试器并让视频加载。然后在加载的资源中查找它。视频通常以.flv或.mp4格式播放，而.mp3格式的音频则以.flv格式播放。当你发现网址时，打开一个新的标签页/窗口并在那里打开链接。然后浏览器将下载该文件。
使其变得更难
这里有一些方法可以让抓斗者的生活更加艰难。就像我之前说过的那样，这些都不是万无一失的方法，但至少可以抵御掠夺。
视频到画布技术
最近我在研究JS中的运动检测时遇到了 HTML5Doctor的这篇文章。这涉及通过< video> 流式传输视频，然后使用一些JS，将视频复制到< canvas> 。 这是一个示例，其中视频是预先录制的，而画布是在从同一个视频中获取数据。
基本上，你所做的是：
- 在HTML上预定义或动态地向DOM中插入
< canvas>。这是用户看到的玩家。 - 通过JS动态创建视频标签，将其附加到隐藏的DOM并为其提供流式传输的URL。这将成为画布的视频源。
- 然后，使用JS，您可以定期从
< video>中获取数据创建并将其绘制到< canvas>。通过这一步，视频被传送到画布上。
这是整个例程的基础。由于您的播放器现在是隐藏的画布和真实视频，因此您可以尝试右键单击所有您想要的并保存。由于画布的作用与页面上的图像相似，因此只能保存画布上显示的一帧画面。至于控件， JS有一个用于控制的API< video> ; ，因此您可以创建自定义按钮和滑块。
但是，如果他们知道您正在这样做，他们会找到您隐藏的视频元素，你搞砸了。这引出了下一个补充这种前端技术的方法，在服务器端的帮助下。
临时资源网址
防止此方法的一件事是阻止链接被重用。将链接设为一次性，临时，一次性使用。一旦玩家加载使用一次性网址，将其处置掉。使其无法使用。
与相似CSRF预防，当浏览器请求您的视频页面时，让它生成随机令牌并将其存储在服务器端的某个存储中供以后参考。同时，将其附加到您视频的网址，类似这样的内容：
//我们使用此url
//从您的网站加载一些ID为1234324的视频，并生成令牌页面加载附加为sid
http://yoursite.com/media.php?video_id=1234324&sid=a0s9d8a98a0d98asd09809wq0e9
现在，当您的播放器加载视频时，它将使用带有该令牌的此网址。让服务器验证令牌。
如果是好的，请将视频流并将其从服务器中销毁 以避免重复使用。这基本上使url一次只使用。如果使用了无效令牌，请返回相应的标题作为回复，如403 。
为了增加更多的安全性，通过将它的时间戳与令牌一起存储来强制URL的到期。然后比较请求时间戳和存储的时间戳，如果它仍在使用窗口内。使这个使用窗口足够短，供玩家在页面上使用，但不够长，不足以让滑动抓取该URL并将其粘贴到另一个标签页/窗口/下载器中。
How can I disable "Save Video As..." from a browser's right-click menu to prevent clients from downloading a video?
Are there more complete solutions that prevent the client from accessing a file path directly?
In reality, you can't. But you can make it harder to download.
Browsers make grabbing too easy
Because that's what browsers were designed to do: Serve content - which means give the content to the user. To show you how easy it is, here's how I usually grab videos on virtually any video streaming site:
Prepare the network tab of your preferred browser debugger and let the video load. Then look for it in the loaded resources. Videos are usually streamed in .flv or .mp4, and audio in .mp3. When you spot the url, open a new tab/window and open the link there. The browser will then download the file.
Making it harder
Here are methods on making a grabber's life harder. Like I said earlier, these are not fool-proof methods, but can at least ward off skiddies.
Video to Canvas technique
Recently I came across this article from HTML5Doctor while researching motion detection in JS. This involves streaming your video via a <video>, then with some JS, literally copy the video to a <canvas>. Here's an example where the video is up front, while the canvas at the back get's fed with data from that same video.
Essentially, what you do is:
- Predefine on the HTML or dynamically insert a
<canvas>to the DOM. This is the "player" that the user sees. - Dynamically create a video tag via JS, append it to the DOM hidden and give it a url to stream. This will be the video source for the canvas.
- Then with JS, you periodically grab data from the
<video>you just created and draw it to the<canvas>. With this step, the video gets fed to the canvas.
That's the very basic of the entire routine. Since your player is now the canvas and the true video hidden, you can try right-clicking all you want and save. Since the canvas acts like an image on the page, you can only save a shot of a frame that was displayed on the canvas. As for controls, JS has an API for controlling <video> so you can create custom buttons and sliders.
However, if they know you are doing this, they will find your hidden video element, and you are screwed. This leads us to the next method that complements this front-end only technique, with aid from the server side.
Temporary resource urls
One thing you can do to prevent this method is to prevent the link from being reusable. Make the link disposable, temporary, one-time use only. Once the player loads using the disposable url, dispose of it. Make it unusable.
Similar to CSRF prevention, when a browser requests a page with your video, have it generate a random token and store it in some storage on the server side for later reference. At the same time, append it to the url of your video, something like this:
//we load some video with id 1234324 from your site using this url
//and the token generated on page load is appended as sid
http://yoursite.com/media.php?video_id=1234324&sid=a0s9d8a98a0d98asd09809wq0e9
Now when your player loads the video, it will use this url that carries the token. Have the server validate the token.
If it's good, stream the video and destroy the token from the server to avoid reuse. This essentially makes the url "one time use only". If an invalid token is used, return the appropriate headers as the response, like a 403 perhaps.
To add a bit more security, impose an expiry of the url by storing it's timestamp along with the token. Then compare the request timestamp with the stored timestamp if it's still within the "use window". Make this "use window" short enough to be used by the player on the page, but not long enough for a skiddie to grab that url and paste it into another tab/window/downloader.
这篇关于防止下载HTML5视频（单击右键保存）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
