如何仅对一个特定的用户输入文件使用DOMPurify

Question

我需要演示XSS攻击以及如何防止它。我制作了一个简单的web应用程序，询问用户的名字和姓氏，并打印"欢迎"以及他的名字和姓氏。在使用DOMPurify防止XSS攻击之前，我能够在输入字段中编写脚本，XSS攻击成功了。最后，我想做的是能够从名称输入字段执行攻击，并防止从姓氏输入字段进行攻击。这是我的代码：

function cleanData(userInput){
return DOMPurify.sanitize(userInput);
}
function myFunction() {
let name = document.querySelector("#name");
let surname = document.querySelector("#surname");
let message = document.querySelector("#message");
const profileData = userInput(
$(surname)
);
message.innerHTML = "Welcome " + name.value + surname.value;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"></script>
<h1>Hi! What's your name?</h1>
<input type="text" id="name" placeholder="name ...not sanitized " />
<input
type="text"
id="surname"
placeholder="surname ...sanitized "
/>
<br />
<br />
<button onclick="myFunction()">Submit</button>
<h1 id="message"></h1>

我想说的是，我没有在姓氏输入字段上使用DOMPurify，也不知道如何解决这个问题。

Answer 1

将surname传递给cleanData

function cleanData(userInput){
return DOMPurify.sanitize(userInput);
}
function myFunction() {
let name = document.querySelector("#name");
let surname = document.querySelector("#surname");
message.innerHTML = "Welcome " + name.value + cleanData(surname.value);
}