[教學]防止網站被 7headlines 盜文(用 IFRAME 內嵌框架)

之前 +Pan Kuan 曾在這個「Blogger中文社群討論串」談到這件事，雖然 WFU 曾經提出因應被 IFRAME 框架的語法，但可惜沒有測試的環境來驗證效果。直到最近無意間發現，本站的文章也受到 7headlines 的青睞，而雖然成了受害者，但有了機會可以測試破解 IFRAME 框架的語法，不啻為一個宣導「反框架惡行」的好機會。

以下先說明被框架的影響，接著大致敘述 Blogger 破解框架的原理；想直接安裝語法請跳「三、安裝破解框架程式碼」；以下是我某個被 7headlines 框架的網頁，可點擊這個網頁，看本文反框架語法的效果：

點此看範例網頁

一、網站被框架的影響

1. 著作權被消費？

其實這個主題，重灌狂人 +Briian Tsai 已經寫過，還滿詳細的，所以請直接參考這篇「如何避免你的網站被「蓋台」？（破解被Frame內嵌的網站）」 即可。

就我個人而言，網頁被 7headlines 綁架的感想是，就像是林書豪、黃色小鴨造成旋風後，大街小巷到處都是相關的週邊產品，產品上都有林書豪或小鴨的圖案，但這些產品都有取得正式授權嗎？林書豪或小鴨作者有被知會嗎？




就像上圖，我們的網頁被綁架後，拿著我們的原創內容當賣點，擺上自家 7headlines 的廣告、宣傳資訊等等，廣告點擊是他們賺，而我們根本完全不會被知會，也很難知情，我想沒有人喜歡被這般拿來消費吧？


2. Google Adsense 的影響？

網頁被框架後，如果這種情況下的 Adsense 廣告被點擊時，由於網址並非我們的網域，而是 7headlines，不曉得 Adsense 的判斷機制為何？是否會損及我們的權益？

我在 Adsense 社群詢問了這樣的問題，由於幾天來還未得到官方的答覆，如果有新的訊息，會再更新內容。


2013.12.18 補充

與官方問答內容如下：



官方提到的連結：https://support.google.com/adsense/answer/65062?hl=zh-Hant

其實我不確定官方知不知道我在問什麼, 因為我 google 不到「網頁被 Iframe 的情況下, Adsense 會怎麼判定」相關的資訊。而既然官方表示 "很多人都問過這個問題"，我也不好意思多說什麼，只好當作「網頁被 Iframe 時，也屬於 "廣告程式碼被人盜用" 的一種」，上面的連結就交給讀者來研究了。


2014.8.18 補充

根據 +企業號 Enterpr1se 這篇「Adsense 小貼士」→「Tips 5」，以下摘要相關內容：

根據 Adsense 規定網頁不可以用 iFrame 技術放廣告 (違者即封，這個捉得非常嚴格)，不過現在有不少網站用 iFrame 技術將你整個網頁放在旗下網站，如 7headlines...Adsense 程式會發現這是非本站的廣告 (link 由本站發出 request 但廣告卻在另一個網站看)；雖然 Adsense 聲稱這樣不會算違規，它只是不會收取廣告商廣告費，當然你也沒有廣告費收。

以上資訊供讀者參考。另外，這篇文章其他的 Adsense Tips 也非常值得參考。

二、Blogger 破解框架的原理

如果是一般的部落格，也許只要照 Briian 提供的程式碼就能解決問題，如下：

if (top.location != location) top.location.href = location.href;

不過 Briian 自己也提了，在 WP 後台編輯文章時(他的部落格是WP)，會有一些問題，因此破解框架的語法，需要有更周全的設計，請看以下分析：

1. Blogger 後台範本的畫面、「範本設計工具」的畫面、文章預覽的畫面，其實都使用了 IFRAME 框架，才能預覽網站效果。因此如果用了上面的語法，那我們不但趕走了 7headlines，自己連 Blogger 以上所提相關畫面也都進不去了，這是非常嚴重的事情。

2. 因此必須使用 js 來判斷框架的網址，當偵測到 blogger 的網址時就不破解框架，其他的網址就破解框架。

3. 但是 js 有跨域的安全性問題，意思就是說當我們網站網址為 ???.blogspot.com，而框架的網址為 blogger.com 時，js 無法讀取 blogger.com 的網址字串。這也代表很難去分辨框架的網址到底是 blogger.com 還是 7headlines。

4. 為了這一點奮戰不少時間，最後找到的解決方法為 document.referrer，從這裡可以判斷出是 blogger.com 還是 7headlines，從而解決了最大的難題。

三、安裝破解框架程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

以 Blogger 為例，請到後台「範本」→「編輯 HTML」→ 搜尋 </head> 字串，找到後在其前一行，插入以下程式碼：

<!-- 防網頁框架 start -->
<script>
//<![CDATA[
if (top.location != location && document.referrer.search("blogger.com") < 0 && document.referrer.search("blogspot.com") < 0) {
top.location.href = location.href;
}
//]]>
</script>
<!-- 防網頁框架 end -->

以上程式碼代表的含意為，「除了 blogger.com 及 blogspot.com 這兩個網域，只要網址被 IFRAME 框架，一律強制轉回原網址」。請根據以下三種情境，來調整程式碼：


1. 禁止所有框架網址(非 Blogger、WP 的部落格)

