我正在使用 jQuery 来确保我的用户无法通过我的聊天应用程序执行 javascript。这就是我将从 WebSocket 服务器获取的数据附加到用户的方式:
obj = JSON.parse(e.data);
$("<li>", {
class: "list-group-item",
text: obj.username + ": " + obj.message
}).prependTo('#chatlog');
这很好用,似乎可以逃避所有 XSS 攻击,但这是我的问题。我想将 obj.username
设为粗体,但我不知道该怎么做,因为 text:
之后的所有内容都变成了文本。非常高兴能为此提供任何帮助!
最佳答案
使用 span 包装元素设置 HTML 内容,您可以在其中使用临时元素转换文本。
const escape = txt => $('<div/>').text(txt).html()
$("<li>", {
class: "list-group-item",
html: '<span style="font-weight:bold">' + escape(obj.username) + "</span>: " + escape(obj.message)
}).prependTo('#chatlog');
const obj = {
username: 'John Doe',
message: 'Hi!<script>djsjdk<\/script>'
};
const escape = txt => $('<div/>').text(txt).html();
console.log(escape(obj.message));
$("<li>", {
class: "list-group-item",
html: '<span style="font-weight:bold">' + escape(obj.username) + "</span>: " + escape(obj.message)
}).prependTo('#chatlog');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="chatlog"></ul>
或者,您可以使用 jQuery 创建一个跨度,并为消息创建一个文本节点。
$("<li>", {
class: "list-group-item",
html: [
$('<span>', {
css: {
fontWeight: 'bold'
},
text: obj.username
}),
document.createTextNode(': ' + obj.message)
]
}).prependTo('#chatlog');
const obj = {
username: 'John Doe',
message: 'Hi!<script>djsjdk<\/script>'
};
$("<li>", {
class: "list-group-item",
html: [
$('<span>', {
css: {
fontWeight: 'bold'
},
text: obj.username
}),
document.createTextNode(': ' + obj.message)
]
}).prependTo('#chatlog');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="chatlog"></ul>
关于javascript - 带有 HTML 的 jQuery html 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55981823/