Récupérer le contenu d'une page web pour le traiter

Bonjour !

Je viens de nouveau quérir votre aide à propos d’un projet confié par une entreprise cette fois (donc je ne pourrais pas donner tout le code, mais je ferai de mon mieux pour être le plus clair possible).

Voilà mon problème: J’aimerais récupérer des données qui sont sur une page Web (qui sont visibles quand on appuie sur F12 par exemple). Cette page web contient du HTML, un peu de CSS, du JSS (et surement du PHP et du MySQL, mais je n’en suis pas sûr).

Cette page contient un tableau avec 8 colonnes et X lignes. Chaque ligne porte une référence unique (avec un lien cliquable, j’y reviendrais ensuite), suivi d’une autre référence qui n’est pas unique (qui permet de classer en catégorie).

Mon but est de récupérer le lien contenu dans la référence unique pour chaque référence non unique répondant à mes critères (pour mon exemple et pour plus de clarté, on va dire qu’il y a des références A, B, C, D et que seules A et B m’intéressent).

Si je récapitule, j’ai par exemple le tableau suivant:

1
2
3
4
5

RefUnique1     A       col3       col4       col5       etc...
RefUnique2     B       col3       col4       col5       etc...
RefUnique3     C       col3       col4       col5       etc...
RefUnique4     D       col3       col4       col5       etc...
RefUnique5     A       col3       col4       col5       etc...

Dans ce cas, j’aimerais récupérer les liens de RefUnique1/2/5.

L’autre partie du problème c’est que ces données sont générées, elles n’apparaissent pas dans le code source (quand on fait clique droit => afficher code source), mais seulement quand on fait F12 (ça s’appelle "l’inspecteur" il me semble)

J’aimerais donc que vous m’aidiez à m’orienter un peu sur les possibilités qui s’offrent à moi. D’après mes recherches, il est préférable d’utiliser des langages avec des bibliothèques faites pour (Python ou Perl par exemple), ou éventuellement en PHP. Est ce qu’il serait possible de faire un script JSS éventuellement ?

Pensez vous que cela est faisable ?

J’attends vos précieux conseils et méthodes, et vous remercie pour votre attention !

Salut,

Si tu regardes le code source de la page avec le tableau, tu devrais trouver le code Javascript qui ajoute des lignes au tableau. Les données proviennent probablement d’une API que tu pourrais utiliser toi aussi et ça serait plus simple que d’utiliser un headless browser (genre phantomjs) qui est un navigateur web sans affichage pour l’utilisateur qui exécute le JS dans les pages et que tu peux contrôler.

Bonjour et un grand merci pour ta réponse rapide !

Comme c’est un service disponible uniquement depuis l’intranet et que je ne m’y suis intéressé que rapidement (c’était la fin de journée :P), je n’ai pas eu le temps de bien étudier le code source (juste de repérer ce qui m’intéressait en terme de données en fait).

Du coup je regarderai tout ça demain en me documentant un peu mieux et je fais un rapport de mon avancée demain (et je reste ouvert à d’autres suggestions bien évidemment).

Merci encore !

Plus simplement, ouvre la console avec l’inspecteur, va dans l’onglet réseau/network, et actualise la page, tu auras les différentes requêtes effectuées par l’application avec leur adresse et les données reçues.

Alors en effet j’ai pu voir les différents scripts js utilisés (et j’ai pu les télécharger aussi).

A priori ça utilise également de l’Ajax (et la bibliothèque JQuery), j’essaie de comprendre comment tout ça fonctionne et je reviens vers vous !

Merci pour votre aide

Petit message de mon avancée:

Je rame un peu et suis un peu à court d’idées, voilà le point:

De ce que je comprends, il y a une page qui est appelée depuis l’extérieur et qui génère et engendre le reste de la page. Je ne comprends pas bien de quoi est faite cette page ni comment elle est générée. Dans l’inspecteur, il est dit que la source est un document js mais que le type est html (du coup c’est du Javascript ou du html ? o_O). La page contient du HTML et du jss mais aucun css ni php.

Cette page est la première à être chargée et contient déjà toutes les données brutes qui m’intéressent (le fameux tableau avec les références et les liens).

