I have the following page on a website that works fine when a user selects BEGINNER and 00-Intro to Programming - and enters any username twice (and presses submit)
http://www.teachyourselfpython.com/testandtrack_v5/index.php
Note: it works perfectly fine on IE, Firefrox, GoogleChromeBETA and Safari. It doesn't however work on Chrome - producing an error "You have to enter the quiz password". There is no quiz password set for this particular quiz (in the database the field is set to '0', so I don't know why it is firing up this command in the first place. Note that one console error suggested that the site ought to be HTTPS and that Chrome didn't seem to like the hidden password field (the input box for the quiz password is only shown IF the quiz has a password)
One suggestion is that it is to do with the AJAX and Javascript. Some of the relevant code pasted below.
$("#quiz_form").change(function () {
/* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */
var allbooks = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */
var dataString = "level=" + allbooks; /* STORE THAT TO A DATA STRING */
$.ajax({ /* THEN THE AJAX CALL */
type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
url: "get-quiz-by-level.php", /* PAGE WHERE WE WILL PASS THE DATA */
dataType: "json",
data: dataString, /* THE DATA WE WILL BE PASSING */
success: function success(result) {
/* GET THE TO BE RETURNED DATA */
var option = "";
result
.sort(function(a, b) {
return a.quiz_name.localeCompare(b.quiz_name);
})
.forEach(function (quiz, i) {
option += "<option value=\"" + quiz.id + "\">" + quiz.quiz_name + "</option>";
if (i == 0 && quiz.password_quiz != 0) {
$("#password").show();
} else if (i == 0 && quiz.password_quiz == 0) {
$("#password").hide();
}
});
$("#got_quiz").show().html(option);
}
});
});
$("#got_quiz").change(function () {
/* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */
var allbooks = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */
var dataString = "quiz=" + allbooks; /* STORE THAT TO A DATA STRING */
$.ajax({ /* THEN THE AJAX CALL */
type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
url: "check_quiz_pass.php", /* PAGE WHERE WE WILL PASS THE DATA */
data: dataString, /* THE DATA WE WILL BE PASSING */
success: function success(result) {
/* GET THE TO BE RETURNED DATA */
if (result == 0) {
$("#password").hide();
} else {
$("#password").show();
}
}
});
});
The other suggestion is that it was to do with the PHP. (pasted below) I changed the ifelse to if else, but that didn't make any difference - it still worked on IE/Safari/Firefox and not on Chrome.
PHP code
//getting body i.e. questions, options and submit button for the page
//initialize the optput variable
$m_output='';
//Getting the questions from DB here
$m_questions_from_DB = mysqli_query($con,"SELECT * FROM questions WHERE quiz_id='$final_quiz_ID'
");
while (mysqli_num_rows($m_questions_from_DB)<1) {
$user_msg = 'Hey, weird, but it seems there are no questions in this quiz!';
header('location: index.php?user_msg='.$user_msg.'');
exit();
}
if($_POST['consent'] != 1){
$user_msg = 'Hey, You have to consent first to begin the quiz!';
header('location: index.php?user_msg='.$user_msg.'');
exit();
}else if(($_POST['class_name'] == "non" && !empty($_POST['school_pin'])) || ($_POST['class_name'] != "non" && empty($_POST['school_pin']))){
if($_POST['class_name'] == "non"){ echo "aakakakak"; }
$user_msg = 'Hey, You have to insert correct school pin and choose your class'.$_POST['school_pin'].$_POST['class_name'];
header('location: index.php?user_msg='.$user_msg.'');
exit();
}elseif($quiz_pass != '0' && empty($_POST['quiz_password'])){
$user_msg = 'Hey, Enter a correct Quiz password';
header('location: index.php?user_msg='.$user_msg.'');
exit();
}elseif(!empty($_POST['quiz_password']) && $_POST['quiz_password'] != $quiz_pass){
$user_msg = 'Hey, Enter a correct Quiz password';
header('location: index.php?user_msg='.$user_msg.'');
exit();
}
Additional things I have tried/looked at:
-I have seen SO posts suggesting that Response.Close() needs to be commented out, but I don't have that on any of my pages.
-Other suggestions make mention of the fact that Chrome does not handle asynchronous calls well - what are these and where would I look to change this in my code?
-Another post mentioned that jsonp isn't handled well by Chrome (note that this is working fine on Chrome just last week and suddenly, with no interference, stopped working). Again, I can't find any reference to jsonp so assume it is not that.
I also tried to add the following async:false, after the call to datatype:json to see if it works like below
dataType: "json",
async:false,
This didn't work either
The final thing to try is to remove or comment out the dataType:"json" altogether, but no luck there.
** VERY INTERESTING ERROR LOGS IN CONSOLE**
Another peculiarity is that on running the console developer tools error logs int he browser for CHROME (where it does not work) there are no errors!!
However, running the console error log in CHROME BETA (where it works fine), the errors are:
-
1.
qYZF6oIZtfc:1 Error parsing header X-XSS-Protection: 1; mode=block; report=https://www.google.com/appserve/security-bugs/log/youtube: reporting URL is not same scheme, host, and port as page at character position 22. The default protections will be applied.
: reporting URL is not same scheme, host, and port as page at character position 22. The default protections will be applied.
quiz.php:1 This page includes a password or credit card input in a non-secure context. A warning has been added to the URL bar. For more information, see ...
I do wonder if no.2 has something to do with it! but I don't know how to proceed.
IMPORTANT UPDATE
https://developers.google.com/web/updates/2016/10/avoid-not-secure-warn
I've found this website that undoubtedly sheds some further light on the issue, but how to proceed with fixing the error?
Finally, this post suggests that something is wrong with the loading of the boxes.
One approach (not working in Chrome)
<select>
<optgroup label="Swedish Cars">
<option id="volvo" onclick="option_click(this.id)">Volvo</option>
<option id="saab" onclick="option_click(this.id)">Saab</option>
</optgroup>
DEMO.
Proper way (Working in all browsers)
<select onchange="option_click(this.value)">
<optgroup label="Swedish Cars">
<option value="volvo" id="volvo">Volvo</option>
<option value="saab" id="saab">Saab</option>
</optgroup>
</select>
NEARLY.....UPDATE! After a helpful suggestion to change #password (ajax) to something else in case it is a reserved word, I tried that ....and it APPEARED to work in my version of chrome temporarily, but still the same error on mobile! I later refreshed, and then it stopped working on the loaded version of Chrome too!
Also, another individual let me know that it works for him on chrome (even without the ajax reserved word change) but his chrome has an add blocker, so that could be a further clue.
David J (thank you) suggested that it could be a matter of securing the site, so this could an option via cloudflare.
Any thoughts? Much appreciated.
