JavaScript 禁止用户保存图片

本文最后更新于:2020年4月27日 中午

场景

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

思路

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    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 事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    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}
    />
    )

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/**
* 兼容异步函数的返回值
* @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);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
useEffect(() => {
const cancel1 = AntiDebug.cyclingDebugger() as any
const cancel2 = AntiDebug.checkDebug(() =>
console.log('请不要打开调试'),
) as any
return () => {
cancel1()
cancel2()
}
}, [])

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

传输图片使用自定义格式

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

总结

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

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