Ces dernières semaines, l'entreprise Vercel a fait polémique en sortant une nouvelle fonctionnalité, en partie illustrée par le code suivant :

sql`INSERT INTO products (name) VALUES (${formData.get('name')})`;

Si vous survolez ce code, vous n'y verrez sûrement qu'une chaîne de caractère en JavaScript, communément appelée une "template string". Et vous aurez probablement remarqué une potentielle vulnérabilité :  Une faille SQL.

En réalité, rien de tout ça n'est vrai !

Et ce qui fait la différence, c'est ce petit 'sql' juste avant la chaîne de caractères, c'est ce qu'on appelle une "tagged template string" (ou "tagged literal template").

Pour faire simple, ce 'tag' est une fonction qui va prendre en paramètre notre template string et qui va pouvoir la transformer. Dans l'exemple du dessus, le tag 'sql' va échapper certains caractères pour éviter les injections, et il va même exécuter la requête SQL !

Pour montrer le fonctionnement interne de ce genre de tag, voici un exemple de tag template qui va nous permettre de "censurer" des mots inappropriés d'un texte d'entrée :

// List of bad words
const badWords = ['crap', 'darn', 'heck', 'jerk', 'butt', 'douche'];

// Tagged literal function to replace bad words by ****
function safe (strings, ...values) {
  return strings.reduce((acc, str, i) => {
    if(i > values.length - 1) return acc + str;
    const word = badWords.indexOf(values[i]) > -1 ? '****' : values[i];
    return acc + str + (word);
  }, '');
}

const data = 'crap';

// Test without tagged literal
console.log(`Hi, ${data}!`);
// Test with tagged literal
console.log(safe`Hi, ${data}!`);

Sortie :
   > Hi, crap!
   > Hi, ****

Comme vous pouvez le voir, un tag est simplement une fonction où l'on va récupérer toutes les parties de la template string (le template, et les données séparées) pour les traiter.

Retrouvez plus de détails sur cette fonctionnalité sur la page de la documentation MDN dédiée !

À titre personnel, je trouve cette fonctionnalité intéressante, mais comme elle est assez peu connue (et utilisée) des développeurs et développeuses, je pense que la syntaxe peut vite mener à des confusions, à utiliser avec précaution !

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi formateur/coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !

Photo de couverture : Unsplash