網頁設計的許多演進,多半是為了使用者瀏覽環境、現代數位內容需求、軟體工程、專案管理而做的發展,但是有一些需求,從 N 年前到現在都沒有變,例如說…
「想要把產品資料公開放在網路上,但是又不要讓人拿走。」

整理一些常見/常用的網頁防止文字被複製的方法:

一、用 JS 讓使用者在網頁按右鍵的時候,不要顯示選單

(適用於桌上型電腦的現代瀏覽器)
<script>
document.oncontextmenu = new Function("return false");
oncontextmenu="return false;";
</script>


<script>$(document).bind("contextmenu", function(e){if(""!="write"){return false;}});</script>

二、用 CSS 讓使用者長押觸控螢幕時,不要跑出儲存影像的選單,無法選取文字

(適用於近代的 iOS、Android 裝置)
<style>
body{-webkit-user-select:none;-webkit-touch-callout:none;-moz-user-select: none;}
</style>

三、用 JS 讓使用者複製網頁資料後,貼上時只會得到空白

(行動裝置與桌上型電腦皆可用)
<script>
document.body.oncopy = function(){event.returnValue=false;}
</script>

四、讓使用者在按下電腦鍵盤的 PrintScreen 的時候,無法達成目的。

(適用於桌上型電腦的現代瀏覽器)

See the Pen Stop User from using “Print Scrn” / “Printscreen” key of the Keyboard for any Web Page by jimmy su (@mimi12345tw) on CodePen.

程式碼修改自 stackoverflow 的 Stop User from using “Print Scrn” / “Printscreen” key of the Keyboard for any Web Page,網頁上需要有 jQuery。
用 windows 預設的 PrintScreen,剪貼簿會只有一串字。
對一些第三方螢幕擷取工具,如 PicPick ,則會存到一張白畫面的圖片。

故事就這樣結束了嗎? 還沒有,新的需求又來了
「最近有媒體採訪,可以幫我另外做一頁,但是不要有鎖右鍵的嗎?」
「我要給經銷商資料,可以幫忙把網頁上的資料複製下來整理給我嗎?」

破解篇

雖然一般這種鎖右鍵什麼的,大概連小學生都會破解,但是有商業需求就得有解決方案。聽到需求就說不的工程人員,會被當成不專業,所以就有上述這些廉價的文字資料防盜解決方案。

一般做這種功能,都會打預防針說是防君子不防小人,下面來介紹一些簡單方法,可以破解一般網路上常見,文字資料無法複製下來的網頁,解法都只要動動滑鼠就好:

蒙面魔術師

方法一的破解法: 改寫 JS,把下面這段貼到瀏覽器的開發者工具的 console 裡面執行,右鍵選單就又會出現了。
javascript:(function() { function R(a){ona ="on"+a; if(window.addEventListener) window.addEventListener(a, function (e) { for(var n=e.originalTarget; n; n=n.parentNode) n[ona]=null; }, true); window[ona]=null; document[ona]=null; document.onkeydown=null; if(document.body) document.body[ona]=null; document.body.oncopy=null; } R("contextmenu"); R("click"); R("mousedown"); R("mouseup"); R("selectstart");})()
這段 code 這麼長當然不可能自己打,可以直接到《重灌狂人》的教學文章,把這段程式碼加到瀏覽器書籤,每次要用的時候點一下瀏覽器書籤列的神奇程式碼。

方法二的破解法: 打開瀏覽器的開發者工具,把那段 CSS 刪掉就好了。手機可能比較不方便,這種事用電腦比較快。

關閉瀏覽器的JS功能

方法三的破解法: 如果網頁不是 SPA 或是資料不是用 AJAX 拉來的,最簡單的就是把此網站的 JavaScript 停用,輕鬆又方便。

方法四的破解法:
– 用第三方螢幕擷取工具,把電腦的其他按鈕設為截圖鍵。
– 改用行動裝置或平板截圖。
– 用電腦版 Firefox 或 Chrome 瀏覽器的截圖擴充套件。

結論

所以說,幫網頁加鎖右鍵的效益其實是非常低的,有心人士還是照樣抓資料,而資料的主人自己要使用網頁資料時,卻處處受限。

看過一些真實案例,我覺得理想的避免網頁文字資料被複製,應該是這樣玩的:
1.[名字很炫的]自動檢索系統,或純人力團隊,每天會持續檢索文案、圖片、影片、聲音資料是否出現在未授權的網站上。
2.法律顧問服務,幫線上資料撰寫適合的授權條款、還有教學用途、商業用途等等的使用細則,並協助打侵權官司,
3.直接在網站上放先前告過人的相關內容,讓使用者知道亂用這網站的東西會被告。
4.找人力資源公司,派人到競爭對手的公司臥底,看看競爭對手是否有在一些不公開的 FB 社團、Line 群組、限當場閱覽的型錄等等,使用未經授權的資料。

啊,實在太麻煩了,還是加個鎖右鍵就好了。