怕訪客複製你的文章嗎? 讓 JS 自動加上提醒文字或禁用複製!

在許多內容網站,都會有所謂的「複製時自動加上原文網址」機制,例如魔境歌詞網、知乎等等,更有的網站直接禁止使用者複製文字,要達到這些功能不困難,只需要幾行簡單的 JavaScript 語法,但需要思考網站是否真的需要加入這樣的功能,當正常訪客複製並轉貼文字到 Facebook,對網站真的造成損害了嗎? 此外如果真的要防止訪客複製文字,光憑著這些防君子不防小人的手法,到底是保護了利益還是讓網站變得更難使用?

「禁用複製」我認為大可不必,會複製網站內容的人分成兩種,一種是惡意盜文章,另一種則是正常訪客,複製文字可能是為了分享;針對惡意盜文章的人,現有技術其實都無法有效防範,除非你將文字全部以圖片的方式呈現,但這卻會讓網站 SEO 降到谷底,且對行動裝置瀏覽「極度不友善」;但如果是正常訪客複製文字做分享之用,並不會讓網站流量減少,反而對流量提升有助益,這時應該多加鼓勵才是,但禁用複製的作法卻會讓使用者十分不便。

有的網站則選擇在複製的文字最下面加上「版權所有,翻印必究」,這種作法沒有「禁用複製」那麼強烈,但也需要思考是否有必要加入,現在這個時代,不能再抱著過去的保護思維,而是要反其道思考如何讓更多人獲得資訊,透過分享壯大自己。

我想最重要的,是思考你架設網站的目的,再判斷需不需要使用「禁用複製」功能,也別忘記技術再怎麼厲害,都只是防君子不防小人,最怕的就是沒有擋到惡意訪客,卻讓善意訪客覺得網站難以使用,試著跳脫技術,思考從法律面處理,或是商業面的防火牆建立。

這邊推薦知乎的做法,當訪客複製文字時,會在最上方加入:

作者:侯翔宇
链接:https://www.zhihu.com/question/40502548/answer/86972830
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

但並不是複製任何文字都會,只有在複製超過一定字數時才會出現,當使用者複製短短一行到其個人網誌時,版權文字令人反感,但如果複製一大段並分享到 Facebook、Blog 時,以我個人來說看到這段不具攻擊意味的提醒文字,反而會欣然接受,將它留在文章的最下面或是乾脆放著,即使使用者分享到社群網站,依舊可以將流量帶回到知乎。

幾個要點:

  • 思考是否有需要禁止複製或是加上版權文字。
  • 複製的字數較多時才會出現版權文字。
  • 自動添加的文字一定要有文章網址。
  • 不具攻擊意味的提醒訊息。

那就技術面,該如何禁止複製或是添加提示訊息呢?可以從 oncopy 事件下手,這個事件在大部分瀏覽器支援度都很完善,我用最新的 Firefox、Chrome、Safari 測試都可以正常運作。

禁止複製

雖然我不鼓勵,但還是先來看看如何禁止複製吧,這裡採用的是阻斷 oncopy 事件的做法,而不是禁止右鍵的蠢方法,禁止右鍵對於訪客真的是很造成困擾的一種機制。

document.body.oncopy = function(e) {
  return false;
}

這和 jQuery 的 preventDefault() 是同件事情。

添加提示文字

添加提示文字同樣是在 oncopy 事件動手腳,在事件 e 參數裡有個 e.clipboardData.setData() 可以讓你修改複製的文字,只要將使用者複製的文字加上提示文字即可;問題是瀏覽器因為安全因素,不允許你取得剪貼簿的內容,所以需要搭配 window.getSelection() 來取得使用者複製的內容(也就是選擇的文字)。

document.body.oncopy = function(e) {
  var notice_text = "\n部落格:https://coder.tw \n 謝謝分享";
  var origin_text = window.getSelection();

  e.clipboardData.setData("text/plain", origin_text + notice_text);
 
  return false;
}

最後一樣用 preventDefault,因為 oncopy 事件是在 copy 之前觸發的,如果沒有 preventDefault,即使設定了剪貼簿的內容,還是會被原本的文字覆蓋。

clipboardData.setData 的第一個參數是設定格式。

window.getSelection() 本身回傳的是 Selection 物件而非 String ,畢竟訪客可能會複製到圖片、有格式的文字等等,如果要計算複製的長度,可以用 toString 轉成字串後再計算,例如:

window.getSelection().toString().length

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料