JS / 在blogger利用javascript偵測IP位址,判斷是否顯示”修改”與複製時是否增加”版權聲明”

常常在爬文的關係,會遇到在某些網站複製資訊時

會被自動加上版權聲明

 

這個原理是在網頁增加事件監聽,當網頁有”copy”行為發生時,改寫複製的內容

由於我想要在管理者(也就是我)登入時,不要觸發這個監聽事件

在wordpress登入之後,會在頁面上方顯示登入者資訊

所以可以利用這點來判斷當前在wordpress是否登入,以及是誰登入(雖然我的網站只有我一個帳號)

再用javascript來判斷是否增加 document.addEventListener 來偵測是否有copy事件

而blogger 登入的機制是利用google自身的帳號機制

也就是只要登入google帳號,就會能夠進入到blogger的後台

但是前端網頁不會有任何訊息,因此我想到的方式就是判斷IP位置

因為我通常只會在使用自己的電腦時(無論是辦公室或者宿舍),才會更新網站內容

所以只要偵測如果是特定IP之外的,就增加監聽事件

 

總結一下,整體程式碼分為2層

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!-- 判斷IP -->
<script>
function ToChinese2(e) {
	//console.log(e);
	var code = e.split(/&#(\d+);/g);
	//console.log(code);
	var c = "";
	for (var i = 0; i < code.length; i++) {
		var d = String.fromCharCode(code[i]);
		//console.log(d);
		if (d == String.fromCharCode("a")) {
			//console.log("o");
			//console.log(code[i]);
			c = c + code[i];
			//console.log(c);
		} else {
			//console.log("x");
			c = c + d;
			//console.log(c);
		}
		//console.log(c);
		//alert(c);
	}
	return c;
}
//Show IP address my mybloggertricks.com
document.addEventListener("DOMContentLoaded", function () {
	// Handler when the DOM is fully loaded
	// Show IP address my mybloggertricks.com
	var xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function () {
		if (this.readyState == 4 && this.status == 200) {
			var myip = this.responseText;
			//console.log(myip);
			if (myip == "xxx.xxx.xxx.xxx" || myip == "yyy.yyy.yyy.yyy" ) {
				var fix = document.getElementsByClassName("fix");
				//console.log(fix.length);
				for (var i = 0; i < fix.length; i++) {
					fix[i].setAttribute("style", "color:black");
				}
				
			} else {
				document.addEventListener("copy", function (evt) {
					let text = document.getSelection().toString();
					let s = location.href;
					let Msg = "本文作者:莊生趣味" + "\n" + "本文連結:" + s + "\n" + "版權聲明:轉載請標明作者、連結與出處!";
					let Msg2 = ToChinese2(Msg);

					if (text) {
						text = text + "\n\n" + "=========================================\n" + Msg2;
					};
					let clipdata = evt.clipboardData || window.clipboardData;
					clipdata.setData("text", text);
					//console.log(text);
					evt.preventDefault();
				});
			}
		}
	};
	xmlhttp.open("GET", "https://api.ipify.org/", true);
	xmlhttp.send();
});
</script>

 

 

第1層是判斷IP位址

參考”Show IP Address & Geolocation Of Website Visitors Via JavaScript“的方式

再參考”使用JavaScript获取IP地址的方法“,利用”https://api.ipify.org”會直接回傳當前IP位址的機制

因為前一篇的網站使用的”https://freegeoip.net/json”已經失效

第2層則是觸發的事件

當使用者在允許的IP位址時,顯示原本被隱藏的”修改”

 

在非允許的IP位址時,則新增對於網頁的copy監聽行為

在複製的內容自動加上版權聲明

結語

雖然有點雞肋,因為在blogger還是要靠google來管理登入行為

即使其他人用我的電腦瀏覽我的blogger,有沒有顯示”修改”都沒什麼影響

有差別的只是不會增加版權聲明,這對於我比較方便而已

不用在複製自己網站的內容時還要增加版權聲明