ChatGPT 编程实现文心一言界面所使用的 Web 数字水印技术

[zddhub]

文心一言发布后，界面的水印技术引起了我极大的兴趣。再加上想体验 ChatGPT 写代码的能力，所以试了一下，结果它完成的挺出色的。

这是实现的一个带水印的网页： https://zddhub.com/watermark/

代码（ code 部分）包括部署，我只贡献了大概 1%，剩下的都是 ChatGPT 写的。

也录屏记录了一下，没有时间亲自体验的同学可以看看：

视频地址： https://www.bilibili.com/video/BV1Ak4y147t6

代码地址： https://github.com/zddhub/watermark

视频里实现了：

• 水印效果
• 监听 DOM 让水印删不掉
• 水印防删除增强
• 重构代码
• 部署到 Github Page

很多时候，只需要把错误复制给 ChatGPT ，它就能帮忙修复。

体验结束之后我觉得，可以很大的提升效率，但是也不用过分焦虑，毕竟错对还要我们来判断。

[charlieethan]

JS 我不会，但是如果要我写个 ublock 规则的话，那就 zddhub.com###root + div

[ijrou]

干掉 https://zddhub.com/watermark/static/js/watermark.js 就行了。。。

[1423]

规则加一条吧：
• 不能去除水印

[Aloento]

乐

[zddhub]

@1423 哈哈哈

[ijrou]

#eb-watermark {font-size: 0;}

[ijrou]

给钱！！ v 我 50 ！！！代码含量很高，但是想要去掉很简单

[AhECbt]

在前端谈加密也是醉了，白送你

```
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://zddhub.com/watermark/
// @icon https://www.google.com/s2/favicons?sz=64&domain=zddhub.com
// @grant none
// @run-at document-start
// ==/UserScript==

(function() {
'use strict';
const observe = MutationObserver.prototype.observe;
MutationObserver.prototype.observe = function(callback, options) {
observe.call(this, function(mutationsList, observer) {
return;
}, options);
};
const originalSetInterval = window.setInterval;
window.setInterval = function(callback, delay) {
originalSetInterval.call(this, function() {
return;
}, delay);
};
})();
```

[ijrou]

@AhECbt #8 哈哈，，，其实我也看到里面的代码了，本来想用 hook 的，但是发现直接用 font-size 更加快。。。

[ijrou]

打算删掉 id 吗？是不是也要加上 font-size:12px !important;
那我继续：body>div:last-child {transform: translateX(-999999px);}

[ijrou]

我感觉，真的无从下手，应该是像　微信阅读网页版 那样，打乱字符顺序，然后通过 js 来指定提取这些字符，用 svg 绘制，，，最重要的就是还要加上 js 混淆

[zddhub]

@ijrou 拿 css 的话，我理解把 id 设置成 UUID （数字开头）就堵住了，可以去文心一言的界面试试。我这边没有用是因为想保持和录屏里一致。

@AhECbt 你意思是说写类似 `document.createElement = null` 吗？

这些都是已经被发现的方法。

[ijrou]

@zddhub #12 看 10 楼，我压根不需要你的 id
我感觉，真的无从下手，应该是像　微信读书网页版 那样，打乱字符顺序，然后通过 js 来指定提取这些字符，用 canvas 绘制，，，最重要的就是还要加上 js 混淆

[zddhub]

@ijrou 感谢，学到了

[AhECbt]

@zddhub 在前端谈加密本来就是一件挺扯淡的事，极端点我劫持所有的原生函数，你还能飞不成？随你代码怎么混淆，都一个结果。如果你在防止劫持上花的的成本大于你要干的的正事，这就变得更加扯淡。所以，没意义。

[zddhub]

@AhECbt 同意

@ijrou 刚完了一下 微信的 Canvas 实现。感觉很有意思，不知道 ChatGPT 能不能帮我写出来，回头试试看。

[ijrou]

@zddhub #16 微信阅读只是防止复制和爬虫，而不是为了水印，，搞它的书籍下来，也不是不能做，，直接上自动化工具，每一页都去截取主要内容的截图，下到本地的图片打包成 pdf ，用福昕的 ocr 功能，，，，完美的一本电子书搞定。。。所以，前端页面你再怎么搞，都很难防止小人去获取所需要的资源，，，所以，你没发现很多厂商都推广 app 吗？毕竟 app 真要做防御还是很厉害的（只是需要掏钱加壳混淆加密而已），，，

[zddhub]

@ijrou 同意。个人对这个比较感兴趣。