解除頁面禁止復(fù)制功能

起源：今天照例進(jìn)行日?？偨Y(jié)，在查找資料進(jìn)行ctrl+c加ctrl+v時(shí)，發(fā)現(xiàn)知乎的頁面竟然禁止轉(zhuǎn)載了，也就是對(duì)復(fù)制做了攔截， 需要登錄才可以復(fù)制，然而我們公司因?yàn)榘踩脑?，知乎以及很多網(wǎng)站是無法登陸，那咋辦？都是前端開發(fā)，同行就別這樣啦。

后續(xù)發(fā)現(xiàn)知乎不是所有內(nèi)容都是禁止轉(zhuǎn)載的，只有設(shè)置了禁止轉(zhuǎn)載的內(nèi)容才禁止復(fù)制，普通內(nèi)容在復(fù)制后會(huì)加上版權(quán)以及來源

前端實(shí)現(xiàn)禁止復(fù)制功能的方法

目前就兩大類

• 通過js阻止復(fù)制功能實(shí)現(xiàn)禁止復(fù)制。
• 通過css樣式user-select:none阻止選中實(shí)現(xiàn)禁止復(fù)制。

目前一般選擇其中一種，比如簡書、掘金、知乎等資訊問答類，也有混合使用的，比如起點(diǎn)網(wǎng)這類閱讀為主的。

破解禁止復(fù)制功能的方法

• 禁止當(dāng)前頁面的javascript，畢竟我們對(duì)復(fù)制攔截就是通過js實(shí)現(xiàn)的。
• 刪除或者覆蓋oncopy和onselect屬性事件。
• 有些網(wǎng)站直接讓你無法選中，給文本增加了css樣式user-select:none。
• 非開發(fā)實(shí)現(xiàn)：將文章轉(zhuǎn)發(fā)到手機(jī)，使用手機(jī)的長按選擇復(fù)制文本
• 仍舊是非開發(fā)實(shí)現(xiàn)：截圖，哈哈哈，皮一下就很開心。
• 最牛皮的方法：手敲，解決一切妖魔鬼怪。

js實(shí)現(xiàn)防復(fù)制功能

js實(shí)現(xiàn)防復(fù)制一般就是使用copy這個(gè)api:

document.body.oncopy = function(e) {
    // 全局監(jiān)聽
};
$('#articl_content').oncopy = function(e) {
    // 局部監(jiān)聽
};
window.addEventListener('copy', e => {
    // 全局監(jiān)聽
})

以及document.getSelection()，這個(gè)方法是用來操作選中的內(nèi)容的api，其中：document.getSelection(0).toString()可以 獲得選中內(nèi)容的文字部分，document.getSelection(0).empty()可以取消選中，在getSelection()中傳參可以獲取不同的選中 內(nèi)容段，更多有趣的方法在它原型里。

另外順便提一下和復(fù)制相關(guān)的還有剪切-cut，粘貼-paste，用法和copy一致。

一些網(wǎng)站雖然不禁止用戶復(fù)制內(nèi)容，但會(huì)在復(fù)制的內(nèi)容后面加版權(quán)以及來源信息，這個(gè)就需要用到剪切板這個(gè)對(duì)象了，即：clipboa rdData。它常用的方法有3個(gè)，setData('text', 插入的內(nèi)容)插入數(shù)據(jù)，getData()獲取剪切板的數(shù)據(jù)，clearData('text') 清除數(shù)據(jù)。

知乎的轉(zhuǎn)載加版權(quán)實(shí)現(xiàn)

一般常用的js復(fù)制功能有2種，一種是document.execCommand('copy')，一般在富文本編輯器框架中經(jīng)常使用到，目前雖然在js 手冊(cè)中顯示已廢棄，但大部分瀏覽器還是支持該功能的。

另外一種就是oncopy監(jiān)聽，復(fù)制的數(shù)據(jù)通過window.getSelection這個(gè)api獲取，如果需要加版權(quán)信息，在數(shù)據(jù)放入剪切板前處理下 ，加上版權(quán)信息接口，知乎就是用的這種，大部分網(wǎng)站都是這樣的。

一般網(wǎng)站都是在部分元素上做監(jiān)聽的，不會(huì)進(jìn)行全局監(jiān)聽，document.body.oncopy實(shí)現(xiàn)的是全局監(jiān)聽， document.getElementById（ 'xx').oncopy實(shí)現(xiàn)的某個(gè)元素內(nèi)監(jiān)聽。

一般實(shí)現(xiàn)：

