如何禁止用戶復制頁面內容？

作者：story 2025-07-09 07:40:00

雖然從技術上完全阻止一個“有心人”拷貝內容幾乎是不可能的，但作為前端開發者，我們有多種方法可以極大地增加復制的難度，從而在一定程度上達到我們的目的。

某些特定的業務場景下，我們可能會有禁止用戶復制頁面內容的需求。比如：

付費內容保護：在線小說、付費課程等，希望防止內容被輕易拷貝和傳播。
試卷或答題系統：防止考生將題目復制出去尋求場外幫助。
敏感信息展示：如銀行卡號、個人身份信息等，減少被意外泄露的風險。

雖然從技術上完全阻止一個“有心人”拷貝內容幾乎是不可能的（畢竟還有截圖、拍照等物理手段），但作為前端開發者，我們有多種方法可以極大地增加復制的難度，從而在一定程度上達到我們的目的。

方法一：CSS 魔法 —— user-select: none

這是最簡單、最快捷，也是最常用的一種方法。CSS 的 user-select 屬性可以控制用戶是否能夠選擇文本。

/* 應用到需要禁止選擇的元素上 */
.no-copy {
  user-select: none;
  /* 兼容舊版瀏覽器 */
  -webkit-user-select: none; /* Safari, Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
}

/* 或者直接粗暴地應用到整個頁面 */
body {
  user-select: none;
}

效果：當鼠標劃過應用了該樣式的區域時，將無法選中任何文本，光標也不會變成文本選擇的 I 型。自然也就無法進行復制操作。

優點：

實現極其簡單，一行 CSS 搞定。
純樣式控制，沒有 JavaScript 性能開銷。

缺點：

防君子不防小人：任何一個懂點前端的開發者，都可以通過瀏覽器開發者工具，輕松地找到這個 CSS 屬性并禁用它，然后就能愉快地復制了。
體驗不佳：用戶無法選擇文本，有時可能會影響正常的交互預期。

方法二：JavaScript 事件監聽 —— 控制 copy 和 contextmenu 事件

如果想做得更“絕”一點，我們可以通過 JavaScript 來監聽和阻止用戶的復制行為。

1. 禁用復制事件 (copy)

當用戶執行復制操作時（無論是通過 Ctrl+C 快捷鍵還是右鍵菜單），copy 事件會被觸發。我們可以攔截它。

2. 禁用右鍵菜單 (contextmenu)

為了防止用戶通過右鍵菜單進行復制，我們可以把右鍵菜單也一并禁用掉。

document.addEventListener('contextmenu', function(e) {
  // 阻止默認的右鍵菜單彈出行為
  e.preventDefault();
});

3. 禁用鍵盤快捷鍵 (keydown)

更進一步，我們還可以監控鍵盤事件，直接禁用 Ctrl+C。

組合使用：將以上 JS 代碼和 CSS 的 user-select 結合起來，就能構建一個更強的“防御體系”。

優點：

比純 CSS 更難破解，因為禁用 JS 比修改 CSS 要麻煩一些。
可以提供自定義的交互反饋，比如彈窗提醒。

缺點：

依然可破：在瀏覽器開發者工具中禁用 JavaScript，所有這些限制都會失效。
體驗極差：粗暴地禁用右鍵和快捷鍵會嚴重影響用戶的正常瀏覽習慣（比如右鍵刷新、打開新標簽頁等），可能會激怒用戶。

方法三：“溫柔”的魔法 —— 在復制內容中“加料”

我們可以監聽 copy 事件，然后通過 Clipboard API 修改剪貼板中的內容。

document.addEventListener('copy', function(e) {
 // 獲取用戶選中的文本
 const selection = window.getSelection().toString();
 // 你想追加的版權信息
 const copyright = `\n\n----------------\n來源公眾號：FedJavaScript`;
 // 阻止默認的復制行為
  e.preventDefault();
 // 將 "選中內容 + 版權信息" 寫入剪貼板
  e.clipboardData.setData('text/plain', selection + copyright);
});

優點：

用戶體驗好：不影響用戶的核心操作，只是附加了信息。
君子協定：這是一種良性的引導，而非強制的封鎖。

思考：我們真的需要禁止復制嗎？

在實施這些技術方案之前，我們應該先問自己一個問題：禁止復制真的是最好的選擇嗎？

技術上的徒勞：對于執意要獲取內容的人來說，任何前端層面的限制都是紙老虎。他們總能通過禁用 JS、查看源代碼、使用爬蟲，甚至直接截圖 OCR 來獲取內容。
用戶體驗的災難：強行改變用戶的操作習慣，尤其是禁用右鍵，是一種非常糟糕的設計。它破壞了 Web 的開放性和可訪問性，可能會讓你的網站流失大量用戶。

替代方案：

水印：對于圖片或重要文檔，添加可見或不可見的數字水印，是更好的版權追蹤方式。
內容分段加載/懶加載：增加爬蟲獲取完整內容的難度。

作為前端開發者，我們掌握了“禁止復制”的屠龍之術，但更應該思考何時以及是否應該拔出這把劍。在大多數情況下，選擇更開放、更友好的“修改剪貼板”方案，或者干脆相信用戶的善意，可能是更明智的選擇。

責任編輯：趙寧寧來源： JavaScript

前端開發 CSS