Récupérer un contenu externe en AJAX : Cross Domain

Bonjour tous le monde!

Alors aujourd’hui nous allons voir comment feinter la restriction du Cross Domain (Croisement de domaine) pour récupérer le contenu d’une page EXTERNE à notre serveur.

Pré-requis

• la librairie jQuery
  http://jquery.com/
  
• la librarie cURL (ou plutôt le module cURL de PHP)
  http://php.net/manual/fr/book.curl.php

L’exemple

Bon alors nous allons prendre pour exemple la récupération d’une page externe complète (lesite.com). Quand ej dis récupération, on veut récupérer tous le contenu, mais également pouvoir le parser avec jQuery!

Je m’explique, si dans la page il y a du code comme suit:

<div id="valeur_parse">Toto est beau!</div>

On veut pouvoir récupérer la valeur “Toto est beau!” en faisant simplement:

var valeur_parser = $("#valeur_parse").html();

Voir directement le site jQuery pour connaître la syntaxe.

L’astuce pour contourner la protection Cross Domain

Alors premièrement, nous allons utiliser la méthode load() qui permet, en quelques mots, de charger le contenu de la page appelée dans le contenu actuel! Ce qui rend possible la navigation via les ID ou les CLASS par jQuery.

Le Hic! c’est que l’on à pas le droit de récupérer le contenu d’une page située sur un autre serveur! L’astuce est donc de créer un fichier PHP sur notre serveur, qui lui ayant ces droits va récupérer le contenu et l’afficher.

Notre script en jQuery n’aura donc qu’a appeler cette page située maintenant sur NOTRE serveur ce qui est autorisé!

./loader.php – functions curl_get_file_contents

function curl_get_file_contents($url,$proxyActivation=false) {
  global $proxy;
  $c = curl_init();
  curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($c, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7");
  curl_setopt($c, CURLOPT_REFERER, $url);
  curl_setopt($c, CURLOPT_URL, $url);
  curl_setopt($c, CURLOPT_FOLLOWLOCATION, 1);
  if($proxyActivation) {
    curl_setopt($c, CURLOPT_PROXY, $proxy);
  }
  $contents = curl_exec($c);
  curl_close($c);
  if ($contents)
    return $contents;
  else
    return FALSE;
}

Voilà la fonction PHP utilisant la librairie cURL. Librairie assez puissante, qui nous permet facilement de spécifier le navigateur (CURLOPT_USERAGENT), de passer par un proxy (CURLOPT_PROXY).

[spoiler title="Code entier de la page"]

<?php
// Permet de nettoyer un peu le code!
$_REQUEST['clean'] = ((!isset($_REQUEST['clean'])) ? true : $_REQUEST['clean']);
$_REQUEST['cleanjs'] = ((!isset($_REQUEST['cleanjs'])) ? true : $_REQUEST['cleanjs']);
$_REQUEST['cleancss'] = ((!isset($_REQUEST['cleancss'])) ? true : $_REQUEST['cleancss']);
$_REQUEST['cleanbody'] = ((!isset($_REQUEST['cleanbody'])) ? true : $_REQUEST['cleanbody']);
$_REQUEST['cleaniframe'] = ((!isset($_REQUEST['cleaniframe'])) ? true : $_REQUEST['cleaniframe']);
$_REQUEST['useProxy'] = ((!isset($_REQUEST['useProxy'])) ? true : $_REQUEST['useProxy']);
$proxy = ((!isset($_REQUEST['proxy'])) ? "xx.xx.xx.xx:xx" : $_REQUEST['proxy']);
// Liste de proxy
//http://www.hidemyass.com/proxy-list/
function curl_get_file_contents($url,$proxyActivation=false) {
  global $proxy;
  $c = curl_init();
  curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($c, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7");
  curl_setopt($c, CURLOPT_REFERER, $url);
  curl_setopt($c, CURLOPT_URL, $url);
  curl_setopt($c, CURLOPT_FOLLOWLOCATION, 1);
  if($proxyActivation) {
    curl_setopt($c, CURLOPT_PROXY, $proxy);
  }
  $contents = curl_exec($c);
  curl_close($c);
  if ($contents)
    return $contents;
  else
    return FALSE;
}
$body = curl_get_file_contents(urldecode($_REQUEST['urlSee']),$_REQUEST['useProxy']);
if ($_REQUEST['cleanbody']) {
  preg_match('`<body[^>]*>(.*)</body[^>]*>`isU', $body, $matches);
  $body = $matches[1];
}
if ($_REQUEST['cleanjs']) {
  $body = preg_replace('@<noscript[^>]*?>.*?</noscript>@si', '', $body);
  $body = preg_replace('@<script[^>]*?>.*?</script>@si', '', $body);
}
if ($_REQUEST['cleaniframe']) {
  $body = preg_replace('@<iframe[^>]*?>.*?</iframe>@si', '', $body);
}
if ($_REQUEST['cleancss']) {
  $body = preg_replace('@<style[^>]*?>.*?</style>@si', '', $body);
}
if ($_REQUEST['clean'])
  echo htmlentities($body);
else
  echo $body;
?>

[/spoiler]

Une fois ce script créé, il ne reste plus qu’à l’utiliser et à l’appeler!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Test load external files with javaScript & jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      function loadContent(idLoad, url, clean, cleanjs, cleancss, cleanbody, useproxy) {
        $("#"+idLoad).load(
          "loader.php?urlSee="+url+"&clean="+clean+"&cleanjs="+cleanjs+"&cleancss="+cleancss+"&cleanbody="+cleanbody+"&useProxy="+useproxy,
          function(responseText, textStatus, XMLHttpRequest) {
            alert('Chargé!');
          });
      }
      $().ready(function() {
        // Bouton de connexion!
        $("#clickme").click(function() {
          loadContent("allh2","tonsite.com",0,0,0,0,1)
        });
      });
    </script>
  </head>
  <body>
    <a href="#" id="clickme">Click me</a><br/>
    <div style="display:none" id="allh2"></div>
  </body>
</html>

Et voilà!

On a réussi à récupérer le contenu de la page hébergée sur un domaine différent et le placer dans le div d’id “allh2″.

Maintenant il n’y à plus qu’à parcourir cette div!

Bon dév’ à vous! :D