BBCode

Un article de Wikipédia, l'encyclopédie libre.
Aller à : navigation, rechercher

BBCode est l'abréviation de Bulletin Board Code, inventé à travers le langage PHP pour simplifier la mise en forme des messages sur les forums de discussion. Par abus de langage, les éléments du BBCode sont appelés balises. Le nom d'une balise est délimité par les crochets [ et ], contrairement au HTML où les caractères < et > sont utilisés. Certaines balises ont une propriété, aussi appelée attribut, dont la valeur est assignée à la balise à l'aide du symbole =.

Fonctionnement du BBCode[modifier | modifier le code]

Balisage du texte[modifier | modifier le code]

L'utilisateur met son texte en forme en insérant les balises BBCode prises en charge par le forum ou site internet sur lequel il écrit. Les balises BBCode sont délimitées par des crochets (« [ » et « ] »). Le principe est similaire à celui du langage HTML : on encadre le passage à mettre en forme avec une balise ouvrante et une balise fermante. Par exemple, dans ce message : « Albert Camus est l'auteur de [i]La Peste[/i]. », les mots « La Peste » à l'intérieur de la balise [i]...[/i] seront affichés en italique.

C'est le propriétaire du forum (ou du site) qui détermine la liste des balises BBCode disponibles et leurs noms. Contrairement au HTML, langage standardisé dans lequel les noms et la syntaxe des balises sont déterminés par une autorité centrale (le World Wide Web Consortium), il n'existe aucun standard pour le BBCode. Il n'y a que des conventions tacites. Par exemple, la balise [i] permet de mettre le texte en italique sur de nombreux sites, mais ce n'est pas une règle absolue. Plus la balise est spécifique, plus les usages ont tendance à varier. On rencontre au moins quatre noms de balises BBCode différents pour dissimuler un texte ([hide], [hidden], [spoil], [spoiler]).

En ce qui concerne la structure des balises, le BBCode suit les principes généraux des langages de balisage :

  • Toute balise ouverte doit être fermée (sauf si elle est spécifiée autofermante).

Exemple : Le texte « Ceci est un mot en [i]italique » est invalide car il manque la balise [/i] fermante.

  • Lorsque des balises sont imbriquées, elles doivent être fermées dans le bon ordre.

Exemple de syntaxe invalide : « [g][i]gras et italique[/g][/i] »
Exemple de syntaxe valide : « [g][i]gras et italique[/i][/g] »

Exemple : dans la balise « [color=red]...[/color] », l'attribut "red" précise que l'on veut colorer le texte en rouge.

Affichage du texte[modifier | modifier le code]

Une fois que le message a été envoyé au site, ce dernier doit effectuer un traitement avant de pouvoir l'afficher aux internautes. En effet, du fait de l'absence totale de standardisation du BBCode, aucun navigateur web n'est capable d'interpréter ses balises. Le site doit être doté d'un convertisseur qui transformera les balises BBCode en balises HTML, le langage universel des pages web.

Si elles sont mal réalisées, ces conversions peuvent donner lieu à des failles de sécurité (voir plus bas).

Bien que le BBCode soit très majoritairement utilisé pour produire du HTML, il peut être converti dans d'autres langages si nécessaire, par exemple en XML.

Listes de balises[modifier | modifier le code]

Les balises BBCode les plus courantes sont les suivantes :

Fonction du BBCode Syntaxe Aperçu
Texte en gras [b]Texte[/b] Texte
Texte en italique [i]Texte[/i] Texte
Texte souligné [u]Texte[/u] Texte
Texte barré [s]Texte[/s] ou aussi [strike]Texte[/strike] Texte
Texte colorié en rouge [color=red]Texte[/color] Texte
Police du texte [font=Arial]Texte[/font] Texte
Lien hypertexte [url]URL du lien[/url]

[url=URL du lien]Titre du lien[/url]

http://fr.wikipedia.org

Wikipédia

Image [img]URL de l'image[/img]
Lien hypertexte et image [url=URL du lien][img]Url de l'image[/img][/url]
Cacher [hide=Titre du sous-dossier]Texte, image, couleur de texte, vidéo, etc[/hide]

Il est aussi possible de rencontrer :

  • Texte cité : [quote="Untel"]Texte cité de Untel[/quote] ; On trouve aussi [quote]Texte mis en valeur/cité[/quote]
  • Texte de taille différente : [size=9]PETIT[/size]
  • Texte de couleur : [color=code hexadécimal correspondant à une couleur]texte[/color]
  • Texte aligné à droite : [right]Texte[/right]
  • Texte aligné à gauche : [left]Texte[/left]
  • Texte centré : [center]Texte[/center]
  • Texte justifié : [justify]Texte[/justify]
  • Texte défilant : [scroll]Texte[/scroll]
  • Texte remontant [updown]Texte[/updown]
  • Texte avec effet miroir : [flipv]Texte[/flipv]
  • Texte avec un effet de flou : [blur]Texte[/blur]
  • Texte inséré sous une ligne : Texte[hr]Texte
  • Texte caché apparaissant quand on clique sur « Spoiler » : [spoiler]Texte[/spoiler]
  • Texte caché apparaissant quand on clique sur une phrase ou un mot : [hide="Titre du spoiler"]Texte[/hide]
  • Animation flash : [embed-flash(width, height)]animation flash[/embed-flash]
  • Texte avec un effet dégradé de couleur : [fade]Texte[/fade] (avec javascript)
  • Liste :
    • (utilisez le saut de ligne pour passer au deuxième point) : [list]première phrase puis saut de ligne pour changer[/list]
    • Pour des listes simples (utilisez des astérisques entre des accolades pour passer d'une ligne à l'autre) : [list] [*]Première phrase[*]Deuxième phrase[/list]
    • Pour des listes aux lignes numérotées (utilisez des astérisques entre des accolades pour passer d'une ligne à l'autre) : [list=1] [*]Première phrase [*]Deuxième phrase[/list]
    • Pour des listes aux lignes numérotées alphabétiquement (utilisez des astérisques entre des accolades pour passer d'une ligne à l'autre) : [list=a] [*]Première phrase [*]Deuxième phrase[/list]
  • Indice : Texte[sub]Indice[/sub]
  • Exposant : Texte[sup]Exposant[/sup]

