alerte unsafe-eval pour txt.substring

**boteha** · 19/03/2021, 23h13

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**NoSmoking** · 20/03/2021, 08h59

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

Avec comme HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**javatwister** · 20/03/2021, 09h13

Bonjour,

Ton double setTimeout est également très gênant pour le fonctionnement de la page...

**javatwister** · 20/03/2021, 09h31

Et si tu veux du temps réel même en cas de copier / couper / coller...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("t").addEventListener("input",(e)=> document.getElementById("count").textContent=e.target.value.length)

**boteha** · 20/03/2021, 15h16

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é.

**javatwister** · 20/03/2021, 16h54

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

Tu peux ajouter cette condition:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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!!!"
)

**boteha** · 20/03/2021, 23h03

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.

**javatwister** · 21/03/2021, 00h21

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**boteha** · 21/03/2021, 12h39

Bonjour javatwister,

Encore MERCI pour ton suivi.

Je teste dans l'après-midi.

Je vous tiens informés.

**boteha** · 21/03/2021, 19h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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();
});

**javatwister** · 21/03/2021, 19h37

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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()
})

**boteha** · 21/03/2021, 19h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é.

**javatwister** · 21/03/2021, 20h00

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;

**boteha** · 21/03/2021, 20h30

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.

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.

**javatwister** · 21/03/2021, 20h54

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

 if (comment.value.length > max)

**boteha** · 21/03/2021, 21h41

J'ai remis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**boteha** · 25/03/2021, 22h55

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.

alerte unsafe-eval pour txt.substring

JavaScript

Discussions similaires

Partager

Partager