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

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>

<!-- data setting escaped - XML demo. Compatibility : Gadget Version 1 & 2. Created and provided by Blogger Code PE. Author : Soraya Lambrechts URL : https://bloggercode-blogconnexion.blogspot.com/2016/04/data-parameters-escaped.html --> <b:includable id='main'> <b:comment>Example</b:comment> original value : <textarea><b:eval expr='data:view.search.resultsMessageHtml'/></textarea> escaped value : <textarea><b:eval expr='data:view.search.resultsMessageHtml.escaped'/></textarea> jsEscaped value : <textarea><b:eval expr='data:view.search.resultsMessageHtml.jsEscaped'/></textarea> jsonEscaped value : <textarea><b:eval expr='data:view.search.resultsMessageHtml.jsonEscaped'/></textarea> cssEscaped value : <textarea><b:eval expr='data:view.search.resultsMessageHtml.cssEscaped'/></textarea> </b:includable>

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>

<!-- data setting escaped - XML demo. Compatibility : Gadget Version 1 & 2. Created and provided by Blogger Code PE. Author : Soraya Lambrechts URL : https://bloggercode-blogconnexion.blogspot.com/2016/04/data-parameters-escaped.html --> <b:includable id='main'> <b:comment>Example</b:comment> original value : <textarea><b:eval expr='"Résultat : " + data:view.search.resultsMessageHtml'/></textarea> escaped value : <textarea><b:eval expr='("Résultat : " + data:view.search.resultsMessageHtml).escaped'/></textarea> jsEscaped value : <textarea><b:eval expr='("Résultat : " + data:view.search.resultsMessageHtml).jsEscaped'/></textarea> jsonEscaped value : <textarea><b:eval expr='("Résultat : " + data:view.search.resultsMessageHtml).jsonEscaped'/></textarea> cssEscaped value : <textarea><b:eval expr='("Résultat : " + data:view.search.resultsMessageHtml).cssEscaped'/></textarea> </b:includable>

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).

É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>

<!-- data setting escaped - XML demo. Compatibility : Gadget Version 1 & 2. Created and provided by Blogger Code PE. Author : Soraya Lambrechts URL : https://bloggercode-blogconnexion.blogspot.com/2016/04/data-parameters-escaped.html --> <b:includable id='main'> <b:comment>Example</b:comment> <a expr:href='data:view.url' expr:title='data:view.title.escaped'> <data:view.title/> </a> </b:includable>

É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>

<!-- data setting escaped - XML demo. Compatibility : Gadget Version 1 & 2. Created and provided by Blogger Code PE. Author : Soraya Lambrechts URL : https://bloggercode-blogconnexion.blogspot.com/2016/04/data-parameters-escaped.html --> <b:includable id='main'> <b:comment>Example</b:comment> JS Escaped : <span id='example'></span> <script> var bloggerstring = "<data:view.title.jsEscaped/>"; document.getElementById("example").innerHTML = bloggerstring; </script> </b:includable>

É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>

<!-- data setting escaped - XML demo. Compatibility : Gadget Version 1 & 2. Created and provided by Blogger Code PE. Author : Soraya Lambrechts URL : https://bloggercode-blogconnexion.blogspot.com/2016/04/data-parameters-escaped.html --> <b:includable id='main'> <b:comment>Example</b:comment> JSON Escaped : Consultez le code source de cette page pour voir le résultat. <script type='application/ld+json'> { "@context": "https://schema.org/", "@type": "Recipe", "name": "<data:view.title.jsonEscaped/>" } </script> </b:includable>

É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>

<!-- data setting escaped - XML demo. Compatibility : Gadget Version 1 & 2. Created and provided by Blogger Code PE. Author : Soraya Lambrechts URL : https://bloggercode-blogconnexion.blogspot.com/2016/04/data-parameters-escaped.html --> <b:includable id='main'> <b:comment>Example</b:comment> CSS Escaped : Consultez le code source de cette page pour voir le résultat. <style> body { background-image:url(<data:view.featuredImage.cssEscaped/>); } </style> </b:includable>

Les autres réglages de données

• AdSense
Attribution
Blog
BlogArchive
BloggerButton
BlogList
BlogSearch
ContactForm
FeaturedPost
Feed
Followers
Header
HTML
Image
Label
LinkList
PageList
PopularPosts
Profile
ReportAbuse
Stats
Subscribe
Text
TextList
Translate
Wikipedia
• share
author
timestamp
comments
labels
location
icons
• red
green
blue
alpha
transparent
inverse
• any / notEmpty
empty
• canonical
• color
image
• name
language
country
variant
• escaped
cssEscaped
jsEscaped
jsonEscaped
• day
month
year
dayOfWeek
dayOfMonth
dayOfYear
• first
last
• width
height
originalWidth
originalHeight
• http
https
• iso8601
• isResizable
• languageAlignment
languageDirection
• size / length (array)
• size / length (string)
• size (array[image])
url (array[image])
• size (skin font)
family
• isYoutube
youtubeMaxResDefaultUrl

Retourner à l'introduction