Les réglages d'échappement de caractères : escaped, jsEscaped, jsonEscaped et cssEscaped

Blogger - html, js, json and css escaped

Les termes escaped, jsEscaped, jsonEscaped et cssEscaped sont des suffixes que l'on ajoute à une donnée Blogger de type string pour échapper son contenu.



Échapper la valeur d'une donnée

Les paramètres d'échappement sont destinés aux données de type string et aux données héritières image, URL, locale, date, message.

Explorateur de données Blogger - Les données de type string

Techniquement, ces paramètres sont des données renfermées dans un objet, qui lui-même est contenu dans la donnée à paramètrer. Les paramètres renvoient une nouvelle valeur de type string correspondant à la chaîne de caractères échappée.

Échantillonnage des ressources

  escaped: string,
  jsEscaped: string,
  jsonEscaped: string,
  cssEscaped: string

En pratique, dans l'éditeur XML du thème, les paramètres s'ajoutent au nom de la donnée de type string ou héritières string et chacun applique une méthode d'échappement spécifique :

  • escaped : Échappement destiné à un langage HTML
  • jsEscaped : Échappement destiné à un script JS
  • jsonEscaped : Échappement destiné au format JSON
  • cssEscaped : Échappement destiné à une feuille de styles

Syntaxes de sortie
<!-- escaped -->
data:string.escaped

<!-- jsEscaped -->
data:string.jsEscaped

<!-- jsonEscaped -->
data:string.jsonEscaped

<!-- cssEscaped -->
data:string.cssEscaped

Exemple avec la donnée universelle data:view.search.resultsMessageHtml (message d'état dans les pages de recherche) :

Exemple
<textarea>

  <!-- escaped -->
  <data:view.search.resultsMessageHtml.escaped/>

  <!-- jsEscaped -->
  <data:view.search.resultsMessageHtml.jsEscaped/>

  <!-- jsonEscaped -->
  <data:view.search.resultsMessageHtml.jsonEscaped/>

  <!-- cssEscaped -->
  <data:view.search.resultsMessageHtml.cssEscaped/>

</textarea>

Résultat de l'exemple
<!-- escaped -->
Affichage des articles associés au libellé <span class='search-label'>titi</span>

<!-- jsEscaped -->
Affichage des articles associés au libellé \x3cspan class\x3d\x27search-label\x27\x3etiti\x3c/span\x3e

<!-- jsonEscaped -->
Affichage des articles associés au libellé \u003cspan class\u003d'search-label'\u003etiti\u003c/span\u003e

<!-- cssEscaped -->
Affichage des articles associés au libellé <span class=\'search-label\'>titi<\/span>


Ces paramètres peuvent également s'ajouter à la suite d'une expression qui est encadrée de parenthèses dont le résultat est de type de type string :

<textarea>

  <!-- escaped -->
  <b:eval expr='("Résultat : " + data:view.search.resultsMessageHtml).escaped'/>

  <!-- jsEscaped -->
  <b:eval expr='("Résultat : " + data:view.search.resultsMessageHtml).jsEscaped'/>

  <!-- jsonEscaped -->
  <b:eval expr='("Résultat : " + data:view.search.resultsMessageHtml).jsonEscaped'/>

  <!-- cssEscaped -->
  <b:eval expr='("Résultat : " + data:view.search.resultsMessageHtml).cssEscaped'/>

</textarea>


Bien que toutes les chaînes de caractères disposent des 4 réglages d'échappement, chacun s'applique dans un environnement bien spécifique (contrairement aux démos ci-dessus).



Blogger Humour - Smiley-Bandito échappe les forces de l'ordre.


Échappement HTML

On applique généralement un échappement HTML, lorsque la valeur est susceptible de contenir des caractères spéciaux qui peuvent rentrer en conflit avec la norme HTML.
Les cas les plus fréquents sont les valeurs entrées par l'utilisateur comme par exemple le titre d'un article, le nom d'un libellé ou encore un critère de recherche, qui parfois contiennent des quotes, des balises, ou toutes sortes de symboles qui n'ont pas leur réèlle place dans un texte poètiquement correct. Lorsque ces valeurs sont injectées par exemple dans une balise HTML, elles peuvent être mal interprètées. Dans ce cas de figure, l'échappement de la valeur est la solution aux problèmes de conflits.
Bien que l'ingénierie Blogger a déjà pris les devants en échappant automatiquement certaines de ces données, toutes n'ont pas eu droit à ce traitement de faveur. Autant se prémunir...

Exemple
<a expr:href='data:view.url' expr:title='data:view.title.escaped'><data:view.title/></a>


Échappement JS

Mêmes remarques que pour l'échappement HTML, lorsqu'une donnée est injectée dans un script JS, elle peut contenir des caractères qui peuvent briser le script.

Exemple
<span id='example'></span>

<script>
  var bloggerstring = "<data:view.title.jsEscaped/>";
  document.getElementById("example").innerHTML = bloggerstring;
</script>


Échappement JSON

JSON est principalement utilisé sur Blogger pour contruire les données structurées à fournir aux moteurs de recherche. Tout comme le HTML et JS, Json a ses propres règles et un échappement respectant les normes de ce langage est parfois requis.

Exemple
<script type='application/ld+json'>
{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "name": "<data:view.title.jsonEscaped/>"
}
</script>


Échappement CSS

Bien qu'on ne peut pas utiliser les données XML dans la section <b:skin> où se situe la principale feuille de styles d'un thème Blogger, rien n'interdit d'ajouter de nouvelles déclarations CSS ailleurs où sont autorisées les expressions Blogger.
Dans ce cas de figure, le traitement des déclarations n'est pas autant « automatisé » que dans <b:skin>. Un échappement à la norme du langage CSS pour certaines valeurs devient une nécessité, comme par exemple pour les URLs des images.

Exemple
<style>

  body { background-image:url(<data:view.featuredImage.cssEscaped/>); }

</style>


Les autres réglages de données

Spotlight

Foire aux questions Blogger (Septembre 2021)

Populaires cette semaine

Blogger-Stats : Les Statistiques Blogger

Les identifiants de contenu Blogger