如何实现网站文本不可复制、图片不可下载（不使用CSS）

文本防复制 #

不用CSS的话，直接通过JavaScript阻止复制事件是最直接的方案：

全局禁用文本复制 #

给页面根元素绑定oncopy事件，直接返回false即可：

<body oncopy="return false;">
  <!-- 页面内容 -->
</body>

或者用纯JS监听全局copy事件，阻止默认复制行为：

document.addEventListener('copy', function(e) {
  e.preventDefault();
});

如果只想针对特定区域禁用复制，给目标容器绑定事件：

<div oncopy="return false;">
  这段文本无法被复制
</div>

图片防下载 #

针对你提供的React图片标签，这里给出两种无CSS的处理方案：

1. 阻止右键与拖拽保存 #

给img标签直接绑定contextmenu（阻止右键菜单）和dragstart（阻止拖拽保存）事件：

<img 
  className="h-12 mx-auto " 
  src={SunFog} 
  alt="sun fog"
  onContextMenu={(e) => e.preventDefault()}
  onDragStart={(e) => e.preventDefault()}
/>

2. 转为Canvas渲染（隐藏原图地址） #

把图片绘制到Canvas中，用户无法直接获取原图URL，也没法右键下载原图：

import { useEffect, useRef } from 'react';

function ProtectedImage({ src, alt, className }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.src = src;
    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
    };
  }, [src]);

  return <canvas ref={canvasRef} className={className} alt={alt} />;
}

// 使用示例
<ProtectedImage className="h-12 mx-auto " src={SunFog} alt="sun fog" />

注意事项 #

• 这些方案只能阻止常规的复制/下载操作，无法完全防止懂技术的用户通过浏览器开发者工具获取资源，毕竟网页资源最终会加载到本地。
• 全局禁用复制可能影响用户体验，建议只针对需要保护的内容区域启用。

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