2012年6月19日

[教學]如何用語法保護網頁文章著作權__(1) 附加版權宣告

A+

(Pic from: 123rf.com)
過去對於如何保護網頁著作權曾寫過一系列的構思,其中「純文字」的網頁最難防盜,所以必須花費最多的心力設計保護機制。想要讓嫖竊者知難而退,就得花一定的時間安排這些機制。

過了一陣子在網路上看到「某種語法」,可以在訪客複製文章時,自動附加一些訊息進去。這個點子很不錯,跟「保護網頁著作權的初階構思__(一)文章篇」→「三、暗藏文字」的構想類似,但執行起來更方便省時。再加上因為友站的文章多屬純文章內容,因此決定構思這個議題,是否純文字網頁有"更方便"、"更省時間"的防盜方法?由此開始的一系列文章,就是從這個點子出發,變化出各種的防盜機制。


一、存取剪貼簿的可行性

在瀏覽器的平台開發程式,應該是最痛苦的的一個平台,因為各家瀏覽器支援的語法不盡相同;其實大部分的站長們應該也都很辛苦,裝在網站上的外掛、工具也得測試是否各大瀏覽器都能支援,否則只能照顧到特定族群的訪客。上面提的「附加版權語法」,其原理是更改剪貼簿裡面的內容,加入原文出處的網址、版權宣告等等內容。它使用了以下語法來改變剪貼簿內容:

clipboardData.setData("text",更改的內容)
事實上這個語法也就只有 IE 支援而已,而且為了網路安全性的因素,新版本的瀏覽器若不是禁止存取剪貼簿、就是預設關閉剪貼簿的存取,例如「這個網頁」 提到 Chrome 禁止存取剪貼簿,「這個網頁」 提到 IE 某些版本會詢問訪客是否允許我們的語法存取剪貼簿,還有 FireFox 必須打開允許剪貼簿存取的設定,語法才能生效。因此我的結論為,利用語法來改變剪貼簿的複製內容是不切實際的

剪貼簿能看到的一線生機是剛剛「那個網頁」 的方案三,提到利用 javascript 以及 flash 的漏洞來存取剪貼簿的內容。當然如果有仔細看完文章的話就會發現,該語法在 flash9 的版本有效,flash10 就失效;如果想在 flash10 生效,就得利用別的 javascript 工具。

我的想法是,如果等到 flash 新的版本又把漏洞補起來,豈不又要找新的 javascript 工具?所以長期來看,我摒棄了使用 flash 漏洞來存取剪貼簿的方案



二、從選取內容下手

直到看到「這篇文章」,整個構思才算是有了一絲曙光。這篇作者很有意思,他看到「Tynt」的產品能夠在複製的內容加上版權,因此大概自己研究了 Tynt 的 javascript,抽取出部分語法成功地在 IE 以外的瀏覽器,讓訪客複製內容時加上版權宣告。

其語法的原理為,訪客用滑鼠選取一段內容並複製後,用語法在背景新增一個區塊,位置放在螢幕看不到的地方,把訪客的複製內容丟進區塊、把版權宣告丟進區塊,最後把選取區改為新增的區塊,那麼複製到剪貼簿的內容,反而是新增區塊的內容。這個彎真是轉得太好了,完全繞過剪貼簿的存取,搶在進入剪貼簿之前,快一步更改了訪客複製的內容。

可惜的是作者也找不出在 IE 下能成功的語法,而且他的語法還有缺點沒解決。好的,接下來的內容便是想辦法把他的語法完善、並兼容於各大瀏覽器。


三、IE 能運作的語法

上面那一段的語法在 IE 無效的原因主要有兩個──

1. IE 以外瀏覽器,取得選取區內容的語法為──

window.getSelection()
而根據「這篇文章」,在 IE 下取得選取區內容的語法為──

document.selection.createRange()

2. 以下語法代表將目前選取區塊改為選取其他區塊──

selectAllChildren(其他區塊)
但 IE 沒有這個語法,還好找到了「微軟自己的網站」,IE 自行另外出版了一個語法來實現同樣的功能,這樣主要的問題就解決了──

moveToElementText(其他區塊)
從該網頁也可看到 IE9 的語法漸漸與各大瀏覽器接軌,但 IE9 以下的瀏覽器則原地踏步,但說實話 XP 的使用者有多少?所以 IE9 的使用者能有幾個?對於網頁開發還是輕鬆不起來。


四、封裝程式碼

現在可以把相容於各大瀏覽器的程式碼整合在一起,請到後台打開範本文件,找到 </body>,在它的後面一行加入以下程式碼:


如果想瞭解程式碼內容、做細部修改的話,請繼續往下看;對程式碼不熟的話,可跳過這一段,直接到下一段測試效果。以下的說明依照程式執行的順序──

AG:原版本的語法無法涵蓋各大瀏覽器,這裡做小小修正,改為監控 <body> 這個區塊,一有複製的動作,立即執行 Add_Copyright() 這個函數。因為一般文章都是放在 <body> 的區塊內,除非有特殊需求可自行更改此行,不然一般這樣寫就足夠了。

F:取得 <body> 這個標籤;AG 行有改為其他區塊的話,這裡也要改。

H:取得當前網頁的網址做成一個超連結,而藍字部分的版權宣告、包含 <br/> 的斷行語法,可自行修改。

I:動態創造一個新的區塊,取名為 newdiv。

J~K:把這個區塊的位置放在螢幕左邊很遠很遠、看不到的地方。

L:把這個區塊塞在 <body> 最後面。

N:如果不是 IE 瀏覽器的話──

O:取得目前選取區的文字內容

P:把選取區內容加上版權宣告

Q:把 P 行內容丟到 newdiv 這個區塊

R:改變當前選取區的內容為 newdiv 這個區塊的內容

S:5 毫秒之後執行 C~E 行的 del 函數,刪除 newdiv 這個區塊。

U:如果是 IE 瀏覽器的話──

V:取得視窗的捲軸位置

W~X:同 O 行作用

AA~AB:同 R 行作用

AD:恢復視窗位置。

測試時發現 IE 若按照原本的流程進行複製的動作,視窗位置會跑到最下方,也就是 <body> 最後面的 newdiv 區塊的位置,只好想辦法增加了 V 與 AD 這兩行把位置調回來。


五、複製效果測試

這個區塊可以測試複製效果
請隨意複製此區塊的任何文字
看看是否會出現 "本網頁的網址"
以及 WFU BLOG 的版權宣告

好了,現在可以測試以上區塊的複製效果,各大瀏覽器應該都是沒問題的(Chrome、FireFox、IE)。不過,有沒有覺得複製的內容哪裡怪怪的?

眼尖的話應該會發現,超連結的語法並沒有出現,只有出現網址而已。這也是前面曾提到的,該語法還有沒解決的缺點;斷行語法 <br/> 是會被執行的,但超連結語法沒有效果。

無論如何這個防盜機制的基本工具已經成形,由於本文的篇幅已經很長,這個缺點留待下一篇提供解決方案,接下來的後續文章,會從這個基本工具出發,從訪客複製的內容,變化出更好、合理、或客制化的防盜機制。


著作權保護系列文章:

7 則留言:

  1. 看起來還有許多問題待解決~
    謝謝你的用心呢^^
    Rainsakura(←一個讀書進度delay很久的傢伙)

    回覆刪除
  2. <7935347174487048331>(以上內容請勿刪除,從括號之後開始留言)其實主要問題都解決了,否則這一系列的文章就沒法生出來了...只是要反覆在各種瀏覽器測試 code 比較累,所以偷懶一下,今天先發個比較輕鬆的主題~~

    對啊,一陣子沒有看到讀書心得了,加油加油,在等著呢~~(其實舊的都還沒消化完,出一張嘴最輕鬆 ^ ^)

    回覆刪除
  3. 請教一下,如果按照上面的教學,在我的BLOG中有個問題
    1. 複製後的文字,背景會是黑底
    2. 我放在BLOG中的程式碼,不能複製。

    請問我是什麼地方要修改呢?
    http://abayartist.blogspot.tw/2016/09/blogspot_25.html

    回覆刪除
    回覆
    1. 請保留異常狀態,我才能看是什麼情形。

      刪除
    2. 好了,我改成異常狀態了。我的內嵌程式碼是這樣用的
      http://abayartist.blogspot.tw/2016/09/blogspot.html

      現在的問題:
      1. 複製文字,貼到WORD背景是黑的
      2. 複製程式碼,不會維持分段,會亂掉、有時會缺字。

      謝謝

      刪除
    3. "我放在BLOG中的程式碼,不能複製。" → 我測試沒有這樣的情形,也許跟用的瀏覽器版本、作業系統有關

      "複製文字,貼到WORD背景是黑的" → 當初程式設計沒有針對這點考慮,請複製到純文字編輯軟體就好

      "複製程式碼,不會維持分段,會亂掉、有時會缺字" → 當初程式設計沒有針對程式碼考慮,主要是針對文章內容。

      這系列文章有三篇,也許你可以試試另外兩篇是否有符合你的需求:

      http://www.wfublog.com/2012/06/protect-copyright-2.html

      http://www.wfublog.com/2012/07/protect-copyright-3.html.html

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。