(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/> 是會被執行的，但超連結語法沒有效果。
無論如何這個防盜機制的基本工具已經成形，由於本文的篇幅已經很長，這個缺點留待下一篇提供解決方案，接下來的後續文章，會從這個基本工具出發，從訪客複製的內容，變化出更好、合理、或客制化的防盜機制。
著作權保護系列文章：
看起來還有許多問題待解決~
回覆刪除謝謝你的用心呢^^
Rainsakura(←一個讀書進度delay很久的傢伙)
請教一下，如果按照上面的教學，在我的BLOG中有個問題
回覆刪除1. 複製後的文字，背景會是黑底
2. 我放在BLOG中的程式碼，不能複製。
請問我是什麼地方要修改呢？
http://abayartist.blogspot.tw/2016/09/blogspot_25.html
好了，我改成異常狀態了。我的內嵌程式碼是這樣用的
刪除http://abayartist.blogspot.tw/2016/09/blogspot.html
現在的問題：
1. 複製文字，貼到WORD背景是黑的
2. 複製程式碼，不會維持分段，會亂掉、有時會缺字。
謝謝
好了，改入CSS碼了
刪除