用什么样的方法防止图片被抓取？

jiafaner · 2018-09-12T03:27:45Z

公司接了个活，老板说能赚不少钱，对外展示高清照片，后端存储什么的都做好了，现在做到前端了其中所有匿名用户都能够看到一部分照片，其他的需要登录才能看，但客户的要求是图片需要防止被任意抓取有没有什么技术能实现随便被抓的，也不用完全避免被抓取，只要能相对不容易被下载就好了

防止

图片

照片

匿名

97 replies • 2018-09-13 16:57:33 +08:00

1

huangke

Sep 12, 2018

1

个人觉得这个需求没有两把刷子做不到吧？看看其他人有什么高见

2

Cheez

PRO

Sep 12, 2018 via Android

1

....还防止任意抓取，反正只要有登陆账户就能抓你的图片，你只能控制他抓取的频率，频率高就封号封 ip。图片本身就验证 http 头，就这样了。

3

imn1

Sep 12, 2018

介绍那个什么四姐骂客腚，或者中国什么图网给你的客户

4

Sor

Sep 12, 2018

好奇网站内容，防止被任意抓取是只有登录查看的图片还是包含匿名也可以看到的图片呢

5

xor

Sep 12, 2018 via iPhone

2

js 获取加密图片，解密后绘制到 canvas

6

opengps

Sep 12, 2018

1

高清图片的下载展示用积分，积分用钱买

7

F1024

Sep 12, 2018

漫画网站你去研究下一般都有防下载

8

anteros

Sep 12, 2018

1

所见即所得，只能控制"见"，比如 VIP 会员每天可见次数限制，或购买才可见

9

wizardoz

Sep 12, 2018

1

用瓦片图显示图片

10

rexxtem07

Sep 12, 2018 via iPhone

FlashPlayer 解密显示？

11

wuhhhh

Sep 12, 2018 via iPhone

叼如 eh 也挡不住爬虫的，但是人家直接把大陆 ip 禁了

12

moult

Sep 12, 2018 via iPhone

15

不管怎么做，都防不了用户直接截图。

13

ericgui

Sep 12, 2018

1

其实这无解的，你只能先搞起来，然后看日志，人工对某些坏蛋进行截留。

说白了反爬虫，先有爬虫，再去反吧？

14

001enoolleh

Sep 12, 2018

1

加水印，超大范围的那种，

15

KgM4gLtF0shViDH3

Sep 12, 2018

@xor #5 那 js 怎么防止被抓到呢

16

zpf124

Sep 12, 2018

@xor canvas 也能右键另存为图片的吧...

我感觉可能除了被淘汰的 flash 以外，就只有裁剪成 n 块碎片，然后用 css 拼成一张图，这样视觉上是一张图，dom 结构上则是杂乱无章的。

但这只能防扒原图，包括 flash 也不能防止人家截图。

17

jswh

Sep 12, 2018

1

websocket 加密传输图片数据，接收后画到 canvas 上可能可以。性能网速啥的可能不好。

18

jswh

Sep 12, 2018

@zpf124 canvas 右键保存的是整个 canvas 的样子，如果要不能右键就甚至 backgrou-img 就好了

19

jswh

Sep 12, 2018

@jswh background-img

20

pinews

Sep 12, 2018

1

图片不要用 img 标签，全改成 background-image，应该能防一部分。
@jswh 对

21

nilrust

Sep 12, 2018

1

简单啊，

类似之前流行的 QQ 群那种付费看图，

图片用 base64 传送内容，也就没有真正意义上的图片链接地址，没付费前传模糊图片，付费后传一次清楚的图片。

22

stargazer242

Sep 12, 2018

全图水印

23

LuffyGu

Sep 12, 2018

backgroun-image 也能抓。

24

NicholasYX

Sep 12, 2018

加水印

25

MorningBOBO

Sep 12, 2018

给你的图片加水印,抓取你就是变相推广.不是美滋滋

26

jiafaner

OP

Sep 12, 2018

@Sor 这块的需求还不明确，但目前来说，客户只提了强烈的需求，就是不能随便被抓走了

27

jiafaner

OP

Sep 12, 2018

@NicholasYX
@MorningBOBO 加水印这个说过了，可是客户说不能全部打水印。

28

luoway

Sep 12, 2018

往 canvas 标签里绘制图片，图片是 base64 的更好（但性能更差）

29

fuermosi777

Sep 12, 2018

5

预览时显示一个低分辨率的缩略图，鼠标点击一个区域（比如 x=30,y=40)，后端计算位置然后加载这个区域的高清图(比如 w=100,h=100 ），用户每点击一处，显示一处的高清图。我们之前学校负责照毕业照的奸商就是这么干的（为了防止下载高清毕业照）。

30

jiafaner

OP

Sep 12, 2018

@fuermosi777 太厉害了。

31

maxxfire

Sep 12, 2018

把图片做成视频，让它慢慢爬吧。

32

tomfs

Sep 12, 2018

2

不加盐,貌似只能这样了.
https://www.patrick-wied.at/talks/image-protection/demos/demo-encrypted.html
加盐的话,用 webgl 吧

33

ala2008

Sep 12, 2018

学习哈。。

34

vjnjc

Sep 12, 2018

1

感觉和技术无关。

没登录，或者是普通用户给他看普通图，vip 用户才给看高清图~
这也防不了 vip 用户用技术手段下载图片，只能法律见了。

35

txwd

Sep 12, 2018

插个眼，也想知道有什么好办法

36

3a3Mp112

Sep 12, 2018

天狼星之类的客户端是能最大限度的防止技术手段录像和截图的。
但是直接过手机拍照无解。

37

kernel

Sep 12, 2018 via Android

把大图随机分割成大量小图, 在客户端拼接起来显示

38

infra

Sep 12, 2018

不展示原图，只用 image-data 展示原图编码

39

alwayshere

Sep 12, 2018

1

后端把图片打乱，前端拼成 css sprite 展示，但是我用 phantomjs 截图又完了，所以，这题无解

40

aitaii

Sep 12, 2018

手机拍照无解

41

bumz

Sep 12, 2018

1

简单地说，能免费看到就能免费抓到

各种技术只不过防零预算小白，大不了我雇佣一堆廉价劳动力手工截图

42

weipt

Sep 12, 2018

用一般网站验证码的技术控制图片

43

uuair

Sep 12, 2018

5

不要用技术解决问题。。。。你把图片放到视觉中国上去，然后谁用了你的图，就让视觉中国起诉他。你俩一起赚钱，何乐不为。

44

yksoft1

Sep 12, 2018

3

也只有加水印或者不可见数字水印了。
图源拿 JS 加密了，防不住浏览器插件；浏览器插件防住了，防不住操作系统的截图；操作系统的截图防住了，防不住 VGA/HDMI 采集卡。

45

bumz

Sep 12, 2018

3

放一个服务器加密，前端解密的 demo

https://bumfo.github.io/protect/index

打开控制台，只能看到一个加密过的脚本和加密过的图片

46

VgV

Sep 12, 2018

flash

47

locoz

Sep 12, 2018

1

注册需要正常手机号+注册最后一步付费验证+登陆付费可见+每天可见高清图片数量限制+图片加密后 js 渲染+隐式水印，js 高度混淆+动态生成+每次更换。
这样够复杂了吧？然而还是挡不住人家招一群实习生手动截图保存

48

TomatoYuyuko

Sep 12, 2018

加水印加法律声明，不然截屏或者拍照岂不是无解。

49

w516322644

Sep 12, 2018

@uuair 2333

50

Famio

Sep 12, 2018

1

赞同图片加水印，数字的那种
这里是我之前看到过的方案： http://accu.cc/content/pil/watermark/

51

JmmBite

Sep 12, 2018

1

记得有个漫画是把每张图片分为 N 部分打乱合成，然后前端重组后正常显示。

52

hicdn

Sep 12, 2018

1

@fuermosi777 用 phantomjs 把图点一遍，就可以下载完高清图，再用 imagemagic 拼接好。现在用 chrome headerless 更方便了

53

zsdroid

Sep 12, 2018

1

@bumz #45 你以为去掉 canvas 的鼠标事件就万事大吉了？？

54

coolcoffee

Sep 12, 2018

1

可以参考一下 pexels.com ，注册和登录都要过 Google 家 reCAPTCHA 的，然后登录后才能下载高清图，每下载 10 张就触发一次 reCAPTCHA 验证。整个网站应该上百万条数据，要一个个点验证码几乎不可能了。

55

bumz

Sep 12, 2018

@zsdroid #53 canvas 保存图片和和截图的原理是一样的，这个只要绘制 canvas 的时候加上水印就行了

56

xd314697475

Sep 12, 2018

我记得我们老师讲过

把图切成若干个部分，然后+水印

前几天遇到一个网站是对访问进行限制，大概是必须包含特定头文件才能访问

57

uptime

Sep 12, 2018

1

感觉是 H 站……

58

sampeng

Sep 12, 2018

1

其实没什么意义。你防一次。我只要下一次就可以无限制分发。
除了水印，几乎无解。网页版的东西。有无数办法爆破。。flash 会好点。分块成无数的小图片。然后 flash 按规则拼起来。但你也挡不住直接屏幕截图的。。。。

59

sampeng

Sep 12, 2018

1

如果你的东西很有价值。。要知道中国有一批人是天天在家闲着没事干的。。人力外包 1 张图 1 毛钱-1 块钱。大把的人抢着干

60

bk201

Sep 12, 2018

有个做法就是转成 flash

61

qiuqiuer

Sep 12, 2018

截图特征搜索没什么办法

62

qsbaq

Sep 12, 2018

几乎无解~

63

hackxing

Sep 12, 2018

1

大佬们，可以看看中国汽车报的图片处理，我是没抓回来图片。
http://www.cnautonews.com/

64

defel

Sep 12, 2018 via iPhone

截图无解，如果还不行，手机对着电脑拍照就更无解了。。

65

mYYnSmiTEQWcCwAr

Sep 12, 2018

@bumz F12 控制台直接对 canvas 转 base64
document.querySelector("body > canvas").toDataURL("image/png")

66

xider

Sep 12, 2018 via Android

webp，header 里设置成 jpeg

67

crab

Sep 12, 2018

这和防止视频翻录一样无解

68

mYYnSmiTEQWcCwAr

Sep 12, 2018

1

@tomfs 虽然 js 里面把 canvas 的 toDataURL 给覆盖了但我们还是可以创建一个 iframe 来获取原本的函数
var i = document.createElement('iframe');
i.style.display = 'none';
document.body.appendChild(i);
var c=i.contentDocument.createElement("canvas")
c.toDataURL.call(document.getElementsByTagName("canvas")[0])

69

WriteJob

Sep 12, 2018

了解一下~

70

yankebupt

Sep 12, 2018

1

@jiafaner
如果是观赏类图片(口水)
不知道可不可以打一个 alpha 值很低不影响美观效果，但是抠图起来特别费劲且必定留痕迹的彩色智能水印.....
楼主下次发这个帖子的时候贴两张图诱惑一下我们也好有动力回帖啊....
这次就算了，说不定问之前都是有图库没版权放出来要出事...下次记得买几张图放出来贿赂一下 233

71

jiafaner

OP

Sep 13, 2018

@yankebupt 不是观赏类的图啊，是一些特别专业的一些行业图，都是些图纸啥的，也有一些有版权的照片，还有一些奇怪的不认识的东西

72

libook

Sep 13, 2018

1

puppeteer 项目了解一下，你就理解了什么是能见到就能抓到。

CDN Token 鉴权、Canvas 绘制、高频水印、IP 限流等等无非就是提升爬图的难度，但都是可破解的，防菜鸟不防大牛，之前新闻里说的阿里能在截图里藏匿截图者的信息，但这也只是为了事后调查保存证据。

牛 13 的公司从来都是通过法务手段来解决版权问题的，参见迪斯尼、甲骨文和微软。。。