解除頁面禁止復制功能

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

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

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

目前就兩大類

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

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

破解禁止復制功能的方法

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

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

js實現(xiàn)防復制一般就是使用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)容段，更多有趣的方法在它原型里。

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

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

知乎的轉載加版權實現(xiàn)

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

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

一般網(wǎng)站都是在部分元素上做監(jiā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) => {
    // 是否登錄，沒登陸就禁止轉載
    if (!isLogin()) return alert('禁止轉載'); 
    event.preventDefault(); // 取消瀏覽器原本默認的copy事件
    let authorizationInfo, // 授權信息
        copyText = window.getSelection(0).toString(); // 獲取被復制的文本內(nèi)容，沒有dom結構
    if (copyText.length > 20) {
        // 一般少量復制網(wǎng)站是允許的，字數(shù)長度超過20個，則加入授權信息
        copyText = `${copyText
    }
    // 兼容一下ie瀏覽器，ie中是window，其他瀏覽器是event
    let clipboardData = event.clipboardData || window.clipboardData;
    clipboardData.setData('text', copyText);

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

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

具體實現(xiàn):

// 禁止右鍵
document.body.oncontextmenu = e => {
    return false; 
    // e.preventDefault();
};
// 禁止文字選擇 
document.body.onselectstart = e => {
    return false; 
    // e.preventDefault();
};
// 禁止復制 
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;
}

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

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

window.getSelection(0).toString();

如下：

禁用js，適用所有人

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

通過OCR技術，將圖片轉文字，適用有該類軟件的人

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

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

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

防復制技術升級

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

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

后續(xù)

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

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

參考資料

http://www.dbjr.com.cn/article/166407.htm

http://www.dbjr.com.cn/article/110076.htm

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

最新評論