2013年12月16日

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

A+
之前 +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.comblogspot.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 不熟悉痞客邦的環境,如果執行上有問題、還有需要排除的網域,麻煩請再回報了!


防止盜文相關文章:

28 則留言:

  1. 謝謝告知與分享~沒看您的發布還真不知道自己好幾篇都都被綁架了(怒)
    我成功轉回原址了~非常感激(叩首)

    回覆刪除
  2. 先前在搜尋裡有看到, 還以為是您在Pixnet有設兄弟站被推上首頁頭條. 當時不以為意; 竟然是被私自挪用?! 如果因此廣告聯播被停權呢?

    回覆刪除
  3. 很好奇他到底是用什麼方法綁架的
    話說之前一直有在follow某個個人網站
    但是那個網站被7headline給綁了
    被綁就算了,還一直顯示空白網頁
    害我以為那網站倒了
    現在也想不起來了,可惜

    回覆刪除
  4. <8370032938192142259>(以上內容請勿刪除,從括號之後開始留言)不客氣~請盡量讓更多人知道這件事!

    回覆刪除
  5. <8845842190571021356>(以上內容請勿刪除,從括號之後開始留言)Google Adsense 會有什麼影響真的不知道,因為官方還未回覆;不過至少現在使用這個語法後,不必再擔心被框架了。總之我覺得所有 Blogger 都應該安裝本文的語法,預防萬一!

    回覆刪除
  6. <7578637461723055196>(以上內容請勿刪除,從括號之後開始留言)就是標題所寫的 IFRAME 啊,使用很簡單的,你在自己網頁開一個 IFRAME 語法,網址填別人的網站,就可以整個框架別人的網站了!

    當然沒事不能這麼做,才不會引起糾紛~至於你 follow 的網頁出現空白,我猜是他有一些語法防框架所造成的效果吧..(不確定)

    回覆刪除
  7. 感謝!終於生出來啦!

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

    另外,想請問一下已經買網址的也是設"blogger.com 及 blogspot.com"就好了嗎?需要再補充什麼嗎?

    還有,最後那個小貓划泡泡是怎麼個一回事?(挖鼻孔~~~)

    回覆刪除
  8. <5764061937420697288>(以上內容請勿刪除,以下引言請自行刪減)[quote]想請問一下已經買網址的也是設"blogger.com及blogspot.com"就好了嗎?[/quote]

    自訂網址的話,請見「三、安裝破解框架程式碼」→「2. 允許特定框架網址(Blogger、WP 平台)」→"如果 Blogger 使用自訂網域的話,那麼紅字 "blogspot.com" 請自行置換為自己的網域。" → 所以你應該是要設 "bigsishead.com"

    這一點影響的是後台編輯文章時的文章預覽畫面,你可以安裝完程式碼後,使用文章預覽試試看,等瀏覽器的圈圈跑完才能確定結果喔!

    當初測試時,失敗的情形是,文章預覽的畫面等瀏覽器的圈圈轉完後,語法會破除文章預覽畫面的 IFRAME 框架而回到首頁。

    如果你文章預覽畫面確定沒事的話請回報一下,因為我沒有自訂網址的環境可測試,tks!

    [quote]最後那個小貓劃泡泡是怎麼個一回事?[/quote]這個嘛~多多幫我按 "+1" 或是 "讚",就知道原因啦 ^++++^

    回覆刪除
  9. <5304678061181940058>(以上內容請勿刪除,從括號之後開始留言)
    [quote]所以你應該是要設 "bigsishead.com"[/quote]
    真糟糕,我竟漏看了那一句,不過我會這樣問是因為我剛設完"設"blogger.com及blogspot.com"後,編寫文章沒有問題,預覽也ok,但又怕在某些環節不行,所以我想,我乾脆設三個"blogger.com及blogspot.com及bigsishead.com"好了。

    哈哈!所以我看得到小貓划泡泡那就表示我按+1啦!(這個功能我甲意~~)

    回覆刪除
  10. 以前是funp哈部落,現在是7headlines七頭條網站在作這種事。

    回覆刪除
  11. <276084754291029916>(以上內容請勿刪除,從括號之後開始留言)1. 看來「使用底線」的效果比不上「文字上色」,我把重點字上色比較不會漏看。

    2. 多設網域比少設安全沒錯,由於我無法測試,如果真的有狀況再說了~

    3. 哈哈,這個網站的很多功能我都還沒時間寫,不過也不是沒好處,可以有尋寶的樂趣~~XD

    回覆刪除
  12. <3078868664448921533>(以上內容請勿刪除,從括號之後開始留言)殺頭生意有人做~~(是這樣用嗎!?)

    回覆刪除
  13. 何不去函7headlines 要求說明?

    回覆刪除
  14. <987120005024658742>(以上內容請勿刪除,從括號之後開始留言)如「五、使用 IFRAME 框架在法律上的責任」所提,7headlines 對我這個網站框架並未違法,我們只是小小網站,沒啥影響力,基本上 WFU 不會奢望我的 "要求說明" 就能讓 7headlines 去除框架,因為如果他們自願去除框架,7headlines 就等於倒站,所以這件事不會發生。

    我相信讓這件事曝光會是更有力的作法,讓更多網站使用 "反框架" 語法,會是更好的反制方式。

    回覆刪除
  15. WFU您好,我發現安裝後出現了其他問題:無法在寫文章時「預覽」自己的網站!會直接導回首頁~

    回覆刪除
  16. <4865213005635505218>(以上內容請勿刪除,從括號之後開始留言)那麼請跟留言 #5 pan kuan 所提一樣,把 blogspot.com 也加進去試試看(這樣一共排除三個網域),如果 ok 的話,請再回報一下~

    回覆刪除
  17. <569188715095422540>成功了,謝謝!

    回覆刪除
  18. <566118715184904487>(以上內容請勿刪除,從括號之後開始留言)謝謝回報,我來修正一下關於自訂網域的內文。

    回覆刪除
  19. 成功了,myshare 的框架現在會自動轉回原站 (www.readermemo.com)THANKS!

    PS: 我要如何像你一樣讓留言本出現 #1 #2 #3...序號的標簽啊?

    回覆刪除
  20. <407115552846100313>(以上內容請勿刪除,從括號之後開始留言)原來還有 myshare 會框架網站, 現在才知道~不過至少 myshare 看起來沒有 7headlines 那麼誇張.

    [quote]PS: 我要如何像你一樣讓留言本出現 #1 #2 #3...序號的標籤啊?[/quote]
    我用的是舊範本, 這個序號的 hack 只適用於舊範本(可在本站搜尋"留言回覆系統"), 而新範本的話, 可參考「Blogger 留言相關工具及技巧」→「串聯式留言加編號」,只不過效果沒有這個好就是了

    回覆刪除
  21. 大大超強的,痞客邦測試成功喔^^

    回覆刪除
  22. <6526445844039337202>(以上內容請勿刪除,從括號之後開始留言)哪裡~痞客邦環境不熟,有問題歡迎再回報 :)

    回覆刪除
  23. 謝謝您的語法教學
    解決了我的困擾
    真是造福許多人呀^^

    回覆刪除
  24. <759954039257064105>(以上內容請勿刪除,從括號之後開始留言)不客氣~^^
    您的圖片拍得很棒,猛一看您的網站很有熟悉的感覺,以為是 Blogger,沒想到是 WP~~~XD

    回覆刪除
  25. 您好,謝謝您的資訊,直到今年還是很實用,

    請問我常把文章PO到FB分享,但是加了這個語法之後,FB變成無法顯示文章的第一張圖,這要如何改善呢?

    回覆刪除
  26. <8902831822406262068>(以上內容請勿刪除,從括號之後開始留言)你好,FB 抓不到第一張縮圖,比較跟 meta 標籤的設定有關,可以參考這篇試試看,有詳細的說明:http://philotech1982.blogspot.tw/2014/12/metatagsforbloggersharing.html

    回覆刪除
  27. 請問程式碼能不能改寫成除了部分網域禁用iframe 框架
    其餘開放iframe的語法呢?謝謝您

    回覆刪除
  28. <2788227286085540000>(以上內容請勿刪除,從括號之後開始留言)改寫的方法「三、安裝破解框架程式碼」說明得很清楚囉~~

    回覆刪除

張貼留言注意事項:

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