document.body.oncopy = (event) => {
    // 是否登錄，沒登陸就禁止轉(zhuǎn)載
    if (!isLogin()) return alert('禁止轉(zhuǎn)載'); 
    event.preventDefault(); // 取消瀏覽器原本默認(rèn)的copy事件
    let authorizationInfo, // 授權(quán)信息
        copyText = window.getSelection(0).toString(); // 獲取被復(fù)制的文本內(nèi)容，沒有dom結(jié)構(gòu)
    if (copyText.length > 20) {
        // 一般少量復(fù)制網(wǎng)站是允許的，字?jǐn)?shù)長度超過20個(gè)，則加入授權(quán)信息
        copyText = `${copyText
    }
    // 兼容一下ie瀏覽器，ie中是window，其他瀏覽器是event
    let clipboardData = event.clipboardData || window.clipboardData;
    clipboardData.setData('text', copyText);

起點(diǎn)網(wǎng)防復(fù)制功能實(shí)現(xiàn)

• 禁止復(fù)制+剪切
• 禁止右鍵，右鍵某些選項(xiàng)：復(fù)制粘貼剪切
• 禁用文字選擇：user-select:none

具體實(shí)現(xiàn):

// 禁止右鍵
document.body.oncontextmenu = e => {
    return false; 
    // e.preventDefault();
};
// 禁止文字選擇 
document.body.onselectstart = e => {
    return false; 
    // e.preventDefault();
};
// 禁止復(fù)制 
document.body.oncopy = e => {
    return false; 
    // e.preventDefault();
}
// css禁止用戶選擇
.content{
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}

破解轉(zhuǎn)載代碼-簡單版（適用開發(fā)者）

打開瀏覽器，按下f12，最上面一排找到console,復(fù)制下面代碼，然后選擇你要復(fù)制的文本內(nèi)容，將下面代碼粘貼到console中并回車， 即可看到你選中的內(nèi)容的純文本形式，這個(gè)方式只能復(fù)制純文本。

window.getSelection(0).toString();

如下：

禁用js，適用所有人

Chrome瀏覽器的話：打開瀏覽器控制臺(tái)，按F1進(jìn)入Setting，勾選Disable JavaScript(禁止js)，放圖：

通過OCR技術(shù)，將圖片轉(zhuǎn)文字，適用有該類軟件的人

ocr也可用于家長作業(yè)或者圖文內(nèi)容識(shí)別等。

另外一般也可直接安裝瀏覽器插件。

這個(gè)不多說，不懂的人多的話我后續(xù)再補(bǔ)充。如果留言的人多的話，一個(gè)沒有插件的瀏覽器是缺少有趣的靈魂的插件。

防復(fù)制技術(shù)升級(jí)

雖然是升級(jí)，但說到底也就是稍微惡心下人，經(jīng)過測(cè)試發(fā)現(xiàn)，防復(fù)制網(wǎng)站一般是文章，文章一般是多段內(nèi)容，那么在每一個(gè)內(nèi)容元素 上加內(nèi)聯(lián)樣式：user-select: none !important，那么想要手工復(fù)制的人就需要將每一個(gè)內(nèi)容的內(nèi)聯(lián)樣式都刪除或去掉，因?yàn)槭?用內(nèi)聯(lián)樣式寫的，所以無法通過通用樣式進(jìn)行覆蓋，手工操作起來比較繁瑣，而且目前常用的瀏覽器腳本還未對(duì)于此項(xiàng)防復(fù)制技術(shù)升級(jí)。不過解禁復(fù)制也就是遍歷下元素進(jìn)行樣式刪除更改， 但是由于元素量比較大，就會(huì)導(dǎo)致訪問頁面會(huì)比較卡頓，由于瀏覽器插件會(huì)一直開啟，除非手動(dòng)關(guān)閉，那么就存在性能消耗，如果 插件升級(jí)了此項(xiàng)功能，就會(huì)導(dǎo)致瀏覽器性能降低，長期使用或者當(dāng)用戶大量打開瀏覽器的情況下，卡頓就會(huì)明顯，從而影響用戶體驗(yàn)， 至于用戶到底怎么選擇，還是取決于用戶自己。

希望發(fā)了這篇文章后，不想登陸來偷懶的人不要打我，嘿嘿嘿。

后續(xù)

后來想了下，如果防復(fù)制技術(shù)升級(jí)，那么就開發(fā)一款更加專精的插件，不對(duì)頁面一開始就清除（目前我所已知的插件是打開頁面時(shí)就 將所有元素進(jìn)行防復(fù)制無效化一遍），增加一個(gè)選擇功能，用戶可選擇想要的區(qū)域進(jìn)行防復(fù)制無效化破解，但是這樣插件開發(fā)起來就 比較繁瑣了。

當(dāng)然，這個(gè)是無法阻止爬蟲的。后續(xù)再出一篇關(guān)于前端實(shí)現(xiàn)爬蟲的原理以及實(shí)現(xiàn)。

參考資料

http://m.fzitv.net/article/166407.htm

http://m.fzitv.net/article/110076.htm

以上就是JS前端實(shí)現(xiàn)解除頁面禁止復(fù)制功能方法詳解的詳細(xì)內(nèi)容，更多關(guān)于JS解除頁面禁止復(fù)制的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論