Within my Wordpress website, I have crafted an HTML form that enables users to view database records corresponding to their input. Following this AJAX tutorial on w3schools, a JavaScript function was implemented to send a GET request to a PHP script on the server. However, due to XSS protection, the JavaScript is being blocked from running, resulting in the following console error:
The XSS Auditor has blocked the execution of a script on 'page' because its source code was detected within the request. The auditor activation stemmed from the absence of both an 'X-XSS-Protection' and 'Content-Security-Policy' header sent by the server.
Could this issue be caused by how the JavaScript is invoked?
Source:
<html>
<head>
<script>
function showUser(degreecourse, Interest, gradyear){
var xmlHttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("info").innerHTML=xmlhttp.responseText;
}
else{document.getElementById("info").innerHTML}="Error";
}
xmlhttp.open("GET","/getcandidates.php?q=degreecourse=" + escape(degreecourse) + "&Interest=" + escape(Interest) + "&gradyear=" + escape(gradyear),true);
xmlhttp.send();
return false;
}
</script>
</head>
<body>
Filter By:
<form >
<table>
<tbody>
<tr>
<td>Degree Course:</td>
<td><select name="degreecourse" onchange = "showUser(document.getElementById('degreecourse').value, document.getElementById('Interest').value, document.getElementById('gradyear').value)">
<option>Any</option><option>Archaeology</option><option>Biochemistry</option><option>Biology</option><option>Biomedical Sciences</option><option>Chemistry</option><option>Computer Science</option><option>Economics</option><option>Education</option><option>Electronics</option><option>English</option><option>Environmental Studies</option><option>History</option><option>History of Art</option><option>Language and Linguistic Studies</option><option>Law</option><option>Management</option><option><option>Mathematics</option><option>Medicine</option><option>Music</option><option>Nursing, Midwifery and Healthcare</option><option>Philosophy</option><option>Physics</option><option>Politics</option><option>Politics, Economics and Philosophy</option><option>Psychology</option><option>Social Policy and Social Work</option><option>Social and Political Sciences</option><option>Sociology</option><option>Theatre, Film and Television</option></select></td>
</tr>
<tr>
<td>Interest:</td>
<td><select name="Interest" onchange = "showUser(document.getElementById('degreecourse').value, document.getElementById('Interest').value, document.getElementById('gradyear').value)">
<option>Any</option><option>Management</option><option>Marketing<option>Technical</option>
</select>
</td>
</tr>
<tr>
<td>Graduating After:</td><td><input id="gradyear" type="number" value=2013 name="gradyear" onchange = "showUser(document.getElementById('degreecourse').value, document.getElementById('Interest').value, document.getElementById('gradyear').value)"/></td>
</tr>
</tbody>
</table>
</form>
<br>
<div id="info"><b>Person info will be listed here.</b></div>
</body>
</html>
Upon connecting to the database, the PHP file generates an HTML table showcasing the retrieved data:
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Degree Subject</th>
<th>Email Address</th>
<th>Graduating Year</th>
<th>Interest</th>
<th>CV</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Forname'] . "</td>";
echo "<td>" . $row['Surname'] . "</td>";
echo "<td>" . $row['DegreeSubject'] . "</td>";
echo "<td>" . $row['EmailAddress'] . "</td>";
echo "<td>" . $row['GraduatingYear'] . "</td>";
echo "<td>" . $row['Interest'] . "</td>";
echo "<td><form action='www.yorkcommunityconsulting.co.uk/CVs/".$row['CVurl']."><input type='submit' value='See CV'></form></td>";
echo "</tr>";
}
echo "</table>";