Avantages[modifier | modifier le code]

Le principal avantage du BBCode est que sa syntaxe est souvent plus concise et explicite que le HTML. La mise en forme est ainsi plus conviviale, même pour les utilisateurs non familiers avec le concept de balisage. Par exemple, comparer ces deux syntaxes pour mettre un texte en rouge :

  En BBCode : [rouge]Texte[/rouge]
  En HTML :   <span style="color:red">Texte</span>

Le BBCode permet également au webmaster de restreindre le nombre des mises en forme à disposition de ses utilisateurs. Ceci permet, d'une part, de conserver une cohérence visuelle (par exemple, la taille, la couleur et les marges des titres seront identiques) et, d'autre part, d'empêcher l'emploi de mises en forme jugées peu esthétiques (surlignement, texte clignotant, etc.).

Inconvénients[modifier | modifier le code]

L'absence de normalisation des balises BBCode oblige l'utilisateur à s'adapter en fonction du forum ou site sur lequel il écrit. Certaines balises fonctionneront sur un site mais pas sur un autre, d'autres porteront un autre nom, ou porteront le même nom mais avec une syntaxe différente, etc.

Le BBCode pose un problème plus global d'interopérabilité. Il est souvent impossible de copier-coller un message sur plusieurs forums sans adapter son balisage. Par ailleurs, si un webmaster change le système de gestion de contenu de son site, certaines balises utilisées dans les anciens messages risquent de ne plus fonctionner.

Sentiment erroné de sécurité[modifier | modifier le code]

Contrairement à une idée répandue, le BBCode ne permet pas, par lui-même, d'empêcher les injections de code malveillant. Seule la mise en place de procédures de filtrage du texte envoyé permet la sécurisation. L'existence ou non de ce filtrage étant indépendante du format des données de départ, un texte formaté en BBCode peut tout à fait contenir du code malveillant et, inversement, l'utilisateur peut être autorisé à saisir des balises HTML sans que cela crée pour autant de faille de sécurité.

Par exemple[1], ce BBCode destiné à insérer une image :

  [img]http://sitelambda.com/image.jpg[img]

devient normalement, après conversion en HTML :

  <img src="http://sitelambda.com/image.jpg" />

On peut tenter d'y injecter du code malveillant en fermant prématurément le guillemet (....jpg") et en ouvrant une instruction Javascript non prévue (onerror="...) :

 [img]http://sitelambda.com/image.jpg" onerror="alert{location}[/img]

Si le convertisseur se contente de récupérer le contenu de la balise sans le contrôler, il produira ce code HTML potentiellement dangereux :

  <img src="http://sitelambda.com/image.jpg" onerror="alert{location}" />

Cette faille de sécurité provient de l'absence de filtrage des données. Dans cet exemple, le convertisseur aurait dû s'assurer que la balise [img] ne contient qu'une url. Le niveau de sécurité dépendra ensuite du niveau de tolérance du filtre : a minima, il devrait contrôler que l'adresse commence par « http:// » et ne contient pas d'espace ; la sécurité peut être renforcée en vérifiant, par exemple, que l'extension du fichier ciblé correspond bien à une image (JPEG, PNG, GIF...).

Déclin[modifier | modifier le code]

Dans le contexte du Web 2.0, la simple mise en forme n'est pas toujours suffisante pour permettre de valoriser le contenu de façon sémantique. C'est pourquoi nombreux sont ceux qui passent des BBCodes aux XBBcodes, Wikicodes ou directement au XHTML[réf. nécessaire].

De manière générale, tous les langages de balisage simplifié sont concurrencés par les éditeurs WYSIWYG, qui permettent à l'utilisateur de voir la mise en forme réelle de son texte sans aucune balise apparente, à la manière d'un logiciel de traitement de texte. Un balisage est toujours présent mais, étant géré par un programme et non plus par l'utilisateur, il n'est plus nécessaire de le simplifier au moyen d'un BBCode.


Notes et références[modifier | modifier le code]

  1. Exemple inspiré de kotowicz.net

Voir aussi[modifier | modifier le code]

Articles connexes[modifier | modifier le code]

Liens externes[modifier | modifier le code]

Implementations
Implementations PHP