Passer au contenu principal

Échappement/Déséchappement de Chaîne

Un outil pour échapper et désechapper les caractères spéciaux dans les chaînes pour divers formats. Essentiel pour le traitement des données, le développement d'API et le travail frontend!

Examples:

Formats Pris en Charge​

📝 JSON​

Échappe les caractères spéciaux pour le format JSON.

Échappement:

  • Nouvelle ligne → \n
  • Tabulation → \t
  • Guillemets → \"
  • Barre oblique inverse → \\

Cas d'usage:

  • Requête/réponse API
  • Fichiers de configuration
  • Stockage de données

🌐 HTML​

Échappe les caractères spéciaux HTML pour prévenir les attaques XSS.

Échappement:

  • < → &lt;
  • > → &gt;
  • & → &amp;
  • " → &quot;
  • ' → &#39;

Cas d'usage:

  • Affichage d'entrée utilisateur
  • Prévention XSS
  • Génération HTML

🔗 URL​

Encode les caractères spéciaux pour une transmission URL sécurisée.

Échappement:

  • Espace → %20
  • Caractères spéciaux → Encodage en pourcentage
  • Caractères réservés → Encodés

Cas d'usage:

  • Paramètres de requête
  • Génération d'URL
  • Appels d'endpoint API

💻 JavaScript​

Échappe les caractères spéciaux pour les chaînes JavaScript.

Échappement:

  • Nouvelle ligne → \n
  • Guillemets → \' ou \"
  • Barre oblique inverse → \\
  • Unicode → \uXXXX

Cas d'usage:

  • Génération de script dynamique
  • Traitement de littéraux de modèle
  • Génération de code

📄 XML​

Échappe les caractères spéciaux pour le format XML/HTML.

Échappement:

  • < → &lt;
  • > → &gt;
  • & → &amp;
  • " → &quot;
  • ' → &apos;

Cas d'usage:

  • Génération de documents XML
  • API SOAP
  • Flux RSS/Atom

Exemples Pratiques​

Affichage d'Entrée Utilisateur​

// Prévenir XSS
const userInput = '<script>alert("XSS")</script>';
const escaped = escapeHTML(userInput);
// Résultat: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;
document.getElementById('output').textContent = escaped;

Requête API​

// Échappement JSON
const data = {
  message: 'Bonjour\nMonde\t!'
};
const jsonString = JSON.stringify(data);
// Résultat: {"message":"Bonjour\\nMonde\\t!"}

Paramètres de Requête URL​

// Encodage URL
const searchQuery = 'recherche test';
const encodedQuery = encodeURIComponent(searchQuery);
// Résultat: recherche%20test
const url = `https://api.example.com/search?q=${encodedQuery}`;

Génération de Code Dynamique​

// Échappement JavaScript
const userMessage = "C'est un \"super\" jour!";
const code = `console.log('${userMessage.replace(/'/g, "\\'")}');`;
// Résultat: console.log('C\'est un \"super\" jour!');

Conseils d'Utilisation​

1. Sélection du Format​

  • JSON: Pour la communication API ou le stockage de données
  • HTML: Pour afficher du contenu sur des pages web
  • URL: Pour les paramètres de requête ou les segments de chemin
  • JavaScript: Pour générer du code dynamiquement
  • XML: Pour les documents XML ou les flux RSS

2. Quand l'Échappement est Nécessaire​

  • ✅ Affichage d'entrée utilisateur
  • ✅ Transmission de données API
  • ✅ Génération de requête de base de données
  • ✅ Passage de paramètres URL
  • ✅ Génération de code dynamique

3. Quand le Désechappement est Nécessaire​

  • ✅ Traitement des données API reçues
  • ✅ Analyse des paramètres de requête
  • ✅ Restauration des données stockées
  • ✅ Traitement des données encodées en URL

Considérations de Sécurité​

Prévention XSS​

Toujours échapper lors de l'affichage d'entrée utilisateur:

// ❌ Dangereux
element.innerHTML = userInput;

// ✅ Sûr
element.textContent = userInput;
// ou
element.innerHTML = escapeHTML(userInput);

Prévention d'Injection SQL​

Utiliser des requêtes paramétrées au lieu d'échapper:

// ❌ Dangereux
const query = `SELECT * FROM users WHERE name = '${userInput}'`;

// ✅ Sûr
const query = 'SELECT * FROM users WHERE name = ?';
db.execute(query, [userInput]);

Notes​

  • Différents formats nécessitent différentes méthodes d'échappement
  • Échappement ≠ Encodage (concepts différents)
  • La validation côté serveur est également nécessaire
  • Attention au double échappement/désechappement
  • Utiliser les fonctions intégrées pour chaque langue

Outils Connexes​