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