Comment afficher l’adresse IP de vos visiteurs avec JavaScript ?

La question peut paraître saugrenue, pourquoi utiliser JavaScript alors qu’on peut le faire facilement avec Php ?

Dans mon cas de figure, c’était un projet « Full JS » et je devais trouver un moyen d’obtenir l’adresse IP du visiteur du site à travers JavaScript.

Utiliser une API pour afficher l’adresse IP en JavaScript

C’est probablement la méthode la plus simple (sur papier).

Il existe pléthore d’API qui permettent d’afficher l’adresse IP des visiteurs de votre site et même bien plus, comme la latitude et le longitude, la région, la ville …

L’une des plus connues est ipify.org. Ipify est la plus connue et probablement la plus utilisée car elle propose une offre gratuite et simple à intégrer qui permet 1000 requêtes par mois, à l’instar de son concurrent ipapi.com.

Pour afficher l’adresse IP d’un visiteur en JavaScript avec ipify, il suffit d’utiliser le code ci-dessous:

// Il faut préalablement s'inscrire sur ipify avant d'utiliser ce code
<script type="application/javascript">
  function getIP(json) {
    document.write("My public IP address is: ", json.ip);
  }
</script>

<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>

Sauf que 1000 requêtes c’est peanuts ! Et très rapidement votre appel à l’API ne fonctionnera plus.

Utiliser Php pour créer une fonction JavaScript qui retourne l’adresse IP

Il est plus que probable qu’un codeur expérimenté 🤓 rira en voyant ce hack, mais à mon niveau je l’ai trouvé excellent et incroyablement simple à mettre en place. Le simple fait de modifier l’en-tête a permis de rendre cela possible !

Pour se faire, vous devez créer un fichier ip.php (vous pouvez le nommer comme vous le souhaiter) et nous allons y coller le code ci-dessous :

<?php
     header("Content-type: text/javascript");
?>
function getIPAddress(){ return "<?php echo $_SERVER['REMOTE_ADDR']; ?>"; }

Vous n’avez plus qu’à appeler cette page avec les balises script

<!-- Remplacez mon-chemin par le chemin où se trouver votre fichier -->   
<script type="text/javascript" src="mon-chemin/ip.php"></script>

Il ne vous reste plus qu’à appeler la fonction getIpAddress() à l’endroit où vous souhaitez afficher l’ip de vos visiteurs.

En l’état le code fonctionne parfaitement. Le seul bémol si vous l’avez testé, est que le fichier ip.php affiche la fonction en clair, et pour cause, c’est du javascript.

Autre point négatif, tout le web peut appeler la fonction getIPAddress() en faisant un lien vers cette page. Je doute que vous ayez envie de jouer les CDN. L’idéal est donc de rajouter une petite condition pour que le script s’exécute uniquement depuis votre nom de domaine.

<?php
// Remplacer s2prod.net par votre propre nom de domaine
if($_SERVER['HTTP_HOST'] === 's2prod.net') {
  header("Content-type: text/javascript");
?>
function getIPAddress(){ return "<?php echo $_SERVER['REMOTE_ADDR']; ?>"; }
<?php
} else {
  header("HTTP/1.1 403 Forbidden");
}
?>

Afficher les coordonnées GPS et la ville de vos visiteurs

Si vous souhaitez afficher les coordonnées latitude, longitude ou même la ville, vous pouvez utiliser l’objet Navigator de JavaScript. Il faudra cependant faire appel à une API de géocodage inversé comme Nomimatim, qui a la bonne idée d’être gratuite et relativement précise.

⚠️ Attention, pour que l’appel fonctionne, il faut que votre visiteur accepte la géolocalisation, dans le cas contraire, cela générera une erreur.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    function (position) {
      const lat = position.coords.latitude;
      const lng = position.coords.longitude;

      // Appelle l'API de géocodage inversé de Nominatim
      fetch(
        `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`
      )
        .then((response) => response.json())
        .then((data) => {
          // Récupère le nom de la ville à partir des données renvoyées par l'API
          const ville =
            data.address.city|| data.address.town || data.address.village;
          document.write(`Vous êtes à ${ville}!`);
        })
        .catch((error) => document.write(error));
    },
    function (error) {
      document.write(error);
    }
  );
} else {
  document.write(
    "La géolocalisation n'est pas prise en charge par votre navigateur"
  );
}

Conclusion

L’appel à une API gratuite et limitée peut servir dans certains cas de figure. Personnellement je préfère la méthode fait maison pour obtenir l’adresse IP en modifiant l’en-tête avec PHP. Aucune limitation et simple à mettre à œuvre. Concernant les autres données, il faudra utiliser l’objet Navigator qui devrait faire l’objet d’une autorisation du visiteur contrairement à l’usage d’une API externe.