如果不是 Blogger、WP 這類平台，後台編輯畫面不會使用框架的話，那麼可以刪除所有有顏色的字串，代表「只要任何被框架的情況，一律轉址回原網址」。非 Blogger、WP 的部落格，通常程式碼放在可以執行 js 的地方即可。


2. 允許特定框架網址(Blogger、WP 平台)

A. Blogger 平台：

後台範本的網址類似這樣「http://www.blogger.com/blogger.g?blogID=????」，由於 Blogger 後台會使用框架來預覽網站畫面，因此我們網站必須允許讓 "www.blogger.com" 這個網域框架。

另外也許是「Blogger 無預警轉換區域網址」的影響，後台文章預覽畫面的網域為 ???.blogspot.com，與目前台灣會顯示的區域網址 ???.blogspot.tw 不同，會視為不同網域，因此額外也需要允許讓 "blogspot.com" 這個網域框架。

在 Blogger 平台，程式碼當中必須包含所有有顏色的程式碼。

B. Blogger 平台使用自訂網域：

如果 Blogger 使用自訂網域的話，那麼紅字 "blogspot.com" 請自行置換為自己的網域。

2014.1.2 補充

感謝 +陳俊尾 於留言 #8、#9 的回報，自訂網域的語法總共必須排除三個網域："blogger.com"、"blogspot.com"、"自訂網域字串"。

因此主程式的部分語法請改為以下：

if (top.location != location && document.referrer.search("blogger.com") < 0 && document.referrer.search("blogspot.com") < 0 && document.referrer.search("自訂網域字串") < 0) {
top.location.href = location.href;
}

C. WP 平台：

如果是 WP，只需允許一個網域框架的話，請將紅字 "blogger.com" 置換為允許的網域，然後將後面的綠色、紅色組合字串刪除。


3. 允許多個框架網址

如果允許多個網域對我們網站框架，請依照「藍色、紅色組合字串」的規律，來增加或修改允許的網域字串即可，例如以下：

if (top.location != location && document.referrer.search("blogger.com") < 0 && document.referrer.search("wordpress.com") < 0 && document.referrer.search("example.com") < 0)

四、如何知道網站是否被 7headlines 框架？

拜 Google 大神的強力搜索功能，讓這件事異常簡單，以 WFU BLOG 為例，想知道我的哪些文章被 7headlines 框架，只要在 Google 搜尋引擎輸入以下字串即可：

wfu blog site:www.7headlines.com

以上 "wfu blog" 字串請換成自己的網站名稱即可，現在就動手查查看網站是否被 7headlines 佔了便宜吧！我的搜尋結果類似下圖：

五、使用 IFRAME 框架在法律上的責任

感謝 +Ben Yu 提供的訊息，根據這篇「使用網頁框架iframe方法內嵌其他網站的的網頁，這算侵犯嗎??」，律師的回答如下：

就技術面而言，若可讓使用者知道是屬於其他人的網頁，則屬於網路超連結應用的一環，不涉及對他人著作的重製或公開傳輸，所以，解釋上不會構成侵害他人的著作財產權。不過，若是屬於競爭對手網頁的利用，則可能屬於不公平競爭行為，而有違反公平交易法的問題。

從以上解釋，看來少數情況才會違反公平交易法，不過 WFU 仍不清楚什麼情況下可對 7headlines 這種框架行徑提告。

而若認為 7headlines 侵權時，可先參考這篇「保存部落格盜文、盜圖證據的工具__archive.is 應用」保存證據，再進行法律程序。

六、小結

WFU BLOG 只是個小小網站，對於這樣的事情，影響力不足時就算想抗議，也很難起什麼帶頭作用。相信被 7headlines 框架的大網站更多，如果有大型部落格來帶頭評判這樣的事，絕對可以消彌這種利用 IFRAME 框架得利的手段。

如果你的網站也是受害者，在這一類的框架網站停止這種行為之前，歡迎你在自己的部落格寫文章揭露這樣的事情，本文的程式碼請隨意取用、隨意引用，讓更多網站知道本文的程式碼，讓框架網站失去作用，這是我們小網站能夠自保、及為網路盡一份力量的方法！

七、重要 FAQ

2014.4.14 補充

Q1: 程式碼會讓 Google 翻譯失效。

Ans: +張香腸 於「如何解決網站被7headlines的iframe蓋台」提到，他人使用 "Google 翻譯" 來翻譯我們網站時，必須 iframe 我們的網站才能進行翻譯；而使用了反框架語法後，會讓 google 翻譯失效。

如果想防止這種狀況時，那麼可以允許 "google.com" 這個網域對我們網站框架，那麼 google 翻譯即可正常顯示。例如，「三、安裝破解框架程式碼」→「3. 允許多個框架網址」這部份的程式碼，將 "wordpress.com" 或是 "example.com" 改成 "google.com" 即可。


Q2: 痞客邦要如何安裝程式碼？

Ans: 可在「公告區塊」、或是側邊欄「新增版位」，填入以下程式碼即可：

<script>
if (top.location != location && document.referrer.search("pixnet.net") < 0) {
top.location.href = location.href;
}
</script>
由於 WFU 不熟悉痞客邦的環境，如果執行上有問題、還有需要排除的網域，麻煩請再回報了！

防止盜文相關文章：