Comment Javascript affecte la conception des sites Web et le scraping Web

Gabriel Cioci le 27 août 2021

Vous souvenez-vous de la phase "Far West" de l'internet, lorsque tous les concepteurs de sites web faisaient leur propre travail et que les pages étaient remplies de couleurs mal assorties, de choix d'interface utilisateur bizarres et d'images étirées ? Quelle époque !

De plus, repensez à l'aspect de ces sites web si vous y accédez à partir d'un téléphone ou d'une tablette. La navigation n'était pas seulement une corvée, elle était carrément pénible.

Tout est beaucoup plus rationalisé maintenant, ancré dans les bonnes pratiques de l'interface utilisateur et optimisé pour toutes sortes de tailles d'écran. C'est à Javascript que nous devons cette dernière partie. C'est le langage magique qui transforme les pages statiques ennuyeuses en expériences rapides et dynamiques.

En bref, JS est excellent lorsque vous optimisez un site web pour les humains. Les robots, en revanche, ne le gèrent pas aussi bien. En fait, les scrapeurs web de base ne peuvent pas extraire de HTML des sites web dynamiques sans fonctionnalités supplémentaires. Ne vous inquiétez pas, nous allons vous expliquer pourquoi et comment surmonter ce problème dans cet article.

Un site web n'a pas besoin de Javascript. Vous pouvez vous en sortir en n'utilisant que du HTML et du CSS (ou même juste du HTML si vous voulez avoir l'ambiance des années 80). Alors pourquoi les gens font-ils l'effort d'ajouter JS ? C'est ce que vous allez découvrir.

Pourquoi les sites web utilisent-ils Javascript ?

Les sites web, tout comme les maisons, ont besoin de fondations solides. Le code HTML est le fondement même de cette fondation. En ajoutant quelques balises et éléments, vous pouvez utiliser le code HTML pour construire et organiser des sections, des en-têtes, des liens, etc.

Il y a très peu de choses que vous ne pouvez pas faire avec le code HTML lorsque vous construisez un site web. L'anatomie d'un élément HTML se compose d'une balise d'ouverture, d'une balise de fermeture et du contenu entre les deux. Le site web affichera les informations entre ces deux balises selon le format qu'elles imposent.

En apprenant ce style de codage simple, vous serez en mesure d'ajouter des en-têtes, des liens, des images et bien plus encore à votre site web. Plus tard, vous pourrez utiliser CSS pour spécifier les styles à appliquer à chaque élément.

CSS, abréviation de Cascading Style Sheets (feuilles de style en cascade), est la touche finale de votre HTML. Si le HTML est la structure, les feuilles de style en cascade sont la décoration. Il vous permet de modifier les couleurs, les polices et les mises en page tout au long de la page.

À ce stade, le site web est prêt à fonctionner, même s'il est un peu plat. Il peut également souffrir de longs temps de chargement si vous placez trop de données sur trop peu de pages ou devenir fastidieux à parcourir si vous répartissez le contenu sur un trop grand nombre de pages.

Il est donc temps d'améliorer l'expérience. Javascript est comme les services publics de la maison, il n'est pas crucial pour la structure, mais il fait une énorme différence pour ceux qui y vivent.

JavaScript est principalement utilisé dans les navigateurs et les applications web, mais c'est l'un des langages les plus populaires à l'heure actuelle, et vous pouvez le trouver dans les logiciels, les serveurs et les commandes matérielles intégrées.  

Voici quelques exemples des nombreux usages que vous pouvez en faire :

• Lecteurs audio et vidéo sur un site web
• Animations
• Liste déroulante
• Zoom avant et arrière sur les photos
• Naviguer parmi les images d'une page d'accueil
• Création de boîtes de confirmation

Différents frameworks JavaScript, tels que AngularJS, ReactJS et Node.js, sont accessibles sur le web. Vous pouvez réduire le temps nécessaire à la création de sites et d'applications basés sur JS en utilisant ces frameworks. JavaScript permet aux développeurs de créer facilement des applications à grande échelle. Il rend l'ensemble du processus de création d'applications web à grande échelle beaucoup plus accessible.

Récemment, de nombreux sites web sont devenus de plus en plus complexes et un besoin soudain d'état s'est fait sentir, dans lequel les données et les paramètres du client sont sauvegardés.

Qu'est-ce que le "statefulness" dans la conception d'un site web ?

Un système avec état est un composant dynamique dans le sens où il se souvient des événements importants en tant que données d'état et adapte le site web en conséquence. Il est plus facile de comprendre ce concept à l'aide d'un exemple :

Bob accède à un site web et ouvre un compte. Le système se souviendra de son login et de son état la prochaine fois qu'il accèdera au site web. Ainsi, Bob n'aura pas besoin d'aller sur la page de connexion car le site web le redirigera automatiquement vers la section réservée aux membres du site.

En coulisses, un processus crée un système intermédiaire qui se souvient des détails de l'utilisateur et le redirige automatiquement vers le bon serveur ou site web.

En revanche, un système sans état ne se souviendra pas et ne s'adaptera pas ; il renverra l'utilisateur à la page de connexion et lui demandera de saisir à nouveau ses informations d'identification à chaque fois.

Ce principe peut s'appliquer à n'importe quelle partie de la conception d'un site web. Quoi que vous modifiiez dans le corps, l'état suivra en conséquence. Il manipule une myriade de composants qui apparaissent sur la page web. L'état permet au site web de stocker des informations spécifiques à l'utilisateur afin de lui offrir une expérience personnalisée (droits d'accès), y compris l'historique des interactions et les paramètres sauvegardés.

La conception de sites web vous permet de stocker des informations sur vos utilisateurs sur un serveur, tandis que le stockage du navigateur peut encore mémoriser des données, mais seulement jusqu'à la fin de la session.

Quelle est l'influence de Javascript sur le web scraping ?

Javascript est un langage de programmation simple qui a été conçu pour donner une fonctionnalité dynamique aux sites web dans le navigateur. Lorsqu'une page web est chargée, son code JS est exécuté par le moteur Javascript du navigateur et transformé en code lisible par la machine. Bien que cela réduise le temps de chargement, les sites web modifiés dynamiquement peuvent entraver le web scraping.

Les scrapers de base envoient une requête HTTP au site web et stockent le contenu dans la réponse. Dans des circonstances normales, cette réponse contiendra le code HTML de la page. Les sites web dynamiques, cependant, renvoient du Javascript, qui ne contient pas de données utiles.

En outre, de nombreux sites web peuvent détecter si le visiteur peut exécuter Javascript ou non. Étant donné que les utilisateurs moyens naviguent sur l'internet via un navigateur, ils ne peuvent pas exécuter JS, ce qui indique clairement qu'ils n'utilisent pas de navigateur. À partir de là, il est clair pour les sites web que c'est un robot et non un humain qui les visite. L'IP du robot est alors généralement bloquée.

En bref, les sites web qui utilisent JS ne peuvent pas être scannés sans les outils appropriés, et les scrappeurs qui ne peuvent pas exécuter JS sont beaucoup plus faciles à attraper que ceux qui peuvent le faire.

Comment les racleurs de sites web gèrent-ils le Javascript ?

Heureusement, il existe une solution : les navigateurs sans tête. Ces programmes sont essentiellement les mêmes que les navigateurs classiques, avec les mêmes capacités mais sans interface graphique standard. Pour naviguer dans un navigateur headless, il faut donc utiliser la ligne de commande. Bien qu'ils soient principalement utilisés pour tester des applications et des sites web, ils peuvent également exécuter du code Javascript, ce qui en fait des compléments idéaux pour les web scrapers.

Une fois que le navigateur sans tête a traité le code JS, le site web envoie du HTML normal, c'est-à-dire les données que vous souhaitez réellement obtenir.

Un autre avantage des navigateurs headless par rapport aux autres est leur vitesse. Comme il n'a pas à s'occuper de l'interface graphique, du chargement de JS ou de CSS, il peut traiter les pages beaucoup plus rapidement, ce qui est excellent pour le web scraping puisque cela ne ralentit pas trop le bot.

Si vous souhaitez une solution d'extraction de données bricolée, il existe deux langages de programmation privilégiés : Python et Node.js.

Python et Selenium

Si vous choisissez Python, la bibliothèque de référence pour le rendu JS est Selenium. C'est une option fiable pour exécuter du Javascript, interagir avec des boutons, faire défiler et remplir des formulaires en ligne. Elle est principalement utilisée pour les projets open-source d'automatisation des navigateurs. Le protocole WebDriver contrôle des navigateurs comme Chrome et Firefox et peut être exécuté à la fois à distance et localement.

Conçu à l'origine comme un outil de test inter-navigateurs, Selenium est rapidement devenu une collection d'outils bien équilibrée pour l'automatisation des navigateurs web. Étant donné que de nombreux sites web sont construits comme des applications à page unique qui envoient des CAPTCHA même aux utilisateurs réels, l'extraction de données commence à ressembler de plus en plus à une tâche décourageante en raison de l'hypervigilance qui entoure la détection des robots.

Avec Selenium, le robot peut lire et exécuter du code Javascript pour que vous ayez accès au HTML, remplir des formulaires pour que vous puissiez vous connecter à des sites web, faire défiler une page web et imiter des clics.

Mais si vous faites du scraping en Python, ne vous arrêtez pas à Selenium. Vous pouvez utiliser la bibliothèque BeautifulSoup qui facilite l'analyse HTML et XML, puis Pandas pour extraire et stocker vos données dans un fichier csv.

Node.js et Puppeteer

Puppeteer est un paquetage Node.js qui vous permet de faire fonctionner Chrome ou Chromium sans tête et d'intégrer le protocole DevTools. L'équipe Chrome DevTools et une fantastique communauté open-source s'en occupent.

Cette solution vous aidera à gérer un scraper web dans le contexte de la structure en constante évolution d'un site web. Le principal obstacle au scraping est que les outils nécessitent des mises à jour constantes pour s'adapter et ne pas être limités par les serveurs.

Que peut faire Node.js ? Il aide Javascript à fonctionner gratuitement côté client et côté serveur, tout en créant des applications réseau beaucoup plus rapidement.

Mais concentrons-nous sur la star du web scraping. Puppeteer vous permet de manipuler manuellement un navigateur web, qu'il s'agisse de remplir des formulaires, de prendre des captures d'écran ou d'automatiser des tests d'interface utilisateur.

Si vous n'avez jamais travaillé avec ces bibliothèques ou si vous débutez dans le web scraping, je comprends que tout cela puisse vous paraître intimidant. Cependant, il existe une solution encore plus pratique qui fait tout le travail à votre place : une API.

Également connues sous le nom d'interfaces de programmation d'applications, les API permettent aux utilisateurs d'obtenir directement les données. En envoyant une demande au point de terminaison de l'API, l'application vous fournira les données dont vous avez besoin. De plus, ces données sont automatiquement présentées au format JSON.

Le plus grand avantage de l'utilisation d'une API est la simplicité avec laquelle vous pouvez la connecter à vos autres produits logiciels ou scripts. Avec seulement quelques lignes de code, vous pouvez transmettre les données extraites directement à d'autres applications après avoir reçu votre clé API unique et lu la documentation.

Voici un bref aperçu de tout ce que WebScrapingAPI fait pour vous :

• Exécute le Javascript et accède au code HTML des pages web dynamiques.
• utilise un pool de proxy rotatif contenant des centaines de milliers d'adresses IP résidentielles et de centres de données pour masquer votre activité
• Permet d'accéder aux en-têtes des requêtes afin de personnaliser les appels à l'API et de s'assurer que le scraper ne se distingue pas des visiteurs normaux.
• Fonctionnalités anti-fingerprinting et anti-captcha
• Renvoie les données déjà analysées dans un fichier JSON.

Une solution de web scraping sans souci

Qu'il s'agisse de conception de sites web, de HTML, de CSS, de Javascript ou de navigateurs sans tête, le World Wide Web revient toujours à la case départ : la libre circulation des données. C'est la raison d'être de l'internet. Quel meilleur moyen d'exploiter les masses de contenu que la collecte de données ? Après tout, où en seraient aujourd'hui les entreprises, les développeurs et même les gens en général sans l'accès à des informations précieuses ?

C'est vraiment ce qui nous motive tous. Maintenant que vous comprenez comment Javascript affecte l'Internet d'aujourd'hui, vous êtes mieux préparé pour commencer à faire du scraping, et j'espère que c'est ce que vous ferez. Si vous manquez de temps, vous pouvez essayer gratuitement notre propre solution, WebScrapingAPI. La période d'essai dure deux semaines, et vous avez accès à toutes les fonctionnalités essentielles comme le rendu JS et les proxys résidentiels.

Découvrez ce que l'API peut faire et, si vous n'êtes pas encore convaincu, contactez notre service clientèle incroyablement réactif pour obtenir des conseils.