Récupérer des données sur le Web moderne peut souvent ressembler à un jeu de cache-cache. Alors qu'il y a dix ans, la plupart des informations étaient facilement disponibles en HTML, les développeurs aiment aujourd'hui masquer et obscurcir les données, en les restituant de manière dynamique avec JavaScript.
Cela représente un défi intéressant pour les grattoirs. Même si nous ne pouvons plus compter sur l’analyse du contenu HTML brut, une pléthore de données est toujours présente dans la page – il nous suffit de savoir où chercher.
Dans ce guide complet, nous explorerons diverses méthodes, outils et techniques pouvant être utilisés pour extraire des données Web cachées.
Que sont les données Web cachées ?
Les données Web masquées font référence à toutes les données qui ne sont pas directement visibles dans la source HTML brute de la page. Ceci comprend:
Données chargées dynamiquement via JavaScript après le chargement de la page. Par exemple, rendre le contenu d'un
<div>balise en insérant des éléments HTML créés dynamiquement.Données stockées dans des variables JavaScript et des objets intégrés dans
<script>Mots clés. Souvent des objets JSON contenant des ensembles de données entiers.Contenu HTML généré sur l'action de l'utilisateur via des requêtes AJAX. Par exemple, étendre les fils de commentaires ou la pagination à défilement infini.
L'API interne demande des données et des métadonnées utilisées par le frontend pour fonctionner. Par exemple, les jetons CSRF, les informations utilisateur, les caches temporaires.
Données obscurcies et cryptées visant à empêcher les scrapers d'y accéder.
Le thème commun est que ces données ne sont pas disponibles dans le code HTML original renvoyé par le serveur, mais plutôt générées ultérieurement par le JavaScript exécuté sur la page.
Les sites Web dynamiques modernes s’appuient largement sur cette technique pour créer des expériences frontend rapides. Toutes les données peuvent être masquées et restituées gracieusement en petits morceaux selon les besoins.
Malheureusement, cela signifie que les scrapers doivent travailler un peu plus dur pour accéder à ces données. Examinons quelques façons de le faire efficacement.
Trouver des données cachées en HTML
La première étape consiste à confirmer si les données souhaitées sont effectivement cachées quelque part dans la page JavaScript.
Voici une méthode simple pour vérifier :
Chargez la page cible dans le navigateur et localisez un identifiant de données unique que nous souhaitons récupérer. Par exemple, un nom ou un identifiant de produit.
Désactivez JavaScript dans le navigateur et rechargez la page. Cela peut être fait dans les outils de développement.
Vérifiez si l'identifiant unique est toujours présent dans le code source HTML brut.
Si les données ont disparu, elles sont très probablement rendues dynamiquement par JavaScript lors du chargement de la page.
Nous devons maintenant fouiller dans la source HTML pour trouver où et comment elle génère ce contenu.
Extraction de données à partir de balises
L’un des endroits les plus courants où résident les données cachées se trouve à l’intérieur <script> Mots clés.
Il peut s'agir d'objets JSON, de variables JavaScript, d'ensembles de données entiers ou de code manipulant la page.
Par exemple :
<html>
<body>
<div id="product"></div>
<script>
// product data as javascript object
var data = {
"product": {
"name": "Super Product",
"price": 99.99
}
}
// data rendered on page load
document.getElementById("product").innerHTML = data.product.name + ": £" + data.product.price;
</script>
</body>
</html>Ici, les données réelles du produit sont stockées dans une variable d'objet JavaScript appelée data.
Le produit <div> est vide pour commencer et rempli dynamiquement lors du chargement de la page.
Donc, pour extraire ces données, nous devons d'abord trouver les informations pertinentes <script> balise dans le HTML brut. Cela peut être fait avec n'importe quelle bibliothèque d'analyse HTML comme BeautifulSoup ou Parsel :
# extract scripts from HTML with BeautifulSoup
from bs4 import BeautifulSoup
html = # page HTML
soup = BeautifulSoup(html, ‘html.parser‘)
scripts = soup.find_all(‘script‘)Ensuite, nous devons extraire spécifiquement les données du contenu du script.
Méthode 1 : charger en JSON
Si les données sont un objet JSON valide, nous pouvons simplement les charger directement avec Python json module:
import json
# find script with data variable
script = soup.find(‘script‘, text=lambda t: ‘data =‘ in t)
# load json directly
data = json.loads(script.string)
print(data[‘product‘])
# {‘name‘: ‘Super Product‘, ‘price‘: 99.99}Cela fonctionne très bien si la balise script spécifie type="application/json".
Méthode 2 : correspondance Regex
Pour des données plus complexes, nous devrons analyser nous-mêmes le code JavaScript brut. C'est là que les expressions régulières sont utiles.
Nous pouvons analyser le code et extraire les parties qui correspondent à un modèle, comme notre objet de données.
import re
import json
script = soup.find(‘script‘, text=lambda t: ‘data =‘ in t)
# match the data object by surrounding syntax
match = re.search(r‘data = ({.+})‘, script.string)
# load matched json
data = json.loads(match.group(1))
print(data[‘product‘])
# {‘name‘: ‘Super Product‘, ‘price‘: 99.99}La clé consiste à créer soigneusement un modèle d'expression régulière qui identifie de manière unique l'ensemble de données souhaité à partir du reste du code.
Méthode 3 : analyse JavaScript
Pour un scraping avancé, nous souhaiterons peut-être analyser l'intégralité du code JavaScript, y compris les variables, les fonctions et les objets.
Cela permet d'extraire n'importe quelle donnée tout en conservant la structure et le contexte d'origine.
Nous pouvons utiliser des bibliothèques comme PyJavascript ainsi que Js2Py pour interpréter JavaScript en Python.
Par exemple avec PyJavascript :
import javascript
script = soup.find(‘script‘, text=lambda t: ‘data =‘ in t)
# init JavaScript interpreter
js = javascript.Interpreter()
# run script to define data variable
js.execute(script.string)
# access parsed data object
print(js.context[‘data‘][‘product‘])
# {‘name‘: ‘Super Product‘, ‘price‘: 99.99} Cela nous permet d'exploiter l'ensemble de l'environnement JavaScript, au-delà des seuls ensembles de données souhaités.
Récupération des données API à partir de JavaScript
Les API alimentent la plupart des comportements dynamiques sur les sites Web modernes. JavaScript effectue des requêtes pour charger des données, soumettre des formulaires ou déclencher des interactions.
En fouillant dans le code de la page, nous pouvons trouver ces points de terminaison d'API et imiter les demandes d'extraction de données.
Par exemple, voici un script simple qui charge les données produit à partir d'un /api/products/123 point final:
async function loadProduct(){
let response = await fetch(‘/api/products/123‘);
let product = await response.json();
// render product data to page
document.getElementById("product").innerHTML = product.name;
}
loadProduct();Une fois que nous avons localisé ce script dans le HTML, nous pouvons :
Extrayez l'URL de l'API du
fetch()Appelez-nousAnalyser les formats de requête et de réponse AJAX
Répliquez la requête API directement en Python avec des bibliothèques comme Requests
Cela permet de récupérer les données des API sur lesquelles JavaScript s'appuie sans exécuter de code de navigateur.
Recherche de données dans des variables JavaScript
Les données de page sont également généralement stockées directement dans des variables JavaScript.
Par exemple :
// javascript data
var products = [
{name: "Product 1", price: 19.99},
{name: "Product 2", price: 24.99}
];
function renderProducts(){
// loop through products and render HTML
} Ici, la liste complète des produits est stockée dans une variable appelée products.
Pour extraire cela, nous devons d'abord trouver le nom de la variable correspondant à notre structure de données cible. Nous pouvons utiliser une approche regex similaire :
import re
import json
# find products variable
script = soup.find(‘script‘, text=lambda t: ‘var products =‘ in t)
# match products json
match = re.search(r‘var products = ({.+});‘, script.string)
data = json.loads(match.group(1))
print(data)
# [{name: "Product 1", price: 19.99}, {name: "Product 2", price: 24.99}]Si la structure des données est plus complexe, nous pouvons analyser l'intégralité de l'environnement JavaScript pour accéder à toutes les variables concernées.
Récupération du contenu chargé via AJAX
Les sites Web chargent fréquemment du contenu de manière dynamique via AJAX après le chargement de la page.
Par exemple, étendre les fils de commentaires, la pagination à défilement infini ou les onglets.
Ce contenu n'est pas présent dans le HTML initial mais demandé au serveur selon les besoins.
Nous pouvons récupérer ces extraits AJAX en :
Surveillance des requêtes réseau sur la page pour identifier les URL AJAX.
Reconstruire les requêtes AJAX et les envoyer directement depuis le code Python.
Analyse des réponses AJAX qui contiennent des données HTML/JSON.
Par exemple, considérons ce script qui charge les données paginées lors du défilement :
// initially loaded page data
var results = [ /* initial page of data */];
// paginate on scroll
window.addEventListener(‘scroll‘, function() {
var page = results.length / 20 + 1;
// request next page
fetch(‘/data?page=‘ + page)
.then(res => res.json())
.then(data => {
results.push(...data);
// render new data
});
});Ici, nous pouvons voir qu'il demande des pages à /data point de terminaison et ajout de contenu à results variable.
Nous pouvons répliquer ces requêtes et récupérer les données directement, évitant ainsi d'avoir à analyser le HTML rendu complet.
Exécuter JavaScript avec des navigateurs sans tête
Pour le summum du scraping dynamique de contenu, nous pouvons lancer un navigateur entièrement sans tête, charger la page et accéder directement à l'environnement JavaScript.
Cela permet d'évaluer le code, de charger du contenu dynamique et d'accéder à toutes les données, fonctions ou éléments DOM disponibles sur la page en direct.
Voici un exemple avec Playwright en Python :
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto(‘https://targetpage.com‘)
# evaluate browser context to get data
data = page.evaluate(‘window.products‘)
browser.close()
print(data)La clé utilise page.evaluate() pour exécuter du code JavaScript personnalisé dans le contexte de la page chargée.
Cela nous donne un accès complet pour récupérer toutes les données autrement cachées.
L'inconvénient est de devoir lancer une instance de navigateur complète, ce qui est plus lent que les requêtes HTTP directes. Cette méthode est donc à utiliser avec parcimonie pour les pages complexes.
Données obscurcies et cryptées
Les sites Web masquent souvent délibérément leur code JavaScript pour empêcher le scraping.
Voici quelques exemples:
Réduire les noms de variables et de fonctions en caractères dénués de sens comme
a,b,fn1()Fractionner les ensembles de données entre plusieurs variables et scripts
Cryptage/codage des données afin qu'elles ne soient pas lisibles par l'homme
Assemblage dynamique de données au moment de l'exécution à partir de morceaux fragmentés
Techniques de protection du code telles que le packaging, l'obscurcissement, l'anti-débogage, l'exécution de VM
Cela peut rendre l'analyse du JavaScript très délicate. De petits changements de code peuvent facilement casser nos scrapers.
Il existe plusieurs façons de gérer les pages fortement obscurcies :
Utilisez des navigateurs sans tête comme Playwright ou Puppeteer pour charger le code exécuté plutôt que d'analyser directement la source obscurcie.
Suivez l'exécution du code pour comprendre comment les données sont assemblées, par exemple à l'aide d'outils de développement de navigateur ou en proxy du trafic du navigateur.
Analysez la manière dont les utilisateurs réels interagissent avec la page pour identifier les sources de données.
Les modèles font correspondre les structures de données connues – comme les noms de produits, les prix, les identifiants – pour localiser les parties de code pertinentes même si les variables sont obscurcies.
Pour le chiffrement, essayez de localiser les clés de chiffrement ou d’effectuer une ingénierie inverse des algorithmes de décryptage.
Au fil du temps, nous pouvons renforcer la résilience en faisant évoluer les scrapers pour nous adapter aux changements d'obscurcissement.
Supprimer les API cachées avec des proxys
Les API Web cachées utilisent souvent des techniques avancées d'anti-scraping telles que la limitation du débit IP, le captcha et la détection de robots pour empêcher l'accès.
C’est là que les proxys s’avèrent très utiles pour le scraping. En acheminant les requêtes via des adresses IP résidentielles, nous pouvons contourner de nombreuses protections et accéder aux API à grande échelle.
Quelques conseils pour scraper avec des proxys :
Utilisez une rotation régulière des proxys pour éviter d'être bloqué sur des adresses IP spécifiques
Activer la rotation des proxys en fonction des régions ou des FAI pour une grande diversité
Utilisez des proxys de backconnect qui fournissent des milliers d’adresses IP uniques à parcourir
Limiter les taux de requêtes par proxy pour imiter le comportement réel des utilisateurs
Utilisez l'autorisation de proxy pour usurper l'identité d'appareils réels, pas seulement des adresses IP anonymes
Surveillez et gérez les blocs courants tels que les captchas, les pages de blocage, les 429
Avec la bonne configuration de proxy, nous pouvons accéder à pratiquement n'importe quel site cible ou API cachée.
Services de grattage pour les données cachées
Il existe également des services de scraping gérés spécialement conçus pour extraire les données rendues par JavaScript.
Ceux-ci fournissent des capacités d’automatisation du navigateur, de gestion des proxy et d’exécution JavaScript.
Voici quelques exemples:
GrattageBee – API de navigateur et proxy capable d’évaluer JS dans les pages.
GrattoirAPI – API de navigateur sans tête avec rotation automatique du proxy.
Apifier – Runtime d’acteur pour l’automatisation du navigateur à grande échelle.
ScrapeOps – Générateur d'automatisation de navigateur visuel avec extraction JS.
ScrapFly – API de scraping imblocable avec des millions de proxys résidentiels backconnectés.
Ces services gèrent toutes les complexités du rendu dynamique des pages et facilitent la récupération des données cachées.
Faits marquants
Voici les points clés pour récupérer les données cachées d’un site Web :
Inspectez les pages sans JavaScript pour confirmer que les données sont chargées dynamiquement
Extraire et analyser des scripts, des variables et des objets JSON à partir de HTML
Analyser et répliquer les requêtes AJAX pour accéder aux API cachées
Utilisez des proxys et des navigateurs sans tête si nécessaire pour les sites JS lourds
Correspondance de modèles et ingénierie inverse du code obscurci
Adapter les grattoirs pour gérer les protections anti-bots
Avec les bonnes techniques, pratiquement toutes les données publiques d’un site Web peuvent être extraites. Il faut juste savoir où chercher !