Par la suite, plusieurs fichiers jss sont téléchargés (dont JQuery par exemple) mais je crois qu’ils ne me concernent pas.

Des idées ? Des suggestions ?

Merci

Tu ne verras pas de code PHP dans les requêtes.

Si c’est la première à être chargée avec déjà toutes les données brutes qui t’intéresse tu devrais le trouver dans les sources.

Aurais-tu le droit de mettre les différents endpoints (l’adresse sans l’url de base) que tu as dans tes requêtes ?

Après vérification, je rectifie ce que j’ai dit: j’ai accès aux données qui m’intéressent depuis l’inspecteur ET depuis le clique droit=>afficher code source de la page.

J’ai contacté différents services aujourd’hui pour savoir s’il y a pas une API disponible ou si je pouvais avoir accès à la bdd (ce qui m’étonnerait très fortement), j’aurais plus d’infos demain.

En ce qui concerne les endpoints, comme je suis tout nouveau dans l’entreprise et que c’est ma première fois dans un gros groupe, je préfère ne rien dire du tout, même s’il n’y a surement rien de très sensible dans ce que tu me demandes (j’espère que tu comprendras ma "paranoïa"). Je peux peut-être te répondre si tu cherches quelque chose en particulier dans ces endpoints ?

Quand je lis tes messages, je ressens un manque de connaissance sur ce que tu essayes de faire. Moins tu nous donneras d’informations concrètes, plus on aura du mal à te guider car nos conseils seront trop généraliste et non applicable directement.

Ton CSS (est dans ton volet de droite de ton inspecteur de code) et dans les balises <style href="...." />.

Sais-tu utiliser/faire un script en js ? (Pour savoir comment je peux formuler ma future explication). Ta balise "<TABE" ou "<TBODY" à une id ?

J’ai des bonnes connaissances dans la plupart des langages web communs (HTML, PHP, MySQL, PostgreSQL, CSS, etc.) mais des notions assez rudimentaires sur le Javascript. Je saurais comprendre un script Javascript à l’aide de la documentation, mais je le comprendrais beaucoup moins facilement qu’un code en PHP par exemple. Le soucis c’est que l’application web en question est complexe en soit, et son fonctionnement l’est tout autant. J’ai pu télécharger 20 scripts auxquels la page qui m’intéresse fait appel, sans compter ceux écrit en dur dans les balises <script> de la page.

Comme je l’ai dit dans mon message précédent, il s’agit d’un grand groupe avec des règles de confidentialités strictes. De plus, l’application en question traite des données particulièrement sensibles. Etant nouveau et dans ce groupe et dans le monde de l’entreprise en général, je préfère rester vague au détriment d’explications plus précises que de risquer une boulette.

Je n’ai pas besoin du CSS ici pour l’instant et je n’en aurais pas besoin je pense (peut être pour respecter une certaine charte graphique mais elle est assez sommaire sur l’application). Pour le coup, je sais ce que c’est, à quoi ça sert et comment m’en servir !

Pour le js, j’y ai répondu au dessus. Je serais capable de faire et d’utiliser un script basique; pour des notions plus compliquées j’aurais besoin de la documentation et d’aide.

Il y a les deux, le TBODY n’a pas d’id et le table oui. Je vais donner un extrait de la structure du tableau pour essayer d’être le plus clair possible:

 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

<script type="text/javascript"> var resourcePath = 'chemin/vers/le/script'; </script>
<div class="hiddenTabs" id="tab-4" style="display: block;">
   <p class="grosTitre tdChampFiche heght15">
   <span class="floatLeft">Titre</span></p>
   <div class="cadre">
   <table class="tab4Class" style="width: 800px;">
      <tbody>
         <tr>
            <th class="sortable" width="70px"> Titre1 </TH>
            <th class="sortable" width="65px"> Titre2 </TH>
            <th class="sortable" width="70px"> Titre3 </TH> 
          </tr>

          <tr class="pair">
             <td aligne="center" width="70px"> <a href="lien vers fiche détaillée 1" onclick="popup(this.href, '', 1080, 600); return false;" title="Fiche détaillée 1"> référence unique 1</a></td>
             <td aligne="center" width="65px">Référence pour catégoriser (A, B, C, D dans mon exemple)</td> 
