前端实现内容保护的几种有效技术方案

.protected-content {
  user-select: none;
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
}

// 禁用复制操作
document.addEventListener('copy', e => e.preventDefault());

// 禁用右键菜单
document.addEventListener('contextmenu', e => e.preventDefault());

// 禁用快捷键
document.addEventListener('keydown', e => {
  if (e.ctrlKey && e.key === 'c') e.preventDefault();
});

document.addEventListener('copy', e => {
  const selection = window.getSelection().toString();
  e.clipboardData.setData('text/plain', 
    `${selection}\n\n—— 本文内容来自XXX网站，未经授权禁止转载 ——`);
  e.preventDefault();
});

// 分段加载内容
function loadContentInParts() {
  const contentParts = [...];
  let currentPart = 0;
  
  setInterval(() => {
    if (currentPart < contentParts.length) {
      document.getElementById('content').innerHTML += contentParts[currentPart++];
    }
  }, 1000);
}

// 使用Canvas绘制文本
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillText("受保护的内容", 10, 50);
document.body.appendChild(canvas);

// 将文本转为图片
function textToImage(text) {
  const canvas = document.createElement('canvas');
  // ...绘制文本到canvas...
  return canvas.toDataURL();
}

document.getElementById('protected').innerHTML = 
  `<img src="${textToImage('重要内容')}">`;