前端防止用戶復制的十種方法總結
更新時間：2025年12月11日 08:33:38 作者：劉大華
在我們寫前端的時候,有時候會遇到這種禁止用戶復雜網頁內容的需求,這里來分享幾種常見的方法,但是這些方法也不能完全阻止內容被復制,需要的朋友可以參考下
引言
在我們寫前端的時候，有時候會遇到這種禁止用戶復雜網頁內容的需求，這里來分享幾種常見的方法，但是這些方法也不能完全阻止內容被復制。
因為用戶還是可以通過開發(fā)者工具，截圖提取文字等等這些方式來進行復制。不過我們也可以在一定程度上提升復制的門檻，防止普通用戶隨意復制。
以下是幾種常用方案：
1.禁用文本選擇
使用 CSS 禁止用戶選中文本：
body {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* 標準語法 */
}
也可以針對特定元素設置：
<div style="user-select: none;">這段文字無法被選中</div>
用戶仍可查看源代碼或使用其他手段復制。
2.監(jiān)聽并阻止復制、剪切、粘貼事件
通過 JavaScript 攔截相關鍵盤和剪貼板事件：
document.addEventListener('copy', (e) => {
e.preventDefault();
alert('復制已被禁止');
});
document.addEventListener('cut', (e) => {
e.preventDefault();
alert('剪切已被禁止');
});
document.addEventListener('paste', (e) => {
e.preventDefault();
alert('粘貼已被禁止');
});
用戶還是可以按下F12禁用 JavaScript 或繞過事件監(jiān)聽。
3.將內容嵌入圖片或 Canvas
將關鍵內容渲染為圖片或使用 <canvas> 繪制，使文本不可直接選中：
<img src="text-as-image.png" alt="不可復制的文字">
或使用 canvas 動態(tài)繪制：
<canvas id="myCanvas"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.font = '20px Arial';
ctx.fillText('這段文字無法復制', 10, 50);
</script>
不利于 SEO、無障礙訪問（屏幕閱讀器無法讀?。壹虞d慢。
4.用戶按F12就出發(fā)debug功能
當用戶按下F12時，觸發(fā)debug調試，讓用戶無法選中頁面內容。
<script>
(function antiDebug() {
let devOpen = false;
const threshold = 100;
function check() {
const start = performance.now();
debugger;
const end = performance.now();
if (end - start > threshold) {
if (!devOpen) {
devOpen = true;
document.body.innerHTML = '<h2>檢測到開發(fā)者工具，請關閉后重試。</h2>';
// 可選：上報用戶行為
// fetch('/log-devtools', { method: 'POST' });
}
} else {
devOpen = false;
}
setTimeout(check, 1000);
}
check();
})();
</script>
5. 動態(tài)文本拆分與重組
將文本內容拆分成多個DOM節(jié)點，增加復制難度：
<div id="protected-text">
<!-- 文本將被JavaScript拆分并插入 -->
</div>
<script>
const text = "這是一段需要保護的機密內容，不能被輕易復制";
const container = document.getElementById('protected-text');
// 將每個字符用span包裹
text.split('').forEach(char => {
const span = document.createElement('span');
span.textContent = char;
span.style.display = 'inline-block'; // 增加選擇難度
container.appendChild(span);
});
</script>
進階版：隨機插入不可見字符或零寬字符：
function obfuscateText(text) {
const zeroWidthSpace = '\u200B'; // 零寬空格
return text.split('').map(char =>
char + zeroWidthSpace.repeat(Math.floor(Math.random() * 3))
).join('');
}
const originalText = "保護內容";
document.getElementById('text').textContent = obfuscateText(originalText);
6. 使用CSS偽元素顯示內容
通過CSS的::before或::after偽元素顯示文本：
<style>
.protected-content::before {
content: "這段文字通過CSS生成，無法直接選中和復制";
}
</style>
<div class="protected-content"></div>
7. 字體反爬蟲技術
使用自定義字體文件，將字符映射關系打亂：
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2');
}
.protected-text {
font-family: 'CustomFont';
}
在字體文件中，將實際字符與顯示字符的映射關系打亂，比如：
- 字符
a在字體中實際顯示為b - 字符
b顯示為c，以此類推
后端配合：服務器動態(tài)生成字體文件，定期更換映射關系。
8. Canvas + WebGL 渲染文本
使用更復雜的圖形渲染技術：
<canvas id="textCanvas" width="800" height="100"></canvas>
<script>
const canvas = document.getElementById('textCanvas');
const ctx = canvas.getContext('2d');
// 設置文字樣式
ctx.font = '24px Arial';
ctx.fillStyle = '#333';
// 繪制干擾元素
ctx.fillText('保護內容', 50, 50);
// 添加噪聲干擾
for(let i = 0; i < 100; i++) {
ctx.fillRect(
Math.random() * 800,
Math.random() * 100,
1, 1
);
}
</script>
9. SVG 文本渲染
使用SVG渲染文本，增加選擇難度：
<svg width="400" height="100">
<text x="10" y="30" font-family="Arial" font-size="20"
fill="black" style="user-select: none;">
這段SVG文本難以復制
</text>
<!-- 添加干擾路徑 -->
<path d="M10,40 L390,40" stroke="#eee" stroke-width="1"/>
</svg>
10. 實時DOM監(jiān)控與修復
監(jiān)控DOM變化，防止用戶通過開發(fā)者工具修改內容：
const contentElement = document.getElementById('protected-content');
const originalContent = contentElement.innerHTML;
// 定時檢查內容完整性
setInterval(() => {
if (contentElement.innerHTML !== originalContent) {
contentElement.innerHTML = originalContent;
console.log('檢測到內容篡改，已恢復');
}
}, 500);
// 使用MutationObserver更精確的監(jiān)控
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'childList' || mutation.type === 'characterData') {
contentElement.innerHTML = originalContent;
}
});
});
observer.observe(contentElement, {
childList: true,
characterData: true,
subtree: true
});
綜合防御策略建議
對于高安全要求的場景，建議采用分層防御：
class ContentProtector {
constructor() {
this.init();
}
init() {
this.disableSelection();
this.bindEvents();
this.startMonitoring();
this.obfuscateContent();
}
disableSelection() {
document.head.insertAdjacentHTML('beforeend', `
<style>
body { -webkit-user-select: none; user-select: none; }
.protected { cursor: default; }
</style>
`);
}
bindEvents() {
// 綁定所有阻止事件
['copy', 'cut', 'paste', 'contextmenu', 'keydown'].forEach(event => {
document.addEventListener(event, this.preventDefault);
});
}
preventDefault(e) {
e.preventDefault();
return false;
}
startMonitoring() {
// 啟動各種監(jiān)控
this.monitorDevTools();
this.monitorDOMChanges();
}
obfuscateContent() {
// 內容混淆處理
// ...
}
monitorDevTools() {
// 開發(fā)者工具檢測
// ...
}
monitorDOMChanges() {
// DOM變化監(jiān)控
// ...
}
}
// 初始化保護
new ContentProtector();
總結
這些方法只能防普通用戶，防不住真正想復制的人。
因為別人還是可以通過看源碼、截圖、關掉 JS 等方式繞過限制。
所以建議：
- 別過度防護，以免影響正常用戶和 SEO；
- 重要內容靠后端控制（比如登錄才能看全文）；
- 組合使用幾種方法，提高門檻就好，別追求絕對安全。
畢竟前端展示的內容，就默認是能被看到的，也就能被復制的。
以上就是前端防止用戶復制的十種方法總結的詳細內容，更多關于前端防止用戶復制的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家詳細介紹了JavaScript結合H5 canvas實現(xiàn)投籃小游戲的具體代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細介紹了javascript設計模式之裝飾者模式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
window.print可以打印網頁，但有時候我們只希望打印特定控件或內容，怎么辦呢，請看下面的例子2013-12-12
展開和收起這樣的效果想必大家早就眼熟了吧，利用閑暇時間用js寫了一個具體功能：當自己處于全部顯示的時候，點擊自己的收起，自己收起等等感興趣的你可以參考下哈2013-03-03
這篇文章主要介紹了基于JS實現(xiàn)快速讀取TXT文件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
文字不間斷滾動(上下左右)實例代碼，需要的朋友可以參考一下2013-04-04
JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組
Array filter() 方法會跳過稀疏數(shù)組中缺少的元素，它的返回數(shù)組總是稠密的。這篇文章給大家介紹了JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組的相關知識，需要的朋友參考下2018-02-02
這篇文章主要介紹了微信小程序之批量上傳并壓縮圖片的實例代碼,需要的朋友可以參考下2018-07-07
腳本分析、壓縮、混淆工具 JSA新版本發(fā)布，壓縮效率提高大約10％
腳本分析、壓縮、混淆工具 JSA新版本發(fā)布，壓縮效率提高大約10％...2007-05-05
這篇文章主要為大家介紹了JavaScript Window.open 彈窗使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11