<!-- Ensuite il y a d'autres colonnes qui ne m'intéressent pas -->
         <tr class="impair">
             <td aligne="center" width="70px"> <a href="lien vers fiche détaillée 2" onclick="popup(this.href, '', 1080, 600); return false;" title="Fiche détaillée 2"> référence unique 2</a></td>
             <td aligne="center" width="65px">Référence pour catégoriser (A, B, C, D dans mon exemple)</td> 
<!-- Et ainsi de suite sur X lignes (en alternant pair et impair) -->
         </tr>
      </tbody>
   </table>
</div>

`

Voilà voilà, merci encore pour toutes vos réponses

Super, merci beaucoup ! C’est très clair et fonctionnel.

Voici le code que j’ai réadapté à mon besoin (en surligné: les changements):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

(function(e, s) {
    e.src = s;
    e.onload = function() {
        jQuery.noConflict();
        $ = jQuery;
        var abc = "";
        $("table.classTab tbody > tr").each(function () {
            if($(this).find("td:eq(1)").text()==="RefA" || $(this).find("td:eq(1)").text() === "RefB"){
                abc += $(this).find("td:eq(0)").text();
                abc += "\t";
                abc += $(this).find("td:eq(1)").text();
                abc += "\n";
            }
        });
        console.log(abc);   
    };
    document.head.appendChild(e);
})(document.createElement('script'), '//code.jquery.com/jquery-latest.min.js')

Pour revenir à ce que je disais à propos de mes connaissances en js, j’ai compris le code dans sa globalité (il n’a pas l’air très compliqué), mais j’aurais eu beaucoup de mal à trouver ça par moi même !

Maintenant pour la suite, j’aimerais savoir deux-trois choses un peu plus compliquées:

1) Est ce qu’avec le même principe (en utilisant find() par exemple) je pourrais récupérer le lien du href plutôt que le texte qu’il lui est associé ?

2) Est ce qu’il serait possible de rendre "automatique" l’exécution de ce script ? Je m’explique: Pour charger la page contenant le tableau, je dois rentrer l’identifiant unique (celui que je récupère avec eq(0)) dans un champ de recherche situé sur cette même page. Est ce qu’il serait possible de récupérer une liste de ces identifiants (ou de les mettre en dur à la rigueur) afin de lancer le script une fois et qu’il se charge de lancer la recherche afin de changer de page et récupérer le tableau de chaque page une par une (pour chaque identifiant unique donc)

3) Est ce qu’il serait possible de produire directement un fichier avec toutes ces données ?

Pour la 1) et la 3), je suppose que c’est oui et assez facilement (je vais faire des recherches par moi même en attendant bien sûr, simplement je vous expose mes plans pour l’évolution du projet). En revanche pour la 2, je ne suis pas sûr que ce soit possible, et si ça l’est c’est très certainement hors de portée pour moi.

EDIT:

Je retire ce que j’ai dit pour la 3), ça semble plus compliqué qu’il n’y parait. Si j’ai bien compris ce que j’ai lu, la création d’un fichier sur le poste utilisateur sans son accord depuis un script js est très dangereuse (et maintenant que j’y pense, c’est vrai que se serait un gouffre de sécurité). Du coup de ce que j’ai lu, il y a une API qui peut éventuellement permettre de faire ceci ("File" de son petit nom), mais je ne sais pas si c’est possible de la mettre en place dans mon cas.

Je poursuis mes recherches !

Fin EDIT.

Merci encore !

1) .find().attr("href");

2) Tu utilises quel navigateur ? J’ai des scripts avec un usage quasi-identique. Sur ta première page c’est un formulaire "<form" que ta page envoie ?

3) Oui peux-tu télécharger (la version portable de) node.js et l’exécuter sur ton pc ?

Alors personnellement et dans le cadre du développement j’utilise Firefox, mais comme c’est une application destinée aux employés de l’entreprise, dans l’idéal il faudrait que ce soit aussi compatible IE (8 ou 9, à confirmer demain). Mais si c’est trop compliqué à mettre en oeuvre, un des deux suffira.

Je vais te montrer la structure, comme j’ai fait pour le tableau, j’ai l’impression que c’est bien plus clair comme ça:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<h2>Recherche</h2>
<ul>
   <li>
      <form action="lien semblable à la page actuelle" id="idForm" method="post">
      <p>Par numéro<br> 
      <input autocomplete="off" class="class input" id="idInput" name="idInput" tabindex="30" title="Numéro" type="text" value="là il y a l'identifiant unique à rentrer pour la recherche">
      </p>

      <p style="text-align:right">
      <a class="button" href="#" id="submitSearch" tabindex="40"> Ok </a></p>
      </form>
   </li>
</ul>

Pour node.js, je ne peux rien installer sur ce PC (il faut des droits administrateurs). En revanche, j’ai pris cette version de node.js et l’ai mis sur une clé, je peux le lancer comme ceci. Je n’ai jamais utilisé node.js, je ne sais pas si cette version sera suffisante pour l’idée que tu as.

Merci pour ton aide

Je ne sais pas si on peut faire confiance à sourceforge, surtout quand il ne s’agit pas de la source officiel. Je pensais à la version portable (sans installation) de nodejs sur le site officiel : Windows Binary (.zip), et tu es sûr d’avoir la dernière version.

Firefox convient très bien à cet usage. Surtout avec l’extension GreaseMonkey qui est essentiel pour la suite. Cette extension permet au script de s’exécuter automatiquement/tout seul. (Ça sera facilement exportable sur nodejs).

Je te laisse ajouter dans le script de GreaseMonkey (tu vas sur la page type en question, et tu cliques sur le bouton ajouter). Le lien devrait ressembler à ça : "http://site.com/?id=*".

Le HTML propose un attribut génial target, il permet soit de dire au navigateur d’ouvrir la page dans un nouvel onglet, dans une popup ou dans une frame/iframe. Cette solution peut retourner un message d’erreur de sécurité si les deux pages n’ont pas

Pour que target fonctionne, il faut qu’il est le name de l’iframe.

Dans un premier temps quand la page se charge, tu ajoutes une iframe et tu la lies au formulaire :

1
2

$("body").append('<iframe name="jack"></iframe>');
$("form#idForm").attr("target", "jack");

Maintenant qu’on a préparé le terrain, on peut s’occuper de l’envoie du formulaire :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

setTimeout(fct = () => {
  $("iframe").on("load", () => {
    setTimeout(fct, 2000); // Une fois prêt on laisse 2sec à l'userscript pour s’exécuter.
  });

  var $form = $("form#idForm");

  $form.find("input#index").val(ta_cle_ici); //Ici tu t'occupes à saisir les données de ton formulaire.

  $form.submit(); //On envoie le formulaire
}, 2000); //On attend 2sec après que la page soit chargé.

(Il faudra voir la configuration de GreaseMonkey ou mettre ce code dans $(window).load(function() { /* le code */ }); pour exécuter le script quand la page est prête).

Normalement avec tout ça, tu devrais avoir un script qui tourne en boucle.

Je te laisse appliquer ceci et avoir quelques choses de fonctionnel avant d’attaquer la partie sauvegarder de fichier.

Temporairement, dans l’iframe tu peux utiliser la variable parent pour accéder à la page parent. Dans le script de ma précédente réponse j’essayerai bien le code ci-dessous pour regrouper les informations de chaque lien, en un seul bloque.

1

parent.ma_variable_globale += abc;

Bonjour et merci pour la réponse.

J’ai pris la version de Node.js que tu recommandes (l’officielle) et elle marche tout aussi bien.

Je n’ai pas la possibilité d’installer d’extension Mozilla (l’administrateur système a bloqué ce droit), est ce qu’il y a une solution alternative à GreaseMonkey ? Est ce que Node.js pourrait permettre ceci ?

Utilise une version portable de firefox ?

Sinon dans le onload de l’iframe tu glisses le code ci-dessous ça devrait fonctionner normalement.

1
2
3

$("form#idForm").contents().find("table.classTab tbody > tr").each(() => {
  //Le reste de ton code que tu as fais ci-dessus.
}