如何仅对姓氏输入框使用DOMPurify以实现XSS攻击演示与防护？

问题分析 #

你的代码存在两个核心问题导致DOMPurify未生效：

• 无意义的userInput函数调用，且错误使用未引入的jQuery语法获取输入值
• 未将姓氏输入值传入cleanData函数净化，直接拼接进了innerHTML

修正后的代码 #

JavaScript部分

function cleanData(userInput){
    return DOMPurify.sanitize(userInput);
}

function myFunction() {
    const nameInput = document.querySelector("#name");
    const surnameInput = document.querySelector("#surname");
    const messageElement = document.querySelector("#message");

    // 名字不做净化，保留XSS攻击触发能力
    const rawName = nameInput.value;
    // 姓氏通过DOMPurify净化，过滤恶意脚本
    const sanitizedSurname = cleanData(surnameInput.value);

    messageElement.innerHTML = `Welcome ${rawName} ${sanitizedSurname}`;
}

HTML部分

<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>

效果验证 #

• 名字输入框：输入<script>alert('XSS攻击成功')</script>，提交后会弹出弹窗，证明XSS攻击生效
• 姓氏输入框：输入同样的脚本内容，提交后脚本会被DOMPurify过滤，页面仅显示纯文本，恶意代码不会执行

内容的提问来源于stack exchange，提问作者duje.je