I'm currently working on a messaging platform for a school project and facing challenges in ensuring database protection, defending against XSS attacks, and accommodating all characters, including newlines.
Everything seems to be in place, except for the issue with newlines. It's frustrating that even prefixing the newline with a backslash (\\n) doesn't resolve the problem!
https://i.sstatic.net/xzFMo.png
What should be my next step?!
Edit 1: Included the code snippet responsible for generating JSON data
string message = "[";
string uid;
for (int i = 0; i < data.Rows.Count; i++) {
if (StringCipher.ConvertToUnixTimestamp(DateTime.Now.AddMinutes(-5)) > int.Parse(data.Rows[i][5].ToString())) {
queryDelete = "DELETE * FROM Bubbleland WHERE MessageID = " + data.Rows[i][0] + ";";
commandDelete = new OleDbCommand(queryDelete, connection);
commandDelete.ExecuteNonQuery();
} else {
message += "{\"mid\":" + data.Rows[i][0];
if (data.Rows[i][1].ToString() == "")
uid = "user";
else
uid = data.Rows[i][1].ToString();
message += ", \"uid\":\"" + uid;
message += "\", \"name\": \"" + data.Rows[i][2];
message += "\", \"color\": \"" + data.Rows[i][3];
message += "\", \"content\": \"" + data.Rows[i][4];
message += "\"}";
if (i + 1 < data.Rows.Count) {
message += ",";
}
}
}
message += "]";
Edit 2: Added JavaScript processing code
async function fetchMessages() {
$.ajax({
type: "POST",
url: "../ASPX/bubblelandFetch.aspx",
success: function (data) {
console.log(data);
data = JSON.parse(data);
var container = document.getElementById("messages-container");
var uid;
container.innerHTML = "";
console.log(data);
for (var i in data) {
var message = '<div id="' + data[i]["mid"];
message += '" class="message ' + data[i]["color"] + '">';
message += '<div class="profile-container">';
if (data[i]["uid"] == "user")
uid = "/Media/user"
else
uid = "/Media/Profile/" + data[i]["uid"];
message += '<img src="' + uid + '.png"/>';
message += '<span>' + data[i]["name"] + '</span></div>';
message += '<div class="content">' + data[i]["content"] + '</div>';
container.innerHTML += message;
}
},
complete: function () {
setTimeout(fetchMessages, intevral);
}
});
}