Comment utiliser les en-têtes Http avec Axios pour éviter la détection

Mihnea-Octavian Manolache le 27 Jan 2023

Les en-têtes HTTP sont un aspect important de toute requête ou réponse HTTP, car ils permettent au client et au serveur d'échanger des informations supplémentaires sur la requête. Lors de la création d'une application web Node.js, il est important de disposer d'un client HTTP fiable et facile à utiliser pour effectuer des requêtes auprès d'API et d'autres serveurs.

JavaScript et Node JS en particulier offrent un grand nombre d'options en matière de clients HTTP. Cependant, l'un de mes favoris (et certainement l'un des 5 meilleurs clients HTTP JavaScript) est Axios. C'est pourquoi aujourd'hui, nous allons nous concentrer sur le paramétrage des en-têtes HTTP d'Axios.

Axios est une bibliothèque JavaScript très répandue qui simplifie le processus des requêtes HTTP et qui est particulièrement utile lorsque l'on travaille avec des API dans un environnement Node.js. Dans cet article, nous allons explorer les différentes façons dont Axios peut être utilisé pour travailler avec les en-têtes HTTP. À la fin de cet article, vous devriez être en mesure de comprendre :

• Qu'est-ce qu'un en-tête HTTP et comment fonctionne-t-il ?
• Pourquoi Axios est-il un excellent client HTTP pour Javascript ?
• Comment utiliser les en-têtes HTTP Axios dans une application web réelle

Comment fonctionne la communication HTTP

Avant de plonger dans la définition d'un en-tête HTTP, je pense qu'il est important d'avoir au moins un aperçu du fonctionnement du protocole HTTP. Comme vous le savez certainement déjà, le protocole de transfert hypertexte (HTTP) est la base sur laquelle le web est construit aujourd'hui. À un niveau élevé, il permet le transfert d'informations entre un serveur et ses clients. Le flux réel de cet échange d'informations ressemble à peu près à ceci :

1. Le client ouvre une nouvelle connexion TCP
2. Il envoie un message au serveur, appelé requête HTTP.
3. Le serveur reçoit et interprète la demande
4. Il renvoie ensuite un message au client, appelé réponse HTTP.
5. Le client lit le message et poursuit ou ferme la connexion.

La partie importante sur laquelle nous allons nous concentrer aujourd'hui est le message, en particulier le message envoyé par le client. Pour que la communication entre le serveur et le client soit efficace, les messages doivent être formatés conformément au protocole HTTP. En ce qui concerne la requête HTTP, les éléments qui composent le message sont les suivants :

La méthode décrit ce que nous voulons faire avec notre demande (si nous voulons recevoir, envoyer, mettre à jour des informations, etc.)

• Le chemin, l'emplacement de l'URL que nous essayons d'atteindre
• La version du protocole HTTP que nous utilisons
• Les en-têtes HTTP, qui sont utilisés pour envoyer des informations et des métadonnées supplémentaires avec notre demande.
• Le corps, dans le cas où nous utilisons une méthode qui envoie des informations au serveur (comme une requête POST)

Que sont les en-têtes HTTP Axios et comment fonctionnent-ils ?

En termes simples, les en-têtes HTTP sont des champs qui transmettent des informations et des métadonnées supplémentaires au message. Encore une fois, par message, nous entendons la demande lorsqu'elle est envoyée par le client et la réponse lorsqu'elle est envoyée par le serveur. Le serveur et le client peuvent donc tous deux transmettre et recevoir des en-têtes. Par exemple, supposons que vous souhaitiez ouvrir une connexion persistante avec le serveur. Par défaut, les connexions HTTP sont fermées après chaque requête. Pour éviter cela, il suffit de passer l'en-tête `Keep-Alive`.

En ce qui concerne les en-têtes HTTP avec Axios, il n'y a vraiment rien de spécial. Comme nous l'avons vu, Axios est un client HTTP et nous avons déjà établi que les clients HTTP peuvent envoyer et recevoir des en-têtes.

Pourquoi Axios est un excellent client HTTP pour JavaScript

Maintenant que nous avons un aperçu du fonctionnement du protocole HTTP, parlons des "clients". JavaScript offre quelques options pour interagir de manière programmatique avec un serveur via HTTP. Parmi les choix les plus populaires, il y a `axios`, `node-fetch` et `got`.

Dans la communauté JavaScript, les avis divergent quant au choix de l'un ou l'autre. Bien sûr, il y a beaucoup d'avantages et d'inconvénients à chaque paquet, mais j'ai moi-même choisi Axios après avoir effectué un simple test de vitesse entre les trois.

Voici le script que j'ai utilisé pour tester la vitesse :

// index.js

import { get_timing, array_sum } from './helpers.js'

import got from 'got'

import axios from 'axios'

const CALLS = 5

const send = async () => {

   const res = {}

  

   let start = process.hrtime()

   await got('https://httpbin.org/')

   const g = get_timing(start)

   res.got = g

   start = process.hrtime()

   await axios.get('https://httpbin.org/')

   const a = get_timing(start)

   res.axios = a

   start = process.hrtime()

   await fetch('https://httpbin.org/')

   const f = get_timing(start)

   res.fetch = f

   return res

}

let test_results = {

   got: [],

   axios: [],

   fetch: []

}

let avg = {}

console.log(`[i] Process started with ${CALLS} iterations.`)

for (let i = 0; i<=CALLS; i++) {

   let r = await send()

   Object.entries(test_results).map(([key, value]) => test_results[key].push(r[key]))

}

Object.entries(test_results).forEach(([key, value]) => {

       console.log(`\n[+] ${key}`)

       console.log(`    [i] Average: ${array_sum(value)/value.length}`)

       console.log(`    [i] Values: ${value}`)

       avg[key] = array_sum(value)/value.length

   }

)

console.log(`\n🚀🚀🚀 WINNER: ${Object.keys(avg).reduce((key, v) => avg[v] < avg[key] ? v : key)}  [${CALLS} calls sent] 🚀🚀🚀`)

Et voici les fonctions `helper` :

// helpers.js

export const get_timing = (start) => {

   const NS_PER_SEC = 1e9

   const NS_TO_MS = 1e6

   const diff = process.hrtime(start)

   return (diff[0] * NS_PER_SEC + diff[1]) / NS_TO_MS

}

export const array_sum = (array) => {

   return array.reduce((accumulator, value) => {

     return accumulator + value

   }, 0)

}

J'ai testé avec 5, 10, 20 et 30 demandes envoyées avec chaque paquet, 10 itérations à chaque fois et voici l'aperçu des résultats :

Par itération, j'entends le nombre d'exécutions du script, en utilisant cette formule bash, qui génère un fichier .txt avec les résultats de chaque itération :

~ " for i in {1..10}

do

node got.js > "${i}.txt"

echo "${i} done"

done

Comme vous le verrez en consultant le tableau détaillé des résultats, les temps sont différents pour chaque lot et Axios n'est parfois pas le plus rapide. Dans l'ensemble, cependant, Axios a obtenu un temps de réponse moyen de 387 millisecondes, soit une demi-seconde de plus que ses adversaires. Got et Fetch ont eu un temps de réponse très similaire d'environ 435 millisecondes en moyenne. Ceci étant dit, si la vitesse est importante pour votre projet, Axios est peut-être le meilleur client HTTP pour vous.

Comment envoyer des en-têtes HTTP avec Axios

Personnellement, je trouve que l'apprentissage par la pratique donne des résultats presque instantanés. Maintenant que nous avons les connaissances et les outils pour envoyer des en-têtes HTTP, commençons à travailler sur un petit projet. Dans cette section, nous allons créer un nouveau projet Node, installer Axios et l'utiliser pour envoyer des en-têtes HTTP à un serveur.

Mise en place du projet

Avant d'aller plus loin, assurez-vous que votre machine est bien équipée :

• Node JS - vous pouvez le télécharger ici
• Un IDE - mon IDE quotidien est Visual Studio Code

Conseil: vous pouvez vérifier si Node JS est installé en tapant la commande suivante dans votre terminal :

~ " node -v 

v19.3.0

Créons maintenant un nouveau dossier et ouvrons-le dans notre IDE. Si vous utilisez une machine de type UNIX (Mac ou Linux), vous pouvez créer un nouveau répertoire de manière programmatique, à partir de votre terminal, en tapant la commande suivante :

~ " mkdir axios_project && cd axios_project 

~ " npm init -y

~ " npm i axios

~ " touch index.js

~ " code .

Ces commandes vont :

1. Créez un nouveau répertoire (nommé 'axios_project') et naviguez-y.
2. Initialiser un nouveau projet Node JS dans le répertoire
3. Installer `axios` dans votre projet
4. Créer un nouveau fichier "index.js".
5. Ouvrez votre IDE sur le projet en cours

Code à apprendre

Il existe en fait plusieurs façons d'envoyer des en-têtes HTTP avec Axios. Par exemple, vous pouvez utiliser un objet config comme décrit ici, ou vous pouvez utiliser les méthodes d'instance, qui fusionneront automatiquement la configuration que vous passez avec la configuration de l'instance. Vous pouvez également utiliser l'objet `axios.defaults.headers.common` pour définir les en-têtes par défaut pour toutes les requêtes Axios.

Notez également qu'Axios est un client HTTP basé sur les promesses. Cela signifie que nous devrons soit attendre la réponse à l'intérieur d'une fonction asynchrone, soit résoudre la réponse.

En gardant ces deux aspects à l'esprit, commençons à coder. Nous travaillerons dans le fichier "index.js". Pour plus de commodité, récapitulons ce que nous devons faire au préalable :

1. Importer `axios` dans notre fichier
2. Définir un objet de configuration qui contiendra nos en-têtes
3. Transmettre la configuration à `axios` pour effectuer une requête
4. Imprimer la réponse dans notre terminal

#1 : Envoyer une requête GET en utilisant l'objet config

import axios from "axios"

const config = {

   method: 'GET',

   url: 'https://httpbin.org/headers',

   headers: {

       'HTTP-Axios-Headers': 'This is my custom header.'

   }

}

axios(config)

   .then((response) => {

       console.log(response)

   })

   .catch((err) => {

       console.log(err)

   })

L'envoi d'en-têtes HTTP avec Axios est aussi simple que possible. Pour exécuter ce script, il suffit de lancer la commande suivante dans votre terminal :

~ » node index.js  

{

  status: 200,

  statusText: 'OK',

  headers: ...,

  config: ...,

  request: ...,

  data: {

    headers: {

      'Accept': 'application/json, text/plain, */*',

      'Accept-Encoding': 'gzip, compress, deflate, br',

      'Host': 'httpbin.org',

      'Http-Axios-Headers': 'This is my custom header.',

      'User-Agent': 'axios/1.2.2',

      'X-Amzn-Trace-Id': 'Root=1-63b54d94-7656f02113483dfa036c476c'

    }

  }

}

La réponse entière est assez volumineuse et suit ce schéma. Cependant, ce qui nous intéresse le plus est le `data`, qui contient la réponse réelle que nous avons reçue du serveur. Maintenant, regardons la réponse ci-dessus. Rappelez-vous que nous avons envoyé un en-tête personnalisé `Http-Axios-Headers` au serveur et, comme vous pouvez le voir, le serveur l'a bien reçu.

#2 : Envoyer une requête POST en utilisant l'alias de méthode

import axios from "axios"

const data = {

   'foo':'bar'

}

const config = {

   headers: {

       'HTTP-Axios-Headers': 'This is my custom header.'

   }

}

axios.post('http://httpbin.org/post', data, config)

   .then(response => console.log(response.data))

   .catch(err => console.log(err))

Notez que pour envoyer une requête POST, j'ai ajouté un nouvel objet `data` à notre script et j'ai également modifié l'URL. Maintenant, si vous exécutez le script, vous verrez que ce sont les données reçues du serveur :

{

  args: {},

  data: '{"foo":"bar"}',

  files: {},

  form: {},

  headers: {

    Accept: 'application/json, text/plain, */*',

    'Accept-Encoding': 'gzip, compress, deflate, br',

    'Content-Length': '13',

    'Content-Type': 'application/json',

    Host: 'httpbin.org',

    'Http-Axios-Headers': 'This is my custom header.',

    'User-Agent': 'axios/1.2.2',

    'X-Amzn-Trace-Id': 'Root=1-63b5508a-3a86493f087662d3169e80ee'

  },

  json: { foo: 'bar' },

  origin: '49.12.221.20',

  url: 'http://httpbin.org/post'

}

Comment utiliser les en-têtes HTTP dans Axios pour le Web Scraping

Si vous envisagez d'utiliser Axios pour faire du web scraping, veuillez noter que la plupart des sites web ont des règles de protection qui bloquent les requêtes provenant de logiciels automatisés (y compris les web scrapers).

L'utilisation des en-têtes HTTP, en particulier l'en-tête "User-Agent", peut être une technique utile pour éviter d'être détecté lors d'un "web scraping". L'en-tête User-Agent identifie le navigateur et le système d'exploitation du client auprès du serveur, et les serveurs web peuvent servir des contenus différents ou bloquer des requêtes en fonction de ces informations. En définissant l'en-tête User-Agent, vous pouvez imiter un navigateur web courant, ce qui augmente vos chances de contourner certains mécanismes de détection.

Voici un exemple d'utilisation de l'en-tête User-Agent avec Axios pour éviter d'être détecté lors d'une opération de "web scraping" :

import axios from "axios"

axios.defaults.headers.common['User-Agent'] = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3'

axios({

   method: 'GET',

   url: 'https://httpbin.org/get',

}).then(response => {

   console.log(response.data)

});

Notez que cette fois-ci, j'ai utilisé l'option config defaults d'Axios, qui applique l'en-tête à toutes les demandes à venir. Dans cet exemple, l'en-tête User-Agent est défini pour imiter le navigateur Chrome sur un système d'exploitation Windows 10. Vous pouvez essayer d'utiliser différentes valeurs User-Agent ou une variété d'en-têtes différents pour voir ce qui fonctionne le mieux pour votre cas d'utilisation spécifique.

Il convient de noter que si la modification de l'en-tête User-Agent peut vous aider à éviter la détection dans certains cas, il ne s'agit pas d'une méthode infaillible, et les serveurs web peuvent toujours être en mesure d'identifier que vous utilisez un scraper web. Il est donc conseillé d'utiliser une combinaison de techniques pour éviter d'être détecté et rester dans les limites des conditions d'utilisation du site web.

Conclusions

L'utilisation des en-têtes HTTP avec Axios (ou avec tout autre client HTTP d'ailleurs) peut augmenter l'efficacité de la communication entre un serveur et un client. De plus, cela peut même vous aider à éviter d'être détecté lorsque vous construisez un scraper web. En fait, à WebScrapingAPI, nous utilisons différents agents utilisateurs comme l'une des techniques d'évasion de base.

Bien entendu, la détection ne se limite pas aux agents utilisateurs, mais c'est un bon point de départ. Voici un tutoriel intéressant sur la façon d'éviter que votre adresse IP soit bannie lorsque vous faites du web scraping, qui vous aidera à mieux comprendre le fonctionnement des évasions.

Par ailleurs, saviez-vous que l'API Web Scraping vous permet de définir des en-têtes personnalisés pour vos requêtes ? Si ce n'est pas le cas, vous pouvez en savoir plus ici.