Modification du code source des articles du centre d’aide

L’éditeur de code source vous permet de modifier le code source HTML des articles et des blocs de contenu du centre d’aide. Cela vous permet de personnaliser et de styliser le contenu du centre d’aide de manières qui ne sont pas possibles avec l’éditeur WYSIWYG standard.

Pour assurer la sécurité de votre centre d’aide et fournir la meilleure expérience possible aux utilisateurs finaux, Zendesk limite le code HTML que vous pouvez utiliser dans les articles et les blocs de contenu.

Cet article aborde les sujets suivants :

HTML pris en charge
Éléments de conteneurs HTML vides
HTML non sécurisé
HTML inconnu
Stylisation du code HTML dans les articles d’aide
Limitations HTML pour les blocs de contenu

HTML pris en charge

Cette section répertorie les éléments, les attributs et le contenu HTML pris en charge dans les articles et les blocs de contenu. En plus des attributs répertoriés, les éléments HTML de cette section prennent aussi en charge les attributs globaux suivants :

id, class, aria-*, data-*, title

Important : pour les blocs de contenu, l’éditeur de code source limite l’utilisation des attributs id et class. Pour en savoir plus, consultez Limitations HTML pour les blocs de contenu.

Certains éléments HTML prennent en charge l’attribut style incorporé, mais ne prennent en charge les déclarations de style que pour des propriétés spécifiques. Par exemple, l’élément span ne vous permet de définir que les propriétés background-color ou color en utilisant un attribut style incorporé. Ces propriétés sont documentées comme styles incorporés autorisés.

Attention : Dans la plupart des cas, Zendesk recommande l’utilisation des classes CSS plutôt que des styles incorporés pour la stylisation du contenu du centre d’aide. Consultez Stylisation du code HTML dans les articles d’aide.

a

Attributs : href, target, title, name, rel

Protocoles autorisés pour href : http, https, mailto, ftp, sftp, sms, tel

Contenu : @text, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

abbr

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

address

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

blockquote

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

br

Attributs : attributs globaux uniquement

caption

Attributs : attributs globaux uniquement

cite

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

code

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

col

Attributs : span

colgroup

Attributs : attributs globaux uniquement

Contenu : col

dd

Attributs : attributs globaux uniquement

del

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

dfn

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

div

Attributs : attributs globaux uniquement

dl

Attributs : attributs globaux uniquement

Contenu : dd, td

dt

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

em

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

figcaption

Attributs : attributs globaux uniquement

figure

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figcaption, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

h1

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h2

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h3

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h4

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h5

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h6

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

hr

Attributs : attributs globaux uniquement

iframe

Attributs : src, allow, allowfullscreen, mozallowfullscreen, webkitallowfullscreen, oallowfullscreen, msallowfullscreen, name, class, width, height, frameborder

Styles incorporés autorisés : aspect-ratio, width

Protocoles autorisés pour src : http, https, blob, data

Domaines autorisés pour les incorporations : https://content.jwplatform.com/, https://fast.wistia.com/, https://play.vidyard.com/, https://player.vimeo.com/, https://players.brightcove.net/, https://web.microsoftstream.com/, https://www.loom.com/, https://www.microsoft.com/, https://www.youtube-nocookie.com/, https://www.youtube.com/

img

Attributs : src, alt, name

Styles incorporés autorisés : height, width

Protocoles autorisés pour src : http, https, blob, data

ins

Attributs : cite, datetime

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

kbd

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

li

Attributs : attributs globaux uniquement

ol

Attributs : start, type, reversed

Contenu : li

a

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

pre

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

samp

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

small

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

origine

Attributs : src, type

Protocoles autorisés pour src : http, https, blob, data

span

Attributs : name

Styles incorporés autorisés : background-color, color

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

strong

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

sub

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

sup

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

tableau

Attributs : attributs globaux uniquement

Contenu : caption, colgroup, tbody, tfoot, thead, tr

tbody

Attributs : attributs globaux uniquement

Contenu : tr

td

Attributs : colspan, rowspan

Styles incorporés autorisés : height, text-align, vertical-align, width

tfoot

Attributs : attributs globaux uniquement

Contenu : tr

th

Attributs : colspan, rowspan, scope

Styles incorporés autorisés : height, text-align, vertical-align, width

thead

Attributs : attributs globaux uniquement

Contenu : tr

tr

Attributs : attributs globaux uniquement

Contenu : td, th

track

Attributs : default, kind, label, src, srclang

Protocoles autorisés pour src : http, https, blob, data

ul

Attributs : attributs globaux uniquement

Contenu : li

var

Attributs : attributs globaux uniquement

