alerte unsafe-eval pour txt.substring

Version imprimable

Bonjour,

J'ai trouvé ce petit script pour compter les caractères dans un textarea et limiter la longueur du texte saisi.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 window.onload = function() { setTimeout('timer()', 100); }; function compter(f) { var max = 1200; var txt = f.com.value; var nb = txt.length; if (nb > max) { alert("Pas plus de " + max + " caractères dans ce champ"); f.com.value = txt.substring(0, max); nb = max; } f.nbcar.value = nb; } function timer() { compter(document.forms[0]); setTimeout("timer()", 100); }
Cela semble provoquer une alerte unsafe-eval par le CSP (Content Security Policy)/

Où voyez-vous la faille de sécurité ?

Merci d'avance.

Bonjour,
assurément tu n'as pas trouvé ce qui se fait de plus simple et de moins gourmand.

Avec comme HTML :

Code:

<textarea id="commentaire" name="commentaire" value=""></textarea>

une fois le DOM chargé, il te suffit de faire :
Code:

1 2 3 4 5 6 7 8 const domElement = document.getElementById("saisie"); const maxCar = 1200; domElement.addEventListener("keydown", function(e) { console.log(this.value.length); if (this.value.length > maxCar) { // ton code } });
et encore plus simple sans JavaScript :

Code:

<textarea id="commentaire" name="commentaire" value="" maxlength="1200"></textarea>

20/03/2021, 08h13
javatwister

Bonjour,

Ton double setTimeout est également très gênant pour le fonctionnement de la page...
20/03/2021, 08h31
javatwister
Et si tu veux du temps réel même en cas de copier / couper / coller...
Code:

1 2 <div id="count"></div> <textarea id="t" rows="10" cols="100" maxlength="1200"></textarea>
Code:

document.getElementById("t").addEventListener("input",(e)=> document.getElementById("count").textContent=e.target.value.length)
20/03/2021, 14h16
boteha

Bonjour NoSmoking et javatwister,

Merci de votre suivi, je vais faire les tests pendant le week-end.

Je vais commencer par le code de javatwister qui me semble le plus simple.

A voir le comportement du navigateur avec simplement maxlength="1200" quand tu dépasses les 1200 caractères.
Cela bloque la saisie, mais avec ou sans alerte (à mon avis sans) ?
C'est quand même plus sympa d'avoir une alerte, d'où le code de NoSmoking.

Je vous tiens informé.

Bah, si t'as une alerte qui te casse ta page, ce sera moche...

Tu peux ajouter cette condition:
Code:

1 2 3 4 5 6 7 8 const t=document.getElementById("t"), count=document.getElementById("count"); t.addEventListener("input",(e)=> e.target.value.length<e.target.maxLength ? count.textContent=e.target.value.length: count.textContent="Limite atteinte!!!" )

20/03/2021, 22h03
boteha

Bonjour,

J'ai essayé le code de javatwister qui fonctionne bien.

Par contre j'aimerais que le compteur de signes soit activé dès le chargement de la page, comme c'est le cas avec le script un peu pourri actuel.

Le textarea peut être un brouillon en mémoire que le client veut modifier, c'est donc bien de voir le nombre de signes dès le chargement de la page.

Je vais y réfléchir mais si la réponse est pour vous évidente je vous remercie une fois de plus par avance.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<title>...</title>
<style>
</style>
</head>
<body>
 
<div id="count"></div>
<textarea id="t" rows="10" cols="100" maxlength="1200">zone déjà entamée</textarea>
 
 
<script>
document.addEventListener("DOMContentLoaded",()=>{
        const t=document.getElementById("t"),
        count=document.getElementById("count");
 
        t.addEventListener("input",(e)=> num());
 
        const num=()=> 
                count.textContent=t.value.length<t.maxLength ? 
                t.value.length:
                "Limite atteinte!!!"
 
        num()
})
</script>
 
</body>
</html>

21/03/2021, 11h39
boteha

Bonjour javatwister,

Encore MERCI pour ton suivi.

Je teste dans l'après-midi.

Je vous tiens informés.

Bonjour Javatwister,

J'ai testé ton code en réel avec de petits changements pour mon contexte, cela fonctionne très bien.

Seul petit bémol IE9 ne le comprend pas alors que le code pourri d'origine ne lui pose aucun problème.

J'ai essayé de remplacer textContent or innerText ou innerHTML mais cela ne marche pas mieux.

Pire les scripts qui suivent ne sont plus compris par IE qui donc détecte une erreur de syntaxe fatale dans ton script.

As-tu une idée pour plaire à IE ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 document.addEventListener("DOMContentLoaded", () => { const comment=document.getElementById("comment"), count=document.getElementById("tpt"); comment.addEventListener("input", (e)=> num()); const num=()=> { const max = 1200; count.textContent = comment.value.length; if (comment.value.length > max) alert ('Pas plus de ' + max + ' caractères dans le champ Commentaires'); } num(); });

IE ne comprend pas les fonctions fléchées;

Attention, ne redéfinis pas max à chaque événement dans la zone de texte!

Par ailleurs, maxlength est une propriété très performante qui n'a pas besoin d'une variable en roue de secours...

Peu importe, tu peux faire ça:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 document.addEventListener("DOMContentLoaded",function(){ const comment=document.getElementById("comment"), count=document.getElementById("tpt"), max=1200; comment.addEventListener("input",function(){num()}); const num=function(){ count.textContent=comment.value.length; if(comment.value.length==max) alert("Pas plus de " + max + " caractères dans le champ Commentaires."); } num() })

21/03/2021, 18h52
boteha

Merci encore pour le suivi.

C'est volontairement que je n'utilise par maxlength, je n'ai pas mis de maxlength dans le textarea, le contrôle se fait par PHP côté serveur.

A ce propos, pour que le compte par PHP soit identique au compte par javascript, il y a un petit détail côté PHP :

Code:

mb_strlen (str_replace ("\r\n", "\r", stripslashes ($com))

Si tu ne fais pas cela PHP compte un retour chariot pour 2 caractères alors que javascript en compte 1 seul.

Bon je teste ton code dans quelques minutes.

Je te tiens informé.
21/03/2021, 19h00
javatwister

Citation:

Envoyé par boteha

je n'ai pas mis de maxlength dans le textarea, le contrôle se fait par PHP côté serveur

Ajoute un maxlength! ça garantit que le client n'écrira plus rien après 1200 caractères, c'est quand même intéressant;
21/03/2021, 19h30
boteha

Javatwister,

La nouvelle version de ton code fonctionne parfaitement avec IE et bien sûr Edge, Firefox et Chome.

Grand merci, j'attends un peu avant de cocher Résolu.

Citation:

Envoyé par javatwister

Ajoute un maxlength! ça garantit que le client n'écrira plus rien après 1200 caractères, c'est quand même intéressant;

Si je mets un maxlength et que le client colle un texte de 2000 signes il ne verra que les 1200 premiers signes.

Sans maxlength et avec une alerte javascript, il se prend une alerte très claire à faire disparaitre en un clic.

Il accède ensuite à tout son texte et peut le couper au milieu s'il veut garder la fin qui aurait disparu avec maxlength.

Et s'il valide un texte trop long c'est bloqué par PHP qui lui demande de raccourcir.

Je trouve cela idéal.
21/03/2021, 19h54
javatwister

Citation:

Envoyé par boteha

Et s'il valide un texte trop long c'est bloqué par PHP qui lui demande de raccourcir.

Encore une fois, je trouve que c'est une perte d'énergie;

En tout cas, si tu fais comme tu as dit, n'oublie pas de remettre

Code:

if (comment.value.length > max)
21/03/2021, 20h41
boteha

J'ai remis :

Code:

if (comment.value.length > 1200) alert ('Pas plus de 1 200 caractères dans le champ Commentaires');

Plus besoin de déclarer max en production car la valeur de 1200 est une constante, cela fait une variable en moins.
25/03/2021, 21h55
boteha

Bonjour,

Je confirme que le sujet est résolu.

Le code de javatwister fonctionne sur les principaux navigateurs (dont IE) et ne provoque pas d'alerte unsafe-eval.

Encore MERCI.