前端页面媒体资源防下载

背景

前端进行展示图片、视频、pdf等媒体资源时，对于私有化知识的资源需要做一个保护机制，即防止用户下载留存。

防范维度：

  • 无任何web技术的人群：大众用户

  • 懂web技术的人群

此文档记录的技术方向主要是针对第一类：大众用户

视频

针对视频，可使用现成js插件来实现防下载功能，推荐以下两个插件：

video-js使用示例：

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="MY_VIDEO.mp4" type="video/mp4">
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>

<script>
  var player = videojs('my-video');
  player.ready(function() {
    // 禁用右键菜单
    player.el().oncontextmenu = function() { return false; };

    // 隐藏下载按钮
    var controlBar = player.getChild('controlBar');
    var fullscreenToggle = controlBar.getChild('fullscreenToggle');
    if (fullscreenToggle) {
      fullscreenToggle.hide();
    }
  });
</script>

ply使用示例:

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
<script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>

<video id="player" playsinline controls>
  <source src="MY_VIDEO.mp4" type="video/mp4" />
</video>

<script>
  const player = new Plyr('#player', {
    controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen']
  });

  // 禁用右键菜单
  document.getElementById('player').oncontextmenu = function() { return false; };
</script>

PDF

如果使用浏览器打开pdf会有浏览器自带的下载功能，这里推荐使用以下插件来展示pdf：

pdf.js GitHub 47.1k；Demo地址：https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples

使用效果，在矩形区域显示一个pdf文件的内容：

img.png

但是：在矩形区域上方点击鼠标右键会出现一个【图片另存为】，这时候需要使用下方和【图片】一样的设置

图片

利用css设置禁止选中和js中的禁止右键：
css:

img {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
    user-select: none;         /* Standard */
    pointer-events: none;
}

js：

//防止右键下载图片
document.oncontextmenu = function () {
  return false;
}

// 或者

<div id="myElement" oncontextmenu="return false;">...</div>

vue中的写法示例：

<template>
  <img ref="myImage" src="your-image.jpg" />
</template>

<script>
export default {
  mounted() {
    this.$refs.myImage.oncontextmenu = function(event) {
      event.preventDefault();
      return false;
    };
  }
}
</script>