BBCode

Un article de Wikipédia, l'encyclopédie libre.
(Redirigé depuis BBcode)
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 =.

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 sale : [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]

On peut aussi faire des combinaisons de « balises » BBCode :

  • Texte défilant en diagonale: [updown][scroll]Texte[/scroll][/updown]

L'enchaînement [scroll][updown]Texte[/scroll][/updown] n'est pas bon car les balises sont alternées (principe identique au HTML). Vérifiez, si vous êtes sur un forum, l'utilisation, l'écriture et même l'existence de certaines des balises présentées.

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.

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

Faux sentiment 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 Javascript malveillant :

 [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 sécurisation 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 (JPG, PNG, GIF...).

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