Les dernières actualités d'Alsacreations.com
L'attribut contenteditable
en HTML permet de rendre des éléments éditables directement dans le navigateur, en quelque sorte un super-textarea qui permet la mise en forme dans tout élément HTML parce qu'on peut y placer ce qu'on veut... Ce qui est justement le problème de sa valeur par défaut true
: cette totale liberté permet l'insertion de balises <script>
, ce qui peut créer des failles de sécurité et des comportements indésirables.
â¡ï¸ C'est là qu'intervient contenteditable="plaintext-only"
, une valeur moins connue - car récente - mais extrêmement utile, car contrairement à contenteditable="true"
ou contenteditable
qui accepte tout code HTML, contenteditable="plaintext-only"
esquive automatiquement tout formatage et ne conserve que le texte brut.
contenteditable="true"
ou contenteditable
On obtient le comportement par défaut :
contenteditable="plaintext-only"
ðChamp de titre ou nom, dans un CMS, enregistré ensuite en asynchrone par JavaScript / fetch.
<h1 contenteditable="plaintext-only" class="editable-title">
Cliquez pour modifier le titre
</h1>
Zone de commentaire :
<div contenteditable="plaintext-only" class="comment-input" placeholder="Votre commentaire...">
</div>
Étiquettes ou tags :
<span contenteditable="plaintext-only" class="tag">
Tag modifiable
</span>
Pour récupérer le contenu, avec plaintext-only
, les propriétés textContent
et innerHTML
donnent le même résultat.
const element = document.querySelector('[contenteditable="plaintext-only"]');
const content = element.textContent; // Recommandé
const htmlContent = element.innerHTML; // Sera identique à textContent
contenteditable="plaintext-only"
est bien supporté par les navigateurs actuels, pour plus de détails consultez le tableau de support Caniuse.
Même avec plaintext-only
, il reste obligatoire de toujours valider ce que vous recevez côté serveur car rien n'empêchera quelqu'un d'aller vite désactiver cet attribut ou modifier son comportement, voire de forger une simple requête HTTP pour passer outre. Par exemple en PHP on peut prévoir :
$userInput = trim($_POST['content']);
$cleanInput = htmlspecialchars($userInput, ENT_QUOTES, 'UTF-8');
<br>
sont convertis en retours à la ligne simples&
devient &