[MySQL] erreur XSS avec une iframe quand j'affiche les données

erreur XSS avec une iframe quand j'affiche les données

Bonjour

Je ne suis sur de poster dans la bon forum, mais je ne savais pas exactement ou poser cette question.
J'ai un formulaire ou j'envoie le code d'une iframe dans une BDD, l'frame provient du site ina.Fr

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<?php include ('detect_mobil/Mobile_Detect.php');
include ('@_INCLUDE/base_Connexion.php');
 
$sql = "SELECT DISTINCT theme FROM qcm";
$req = mysqli_query($liendb, $sql);
if (!mysqli_query($liendb, $sql)) {
	printf(mysqli_error($liendb));
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/reset.css">
<link rel="stylesheet" type="text/css" href="style/bootstrap.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
 
 
<?php
//$deviceType = 'tablet';
//echo $deviceType;
if ($deviceType == 'tablet') {
	echo '
<link rel="stylesheet" type="text/css" href="style/style-tablet.css">';
} elseif ($deviceType == 'phone') {
	echo '
<link rel="stylesheet" type="text/css" href="style/style-mobile.css">';
}
 
?>
<title>Gamification</title>
 
</head>
<body>
<!-- haut de page dégradé bleu-->
<div class="haut" id="accueil">
 
<header>
      <!--titre du site-->
      <div id="titre">Web-Docu</div>
      <div id="titre2">Le jeu</div>
 
  </div>
      <!--navigation-->
<?php $nompage = "jeu";?>
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
 
           Choix de la navigation différente sur
           Ordinateur (computer)
           Tablette (tablet)
           Telephone (phone)
 
 
           détection faite par Mobile_Detect.php inclue plus haut
 
 
  ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
  <div class="navsite">
<?php
 
/*=================   si on est sur un tel ==================================*/
if (($deviceType == 'phone')) {?>
<!-- 2 div qui me permettent d'ouvrir et de fermer la nav sur tel-->
    <div id='menuport-ferme'>
     <div id='menuport'>
<?php // ici j'inclue la navigation commune à tous les éléments
	include "@_INCLUDE/nav.php";?>
</div></div>
    <!-- 2 div pour les boutons d'ouverture et de fermeture pour les portables-->
     <div id='picto' ><a href='#menuport' onClick = "picto('picto2')"><img src="images/menu-phone.png"></a></div>
 
     <div id='picto2' style="display:none" ><a href='#menuport-ferme' onClick = "picto('picto2')"><img src="images/menu-phone.png"></a></div>
<?php
/*==============================================================================

fin du if telephone

et sinon nav traditionnelle
mise en forme tablet ou ordi
par les styles CSS plus haut

===============================================================================*/
}
// sinon j'inclue la nav normalement
else{
	include "@_INCLUDE/nav.php";
 
}?>
</div>
 
 <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
              FIN DE LA NAV
 
 
 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
 
 
 
<!--début corps de page-->
<div class="container_12 contenu">
<main>
  <section class="grid_12">
 
 
<meta charset="utf-8">
<title>Ajout question jeu web docu</title>
 
</header>
 
<form role="form" action="ajoutquest-rec.php" method="post">
  <div class="form-group grid_4">
    <label for="theme">Thèmatique</label>
    <select class="form-control" id="theme" name="theme" required onchange="selection()">
<?php while ($data = mysqli_fetch_assoc($req)) {
 
	echo "<option value='" . $data['theme'] . "'>" . $data['theme'] . "</option>";
}?>
  <option value="new" >Nouvelle catégorie</option>
 
</select>
  </div>
  <div class="form-group grid_4" id="newtheme">
    <label for="newtheme">Nouveau thème</label>
    <input type="text" class="form-control" name="newtheme" placeholder="ex:Technique, Personnalités">
  </div>
  <div class="form-group grid_4">
    <label for="sujet">Sujet de la question</label>
    <input type="text" class="form-control" name="sujet" placeholder="ex:Eurovision, Léon Zitrone, France2" required>
  </div>
  <div class="form-group grid_4" id="newtheme2">
    <label>test</label>
    <input type="text" name="rien" class="form-control">
  </div>
  <br>
  <div class="form-group grid_2">
    <label for="point">points</label>
    <input type="number" class="form-control input-lg" name="point" placeholder="de 1 à 5" min="1" max="5" required>
  </div>
   <div class="form-group grid_9  push_1 suffix_3">
    <label for="question">la question</label>
    <input type="text" class="form-control input-lg" name="question" placeholder="ex:qu'est ce qu'était..." required>
  </div>
  <div class="form-group grid_4">
    <label for="rep1">réponse1</label>
    <input type="text" class="form-control" name="rep1" placeholder="1ere question" required>
    <label class="radio-inline">
  <input type="radio" name="vrai" id="vrai" value="1" required> Réponse exacte
</label>
  </div>
   <div class="form-group grid_4">
    <label for="rep2">réponse2</label>
    <input type="text" class="form-control" name="rep2" placeholder="2eme question" required>
  <label class="radio-inline">
  <input type="radio" name="vrai" id="vrai" value="2"> Réponse exacte
</div>
   <div class="form-group grid_4">
    <label for="rep3">réponse3</label>
    <input type="text" class="form-control" name="rep3" placeholder="3eme question" required>
  <label class="radio-inline">
  <input type="radio" name="vrai" id="vrai" value="3"> Réponse exacte
</div>
   <div class="form-group grid_9 push_3 suffix_3">
    <label for="reponse">Réponse</label>
    <textarea class="form-control" rows="5" name="reponse" required></textarea>
  </div>
   <div class="form-group grid_12"></div>
  <div class="form-group grid_6 push_4"><label> Informations complémentaires éventuelles</label></div>
   <div class="form-group grid_10 push_1">
    <label for="ina">vidéo Iframe (INA You Tube)</label>
    <input type="text" class="form-control" name="ina" placeholder="<iframe>xxxxx</iframe>">
  </div>
  <div class="form-group grid_5 push_1">
    <label for="lien1">lien vers un site</label>
    <input type="text" class="form-control" name="lien1" placeholder="http://wwww.">
  </div>
  <div class="form-group grid_5 push_1">
    <label for="nomlien1">nom du site</label>
    <input type="text" class="form-control" name="nomlien1" placeholder="nom du site ex: wikipedia">
  </div>
 
   <div class="form-group grid_5 push_1">
    <label for="lien2">lien vers un autre site</label>
    <input type="text" class="form-control" name="lien2" placeholder="http://wwww.">
  </div>
  <div class="form-group grid_5 push_1">
    <label for="nomlien2">nom du site</label>
    <input type="text" class="form-control" name="nomlien2" placeholder="nom du site ex: wikipedia">
  </div>
 
  <button type="submit
  " class="btn btn-info btn-large btn-block grid_4 push_4">Enregistrer</button>
 
</form>
<script>
function selection (){
var liste, texte;
liste = document.getElementById("theme");
texte = liste.options[liste.selectedIndex].value;
var newselect= document.getElementById("newtheme");
var newselect2= document.getElementById("newtheme2");
if(texte=="new"){
  newselect.style.display="block";
  newselect2.style.display="none";
}
else{
newselect2.style.display="block";
newselect.style.display="none";
}
}
</script>
 
</body>
</html>

ce formulaire insert donc les éléments dans une base, pas de soucis tout s'enregistre bien.
le problème arrive quand je veux réafficher ces données pour controle, le navigateur (Chrome), affiche un emplacement vide et le code source indique l'erreur suivante

Citation:

token contains a reflected xss vectors

je réaffiche cette iframe par un simple echo $nomdelavariable

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<?php include ('detect_mobil/Mobile_Detect.php');
include ('@_INCLUDE/base_Connexion.php');
foreach ($_POST as $key => $val) {
	$$key = mysqli_real_escape_string($liendb, $val);
}
$message = NULL;
$i = 0;
 
if (empty($theme)
	 OR empty($sujet)
	 or empty($point)
	 or empty($question)
	 or empty($vrai)
	 or empty($reponse)
	 or empty($rep1)
	 or empty($rep2)
	 or empty($rep3)) {
	$message = "Vous n'avez pas rempli un des champ importants";
}
if ($theme == "new") {
	if (!empty($newtheme)) {$theme = $newtheme;
	} else {
		$message = "Vous n'avez pas indiqué le nouveau theme";
	}
}
$dernierid = "SELECT * FROM qcm ORDER BY idqcm DESC limit 1 ";
$lastid = mysqli_query($liendb, $dernierid);
$numid = mysqli_fetch_assoc($lastid);
$lastid = $numid['idqcm'];
$idinsert = $lastid + 1;
if ($message == NULL) {
	$sql = "INSERT INTO qcm (idqcm, theme, point, quest,complement,titre,rep1,rep2,rep3, vrai, video1, lien1, lien2,nomlien1,nomlien2)
          VALUES ('$idinsert', '$theme', '$point', '$question','$reponse','$sujet','$rep1','$rep2','$rep3','$vrai','$ina', '$lien1','$lien2','$nomlien1','$nomlien2')";
 
	if (!mysqli_query($liendb, $sql)) {
		printf(mysqli_error($liendb));
		exit();
	}}
$idinsert = mysqli_insert_id($liendb);
// requete sql pour afficher l'élément dont l'id correspond au N° sorti
$sqlquest = "SELECT * FROM qcm where idqcm='$idinsert'";
$req = mysqli_query($liendb, $sqlquest) or die(mysql_error());
 
$question = mysqli_fetch_assoc($req);
// affecttion des variables suivant les valeurs de la table MySQL
$id = $question['idqcm'];
$titre = $question['titre'];
$laquestion = $question['quest'];
$rep1 = $question['rep1'];
$rep2 = $question['rep2'];
$rep3 = $question['rep3'];
$them = $question['theme'];
$vrai = $question['vrai'];
$points = $question['point'];
$enplus = $question['complement'];
$ina1 = $question['video1'];
$lien1 = $question['lien1'];
$nomlien1 = $question['nomlien1'];
$lien2 = $question['lien2'];
$nomlien2 = $question['nomlien2'];
?>
<!doctype html>
<html lang="fr">
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/reset.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" type="text/css" href="style-jeu/style-jeu.css">
 
 
<?php
//$deviceType = 'tablet';
//echo $deviceType;
if ($deviceType == 'tablet') {
	echo '
<link rel="stylesheet" type="text/css" href="style/style-tablet.css">';
} elseif ($deviceType == 'phone') {
	echo '
<link rel="stylesheet" type="text/css" href="style/style-mobile.css">';
}
 
?>
<meta charset="utf-8">
<title>Ajout question jeu web docu</title>
 
</head>
<body>
<!-- haut de page dégradé bleu-->
<div class="haut" id="haut">
 
 
      <!--titre du site-->
      <div id="titre">Web-Docu</div>
      <div id="titre2">new question</div>
<?php $nompage = "jeu";?>
</div>
      <!--navigation-->
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
 
           Choix de la navigation différente sur
           Ordinateur (computer)
           Tablette (tablet)
           Telephone (phone)
 
 
           détection faite par Mobile_Detect.php inclue plus haut
 
 
  ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
  <div class="navjeu">
<?php
 
/*=================   si on est sur un tel ==================================*/
if (($deviceType == 'phone')) {?>
<!-- 2 div qui me permettent d'ouvrir et de fermer la nav sur tel-->
    <div id='menuport-ferme'>
     <div id='menuport'>
<?php // ici j'inclue la navigation commune à tous les éléments
	include "@_INCLUDE/nav.php";?>
</div></div>
    <!-- 2 div pour les boutons d'ouverture et de fermeture pour les portables-->
     <div id='picto' ><a href='#menuport' onClick = "picto('picto2')"><img src="images/menu-phone.png"></a></div>
 
     <div id='picto2' style="display:none" ><a href='#menuport-ferme' onClick = "picto('picto2')"><img src="images/menu-phone.png"></a></div>
<?php
/*==============================================================================

fin du if telephone

et sinon nav traditionnelle
mise en forme tablet ou ordi
par les styles CSS plus haut

===============================================================================*/
}
// sinon j'inclue la nav normalement
else{
	include "@_INCLUDE/nav.php";
 
}?>
</div>
 <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
              FIN DE LA NAV
 
 
 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
 
 
 
<!--début corps de page-->
<div class="container_12 ">
<main>
 
<section class="grid_11 jeu">
  <!--données de haut de page-->
  <div class="theme"><?php echo $them?></div>
  <div class="question"><?php echo $laquestion?></div>
 
 
<div class="grid_3 " id="cadre1">
 
 
    <!-- réponse1 cadre de réponse et variable PHP pour l'afficher-->
    <div id="repons1-1" class="modif" data="1">
    <div id="repons1-2" class="modif" data="1"><?php echo $rep1?>
<?php if ($vrai == 1) {echo "<br> <p style='color:red'>bonne réponse</p> ";
}
?></div>
    </div>
 
  </div>
 
 
 
 
  <!--=============================
 
  2em cadre mise en place éléments
 
  ===================================-->
  <div class="grid_3 " id="cadre2">
 
    <!-- réponse2varaible PHP -->
    <div  id="repons2" class="modif" data="2"><?php echo $rep2?>
<?php if ($vrai == 2) {echo "<br> <p style='color:red'>bonne réponse</p> ";
}
?></div>
   </div>
 
 
 
 
  <!--====================
 
  3em cadre mise en place éléments
 
  ================================-->
  <div class="grid_3 " id="cadre3">
 
 
     <!-- réponse3 variable PHP -->
    <div  id="repons3-1" class="modif" data="3">
    <div id="repons3-2" class="modif" data="3"><?php echo $rep3?>
<?php if ($vrai == 3) {echo "<br> <p style='color:red'>bonne réponse</p> ";
}
?></div>
</div>
    </div>
 
<div class="grid_8 complement-form">
<p style="color:white;text-align:center">le complément d'in  a aations</p>
<?php
echo $enplus;
if (!empty($lien1) or !empty($lien2)) {
	echo "<br>liens externes <br> <a href='" . $lien1 . "' target='new'>" . $nomlien1 . "</a>
  <br><a href='" . $lien2 . "' target='new'>" . $nomlien2 . "</a>";
}
?>
</div>
<?php
echo $ina1;
// if (!empty($ina1)) {echo "<p style='position:relative; margin-top:49%; font-size:1.2em; background:#A3A7BB'>une vidéo en I frame</p>";
// }
?>
 
</body>
</html>

extrait du code source affiché par chrome

Code:

<iframe width='460' height='259' frameborder='0' marginheight ='0' marginwidth='0' scrolling ='no' src='http://player.ina.fr/player/embed/VDD09005618/1/1b0bd203fbcd702f9bc9b10ac3d0fc21/460/259/0/148db8' ></iframe>

J'ai essayé de reproduire le problème avec Chrome 31 sous Windows, et voilà ce que j'obtiens comme message :

Citation:

The XSS Auditor refused to execute a script in 'http://localhost/test/forms/bloquage%20XSS%20chrome.php' because its source code was found within the request. The auditor was enabled as the server sent neither an 'X-XSS-Protection' nor 'Content-Security-Policy' header.

Traduction :

Citation:

L'auditeur XSS a refusé d'exécuter un script dans 'http://localhost/test/forms/bloquage%20XSS%20chrome.php' car son code source a été trouvé dans la requête. l'auditeur était activé car le serveur n'a envoyé ni un en-tête 'X-XSS-Protection' ni un en-tête 'Content-Security-Policy'.

La solution est dans le message : ton serveur doit envoyer un en-tête approprié ; reste à savoir exactement comment.

Apparemment, X-XSS-Protection a été introduit par IE8. Il semblerait qu'IE8 incluait déjà des mécanismes de protection XSS. Pour désactiver ces mécanismes, le serveur doit envoyer :

Code:

X-XSS-Protection: 0

Chrome reconnaît cette directive et la respecte. Plutôt simple, mais pas très subtil.

Content Security Policy (CSP) permet un contrôle plus fin en indiquant quels domaines sont dignes de confiance ; tous ceux qui ne sont pas dans la liste blanche sont bloqués. Dans ton cas, tu devras ajouter ina.fr ou plus précisément player.ina.fr à ta liste blanche. Ceci dit, il semblerait qu'on soit obligé d'envoyer aussi un X-XSS-Protection pour que Chrome accepte d'afficher l'iframe, du coup l'intérêt de CSP est assez limité dans ton cas.

Note : les sites tiers peuvent se protéger contre l'inclusion dans une iframe en envoyant un en-tête X-Frame-Options. ina.fr ne le fait pas, mais tu peux observer le problème avec www.google.fr par exemple.

merci watilin
je n'ai pas tout compris aux failles XSS, c'est la première fois que je rencontre le phénomène.
mais ça fonctionne.