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

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

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

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

目前就兩大類

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

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

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

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

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

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

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

以及document.getSelection()，這個方法是用來操作選中的內(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)容，但會在復(fù)制的內(nèi)容后面加版權(quán)以及來源信息，這個就需要用到剪切板這個對象了，即：clipboa rdData。它常用的方法有3個，setData('text', 插入的內(nèi)容)插入數(shù)據(jù)，getData()獲取剪切板的數(shù)據(jù)，clearData('text') 清除數(shù)據(jù)。

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

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

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

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

一般實現(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個，則加入授權(quán)信息
        copyText = `${copyText
    }
    // 兼容一下ie瀏覽器，ie中是window，其他瀏覽器是event
    let clipboardData = event.clipboardData || window.clipboardData;
    clipboardData.setData('text', copyText);

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

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

具體實現(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)容的純文本形式，這個方式只能復(fù)制純文本。

window.getSelection(0).toString();

如下：

禁用js，適用所有人

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

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

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

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

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

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

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

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

后續(xù)

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

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

參考資料

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

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

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

最新評論