2012年6月1日 星期五

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

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

Wayne Fu 0 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/> 是會被執行的,但超連結語法沒有效果。

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


著作權保護系列文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP