构建一个 React 组件，对复制的文本进行加密，同时在屏幕上保持可读

Source: Dev.to

工作原理

• 文本在屏幕上正常显示。
• 当用户复制文本时，剪贴板会收到使用随机化维吉尼亚密码生成的加密乱码。
• 加密密钥在每次渲染时重新创建，且从不暴露，使得解密不可能。

使用方法

import { ProtectedText } from "react-text-protect";

function App() {
  return (
    <ProtectedText>
      This text looks normal but
      copying it produces encrypted
      output that cannot be decoded.
    </ProtectedText>
  );
}

示例复制输出

Jeb lhag fdiax josfi kljpdy ftq ut peryuobv xvvrf

为什么采用这种方式

• 没有破坏右键菜单或可访问性问题。
• 无法通过浏览器的检查元素绕过。
• 为用户保持正常的文本行为。
• 零依赖，约 2 KB 的打包体积。

使用场景

• 在线考试与评估
• 阻止 AI 爬虫
• 专有文档
• 任何需要可阅读但不可复制的内容

安装与链接

npm install react-text-protect

欢迎反馈！