Google haritaları web sitenize ücretsiz olarak entegre etmek ister misiniz? Harita göstermek için bir araba parası vermeye gerek yok bence 🙂
Bu konu aslında o kadar zor değil. Biraz kod, hack ve iyi olan her şey.
Google Maps Access Token
Her şeyden önce, Google Map JS API nasıl çalışır?
- Size bir API anahtarı verirler.
- Anahtar kısıtlamalarını yapılandırabilirsiniz. (izin verilen alan adları, izin verilen IP vs.).
- Google maps javascript dosyasını çağırırken API anahtarını girersiniz.
- Harita, web sitesindeki anahtarı kullanıp kullanamayacağınızı öğrenmek için hizmetleri arar. Değilse, içeriği engeller.
Peki kısıtlamalar nasıl atlanır?
- Bir anahtara ihtiyacınız var.
- Doğrulama çağrısını durdurmanız ve engellemeniz gerekir.
Google haritalar kendi web sayfanıza entegre olduğundan tüm kontrole sahipsiniz ve gerçek zamanlı olarak müdahale edebilirsiniz. Bu yapacağımızı istediğiniz API anahtarıyla yapabilirsiniz. Örneğin:
AIzaSyDIJ9XX2ZvRKCJcFRrl-lRanEtFUow4piMBu anahtarla çalıştırmaya çalıştığınızda karşınıza buradaki gibi bir ekran çıkacaktır.
Baktığımızda erişim kontrolünü sağlayan iki tane çağrı var.
- https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate
- https://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent
Peki bu dosyaların çağrılması nasıl engellenir?
Google Maps Doğrulamasını Engelleme
Google Haritalar backendle iletişim kurmak için JSONP kullanıyor. Yani kontrol için yazılı kodlar sayfaya daha sonradan dahil oluyor. O zaman engelleyelim ve ücretsiz kullanmaya başlayalım. Örnek kod aşağıdaki gibidir. İstediğiniz gibi düzenleyebilirsiniz.
Not: Kullanacağınız anahtar yinede geçerli bir anahtar olması gerekiyor. Google haritalar kullanan bir siteden alabilirsiniz.
<!DOCTYPE html>
<html>
<head>
<title>Google Simple Map API Hacking</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
header {
background-color: #333;
padding: 10px;
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
button {
padding: 8px;
font-weight: bold;
border-radius: 3px;
margin: 0px 5px;
}
button:disabled {
opacity: 0.3;
}
button.start-hack {
background: #0c0;
color: white;
border: none;
}
button.stop-hack {
background: #c00;
color: white;
border: none;
}
h1 {
display: inline;
font-size: 18px;
color: #ccc;
margin-right: 10px;
}
span {
color: #CDDC39;
font-style: italic;
padding-right: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIJ9XX2ZvRKCJcFRrl-lRanEtFUow4piM&callback=initMap" async defer></script>
<script>
(() => {
"use strict";
const hackSetter = (value) => () => {
window.name = value;
history.go(0)
};
const appendChild = Element.prototype.appendChild;
const urlCatchers = [
"/AuthenticationService.Authenticate?",
"/QuotaService.RecordEvent?"
];
Element.prototype.appendChild = function(element) {
const isGMapScript = element.tagName === 'SCRIPT' && /maps\.googleapis\.com/i.test(element.src);
const isGMapAccessScript = isGMapScript && urlCatchers.some(url => element.src.includes(url));
if (!isGMapAccessScript) {
return appendChild.call(this, element);
}
return element;
};
})();
</script>
</body>
</html>Artık ücretsiz bir şekilde Google Haritaları kullanabilirsiniz.
İlk Yorumu Siz Yapın