如何为Blogger网站实现防复制粘贴及粘贴内容篡改的安全防护？

问题背景 #

我有一个基于Blogger搭建的站点，之前添加了两段JavaScript代码禁用右键和复制粘贴功能，但这类防护很容易通过插件或禁用JavaScript绕过。发现有站点实现了更强的防护：即使绕过JS复制内容，粘贴后也会变成随机文本，想知道如何在自己的Blogger站点实现这种功能。

核心原理 #

这种防护的核心是向页面内容中插入不可见的干扰文本，用户复制内容时，这些隐藏的随机文本会被一同选中并复制到剪贴板，粘贴时就会混入正常内容中，达到干扰效果。

具体实现步骤 #

1. 添加隐藏干扰文本的CSS样式 #

先定义CSS来隐藏干扰元素，确保浏览时不可见，但复制时会被选中：

.invisible-spoiler {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

2. 添加生成并插入干扰文本的JavaScript代码 #

这段脚本会在页面加载完成后，向文章内容的每个段落/块中插入随机生成的干扰文本：

// 生成指定长度的随机字符串
function generateRandomText(length) {
    const charPool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let randomText = '';
    for (let i = 0; i < length; i++) {
        randomText += charPool.charAt(Math.floor(Math.random() * charPool.length));
    }
    return randomText;
}

// 页面加载完成后插入干扰元素
document.addEventListener('DOMContentLoaded', function() {
    // 定位Blogger文章内容的容器（通常是.post-body下的段落和块）
    const contentElements = document.querySelectorAll('.post-body p, .post-body div');
    contentElements.forEach(element => {
        // 生成20-70长度的随机干扰文本
        const spoilerContent = generateRandomText(Math.floor(Math.random() * 50) + 20);
        // 创建干扰元素
        const spoilerSpan = document.createElement('span');
        spoilerSpan.className = 'invisible-spoiler';
        spoilerSpan.textContent = spoilerContent;
        // 在内容块开头和结尾各插入一个干扰元素
        element.insertBefore(spoilerSpan.cloneNode(true), element.firstChild);
        element.appendChild(spoilerSpan);
    });
});

3. 在Blogger模板中添加代码 #

• 登录Blogger后台，进入「主题」→「自定义」→「编辑HTML」
• 在<head>标签内部，添加包裹在<style>标签中的CSS代码：

<style>
.invisible-spoiler {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
</style>

• 在</body>标签的上方，添加包裹在<script>标签中的JavaScript代码：

<script>
// 生成指定长度的随机字符串
function generateRandomText(length) {
    const charPool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let randomText = '';
    for (let i = 0; i < length; i++) {
        randomText += charPool.charAt(Math.floor(Math.random() * charPool.length));
    }
    return randomText;
}

// 页面加载完成后插入干扰元素
document.addEventListener('DOMContentLoaded', function() {
    // 定位Blogger文章内容的容器（通常是.post-body下的段落和块）
    const contentElements = document.querySelectorAll('.post-body p, .post-body div');
    contentElements.forEach(element => {
        // 生成20-70长度的随机干扰文本
        const spoilerContent = generateRandomText(Math.floor(Math.random() * 50) + 20);
        // 创建干扰元素
        const spoilerSpan = document.createElement('span');
        spoilerSpan.className = 'invisible-spoiler';
        spoilerSpan.textContent = spoilerContent;
        // 在内容块开头和结尾各插入一个干扰元素
        element.insertBefore(spoilerSpan.cloneNode(true), element.firstChild);
        element.appendChild(spoilerSpan);
    });
});
</script>

补充说明 #

• 这种方法无法做到100%防护（比如用户可以通过开发者工具删除干扰元素），但相比单纯禁用右键/复制的方案，防护强度大幅提升。
• 可以保留之前的右键禁用代码作为辅助防护，但核心依赖干扰文本机制。

内容的提问来源于stack exchange，提问作者Reitei17