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.

J’avais utilisé ce script pour pourrir un peu OVH qui m’était 3 semaines à répondre entre chaque demande. Ceux qui me suivent sur Twitter on peut-être vu mes déboires avec eux.

Le script

Côté Php rien de plus simple :

<?php
$to      = 'email@destinataire.tld';
$subject = 'Sujet de votre message';
$message = "Votre message en plain/text,
";

$headers = array(
    'From' => 'monemail@expediteur.tld',
    'Reply-To' => 'email@reponse.tld',
    'X-Mailer' => 'PHP/' . phpversion()
);

mail($to, $subject, $message, $headers);
?>

Tâche Cron

Là c’est à vous de voir à quelle fréquence vous souhaitez envoyer le message. Pour ma part, j’avais voulu être raisonnable et me limiter à 4 envois par jour. Ce qui donnait dans mon cas :

Minute : 0 
Hour : 0,4
Day : *
Month : *
Weekday : *

Il faut maintenant renseigner la ligne de commande. Vous devez renseigner le chemin complet du script. Pour obtenir le chemin complet, créer un fichier test.php, copiez le bout de code ci-dessous. Placez le fichier dans le même répertoire que le script d’envoi d’e-mail. Ouvrez la page test.php dans votre navigateur.

<?php $_SERVER['SCRIPT_FILENAME'] ?>

Si vous êtes sur environnement Cpanel cela va vous retourner quelque chose comme :

/home/user/public_html/nomdedomaine.com/mon_script.php

Le chemin identifié, vous ferez précéder votre chemin du binary, en l’occurrence php dans notre exemple. Ce qui donne la ligne de commande suivante :

/usr/local/bin/php /home/user/public_html/nomdedomaine.com/mon_script.php

Pensez bien à laisser un espace entre php et /home

Sur un environnement Cpanel, les tâches Cron sont dans le bloc avancé. Si votre environnement est en anglais, c’est le bloc Advanced et l’icone Cron Jobs.

Par défaut Cpanel vous propose des configurations comme toutes les minutes, toutes les heures, toutes les 5 minutes… A vous de choisir ce qu’il vous convient le mieux.