功能實(shí)現(xiàn)-解除頁(yè)面禁止復(fù)制功能
解除頁(yè)面禁止復(fù)制功能
起源：今天照例進(jìn)行日逞傲螅總結(jié)，在查找資料進(jìn)行ctrl+c加ctrl+v時(shí)顽染，發(fā)現(xiàn)知乎的頁(yè)面竟然禁止轉(zhuǎn)載了，也就是對(duì)復(fù)制做了攔截轰绵， 需要登錄才可以復(fù)制家乘，然而我們公司因?yàn)榘踩脑颍跻约昂芏嗑W(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ù)制死相。
目前一般選擇其中一種，比如簡(jiǎn)書算撮、掘金、知乎等資訊問答類陷舅，也有混合使用的审洞，比如起點(diǎn)網(wǎng)這類閱讀為主的。
破解禁止復(fù)制功能的方法
- 禁止當(dāng)前頁(yè)面的javascript缩赛，畢竟我們對(duì)復(fù)制攔截就是通過js實(shí)現(xiàn)的撰糠。
- 刪除或者覆蓋oncopy和onselect屬性事件。
- 有些網(wǎng)站直接讓你無法選中旨袒，給文本增加了css樣式
user-select:none术辐。 - 非開發(fā)實(shí)現(xiàn)：將文章轉(zhuǎn)發(fā)到手機(jī)，使用手機(jī)的長(zhǎng)按選擇復(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ù)長(zhǎng)度超過20個(gè)授帕，則加入授權(quán)信息
copyText = `${copyText}
作者：111,
連接：zhihui.com/article/123
來源：知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)彤路，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處芥映。
`
}
// 兼容一下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)載代碼-簡(jiǎ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也可用于家長(zhǎng)作業(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)致訪問頁(yè)面會(huì)比較卡頓塘装，由于瀏覽器插件會(huì)一直開啟蹦肴，除非手動(dòng)關(guān)閉，那么就存在性能消耗阴幌，如果 插件升級(jí)了此項(xiàng)功能，就會(huì)導(dǎo)致瀏覽器性能降低渊抽，長(zhǎng)期使用或者當(dāng)用戶大量打開瀏覽器的情況下，卡頓就會(huì)明顯十减，從而影響用戶體驗(yàn)愤估， 至于用戶到底怎么選擇，還是取決于用戶自己由驹。
希望發(fā)了這篇文章后昔园，不想登陸來偷懶的人不要打我，嘿嘿嘿润樱。
后續(xù)
后來想了下羡棵，如果防復(fù)制技術(shù)升級(jí)嗅钻，那么就開發(fā)一款更加專精的插件养篓，不對(duì)頁(yè)面一開始就清除（目前我所已知的插件是打開頁(yè)面時(shí)就 將所有元素進(jìn)行防復(fù)制無效化一遍），增加一個(gè)選擇功能舶胀，用戶可選擇想要的區(qū)域進(jìn)行防復(fù)制無效化破解碧注，但是這樣插件開發(fā)起來就 比較繁瑣了。
當(dāng)然轩端，這個(gè)是無法阻止爬蟲的逝变。后續(xù)再出一篇關(guān)于前端實(shí)現(xiàn)爬蟲的原理以及實(shí)現(xiàn)奋构。