Contenu : @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

video

Attributs : src, height, width, controls

Protocoles autorisés pour src : http, https, blob, data

Contenu : source, track

Éléments de conteneurs HTML vides

Zendesk supprime automatiquement la plupart des éléments de conteneurs vides, commei ou span. De manière générale, ces éléments doivent contenir du contenu pour être rendus. Zendesk ne supprime pas les balises p vides. À la place, Zendesk insère   comme contenu de l’élément. Exemple :

<p>&nbsp;</p>

HTML non sécurisé

Par défaut, Zendesk considère les éléments HTML suivants comme non sécurisés.

Éléments HTML non sécurisés

applet, button, embed, form, input, object, script, textarea, style

Traitement du code HTML non sécurisé dans les articles

Pour les articles, l’éditeur de code source ne supprime pas les éléments HTML non sécurisés ni les attributs HTML non pris en charge. À la place, ils ont exclus des réponses HTTP utilisées pour rendre les articles du centre d’aide. Par conséquent, les articles risquent de ne pas s’afficher comme prévu.

Code HTML non sécurisé dans les articles

Vous pouvez ignorer les paramètres par défaut pour autoriser les éléments HTML non sécurisés dans les articles du centre d’aide. Ce paramètre n’affecte pas les éléments HTML non sécurisés dans les blocs de contenu.

Attention : si vous procédez ainsi, du code malveillant risque de s’exécuter lorsque des utilisateurs ouvrent un article dans un navigateur.

Pour autoriser du code HTML non sécurisé dans les réponses HTTP

Dans Guide, cliquez sur l’icône Paramètres () dans la barre latérale.
Sous Sécurité, sélectionnez l’option Afficher le contenu non sécurisé.
Cliquez sur Mettre à jour.

Traitement du code HTML non sécurisé dans les blocs de contenu

Pour les blocs de contenu, l’éditeur de code source supprime les éléments HTML non sécurisés et les attributs non pris en charge. Le contenu d’un élément non sécurisé est placé dans un élément p comme expliqué dans HTML inconnu. Vous ne pouvez pas autoriser d’éléments HTML non sécurisés dans les blocs de contenu

HTML inconnu

Tout élément HTML qui n’est pas pris en charge ou qui n’est pas sécurisé est considéré comme inconnu. Zendesk supprime toute balise inconnue et place le contenu de cette balise dans un élément p.

Par exemple, le code HTML suivant contient un élément mytag inconnu.

<mytag>Hello world!</mytag>

L’élément mytag est supprimé des réponses HTTP utilisées pour rendre le centre d’aide. Son contenu est placé dans un élément p.

<p>Hello world!</p>

Stylisation du code HTML dans les articles d’aide

Dans la mesure du possible, Zendesk conseille d’utiliser l’attribut class et les classes CSS connexes pour la stylisation du code HTML dans les articles cu centre d’aide. Les classes CSS doivent être définies dans le thème du centre d’aide. Pour en savoir plus, consultez Personnalisation du thème de votre centre d’aide.

Quand vous créez des règles CSS pour le thème de votre centre d’aide, évitez d’utiliser des sélecteurs imbriqués comme div.container > p > img. Ces types de règles sont difficiles à maintenir et peuvent cibler des éléments qui ne devraient pas l’être. Utilisez plutôt des sélecteurs qui stylisent directement une classe, comme .container-image. Puis ajoutez directement la classe aux éléments HTML affectés en utilisant l’élément class. Exemple :

évitez d’utiliser l’attribut style pour appliquer un style incorporé aux éléments HTML. Le style incorporé est difficile à maintenir et peut déboucher sur des incohérences.

Limitations HTML pour les blocs de contenu

Pour les blocs de contenu, l’éditeur de code source supprime tous les attributs id ou class sauf :

Les balises de titre, comme <h2>, conservent leur attribut id.
Les balises <div> conservent leur attribut class.

HTML pris en charge

a

abbr

address

blockquote

br

caption

cite

code

col

colgroup

dd

del

dfn

div

dl

dt

em

figcaption

figure

h1

h2

h3

h4

h5

h6

hr

iframe

img

ins

kbd

li

ol

a

pre

samp

small

origine

span

strong

sub

sup

tableau

tbody

td

tfoot

th

thead

tr

track

ul

var

video

Éléments de conteneurs HTML vides

HTML non sécurisé

Traitement du code HTML non sécurisé dans les articles

Code HTML non sécurisé dans les articles

Traitement du code HTML non sécurisé dans les blocs de contenu

HTML inconnu

Stylisation du code HTML dans les articles d’aide

Limitations HTML pour les blocs de contenu

0 Commentaires