JavaScript 禁止用户保存图片


场景

在业务需求中不希望用户保存图片,因为是一些供内部使用的图片。

思路

  • 添加事件禁止选择、拖拽、右键(简单的禁止用户保存图片,但无法阻止用户打开控制台查看,或是直接抓包)
  • 将之转换为 canvas(让浏览器认为不是图片以此禁止用户对之进行图片的操作,但无法阻止抓包)
  • 禁止用户使用控制台查看源码(阻止浏览器打开控制台,但无法阻止抓包)
  • 传输图片使用自定义格式(可以阻止抓包,但需要后台配合)

注:以下内容使用 react+ts 实现

添加事件禁止选择、拖拽、右键

简而言之,这是一种简单有效的方式,能够在用户不打开控制台的情况下阻止用户保存图片。

export function preventDefaultListener(e: any) {
  e.preventDefault()
}

;<img
  src={props.url}
  alt=""
  style={{
    //禁止用户选择
    userSelect: 'none',
    //禁止所有鼠标事件,过于强大,图片仅用于展示可用
    // pointerEvents: 'none',
  }}
  onTouchStart={preventDefaultListener}
  onContextMenu={preventDefaultListener}
  onDragStart={preventDefaultListener}
/>

参考:https://www.cnblogs.com/dxzg/p/9930559.html

将之转换为 canvas

另一种思路是将图片转换为 canvas 避免用户使用 img 相关的操作。

  1. 将图片转成 canvas

    export async function imageToCanvas(url: string, canvas: HTMLCanvasElement) {
      return new Promise((resolve, reject) => {
        //新建Image对象,引入当前目录下的图片
        const img = new Image()
        img.src = url
        const c = canvas.getContext('2d')!
    
        //图片初始化完成后调用
        img.onload = function () {
          //将canvas的宽高设置为图像的宽高
          canvas.width = img.width
          canvas.height = img.height
    
          //canvas画图片
          c.drawImage(img, 0, 0, img.width, img.height)
          resolve()
        }
        img.addEventListener('error', (e) => {
          reject(e)
        })
      })
    }
  2. 禁用 canvas 事件

    const throwFn = () => {
      throw new Error(
        "Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.",
      )
    }
    
    const $canvasRef = useRef<HTMLCanvasElement>(null)
     useEffect(() => {
         ;(async () => {
             await imageToCanvas(props.url, $canvasRef.current!)
             $canvasRef.current!.toBlob = throwFn
             $canvasRef.current!.toDataURL = throwFn
         })()
     }, [])
     return (
         <canvas
             ref={$canvasRef}
             onTouchStart={preventDefaultListener}
             onContextMenu={preventDefaultListener}
         />
     )

禁止用户使用控制台查看源码

如果能禁止用户操作控制台,那么自然能够避免用户查看源码了,下面是一个简单的实现。

/**
 * 兼容异步函数的返回值
 * @param res 返回值
 * @param callback 同步/异步结果的回调函数
 * @typeparam T 处理参数的类型,如果是 Promise 类型,则取出其泛型类型
 * @typeparam Param 处理参数具体的类型,如果是 Promise 类型,则指定为原类型
 * @typeparam R 返回值具体的类型,如果是 Promise 类型,则指定为 Promise 类型,否则为原类型
 * @returns 处理后的结果,如果是同步的,则返回结果是同步的,否则为异步的
 */
export function compatibleAsync<T = any, Param = T | Promise<T>, R = T>(
  res: Param,
  callback: (r: T) => R,
): Param extends Promise<T> ? Promise<R> : R {
  return (res instanceof Promise
    ? res.then(callback)
    : callback(res as any)) as any
}

/**
 * 测试函数的执行时间
 * 注:如果函数返回 Promise,则该函数也会返回 Promise,否则直接返回执行时间
 * @param fn 需要测试的函数
 * @returns 执行的毫秒数
 */
export function timing<R>(
  fn: (...args: any[]) => R,
  // 函数返回类型是 Promise 的话,则返回 Promise<number>,否则返回 number
): R extends Promise<any> ? Promise<number> : number {
  const begin = performance.now()
  const res = fn()
  return compatibleAsync(res, () => performance.now() - begin)
}
/**
 * 禁止他人调试网站相关方法的集合对象
 */
export class AntiDebug {
  /**
   * 不停循环 debugger 防止有人调试代码
   * @returns 取消函数
   */
  public static cyclingDebugger(): Function {
    const res = setInterval(() => {
      debugger
    }, 100)
    return () => clearInterval(res)
  }
  /**
   * 检查是否正在 debugger 并调用回调函数
   * @param fn 回调函数,默认为重载页面
   * @returns 取消函数
   */
  public static checkDebug(
    fn: Function = () => window.location.reload(),
  ): Function {
    const res = setInterval(() => {
      const diff = timing(() => {
        debugger
      })
      if (diff > 500) {
        console.log(diff)
        fn()
      }
    }, 1000)
    return () => clearInterval(res)
  }
}
useEffect(() => {
  const cancel1 = AntiDebug.cyclingDebugger() as any
  const cancel2 = AntiDebug.checkDebug(() =>
    console.log('请不要打开调试'),
  ) as any
  return () => {
    cancel1()
    cancel2()
  }
}, [])

return <img src={url} alt="" />

传输图片使用自定义格式

该功能需要服务端配合,故而此处赞不实现,可以参考 微信读书,就是将文本转为 canvas,数据传输也进行了加密,可以在很大程度上防止普通用户想要复制/下载的行为了。

总结

如同所有的前端限制用户的技术一样,这是一个没有终点的斗争。。。

参考广告屏蔽和屏蔽复制粘贴的发展。。。


文章作者: rxliuli
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 rxliuli !
 上一篇
偶遇 HTML 中的奇妙字符 偶遇 HTML 中的奇妙字符
虽然名字听起来就像是一本正经的胡说八道,但吾辈确实遇到了一个奇怪的问题,于此分享给大家。 事情的起始如下 下班回家 => 想要看动画 => 去动漫花园下载 BT 种子 => 动漫花园一片空白 => Why? 于是吾
2020-04-28 rxliuli
下一篇 
在现代前端项目中使用 Worker 在现代前端项目中使用 Worker
场景由于需要在 Browser 进行大量的(音频转解码)计算,所以吾辈开始尝试使用 webworker 分离 CPU 密集型的计算操作,最终找到了 comlink 这个库,但之前在 vue 中使用时发生了错误,目前看起来已经得到了解决,所以
2020-04-18 rxliuli
  目录