如何用JavaScript检测alert弹窗并拦截搜索到的alert(1)代码执行？

一、捕获alert弹窗触发 #

重写原生window.alert函数，就能在弹窗被调用时实时检测并执行自定义操作：

// 备份原生alert方法
const originalAlert = window.alert;

// 覆盖alert函数
window.alert = function(msg) {
    // 检测到alert触发，这里写你的自定义逻辑
    console.log(`Alert弹窗被触发，内容：${msg}`);
    
    // 可选：如果需要保留原生弹窗功能，取消下面注释
    // originalAlert(msg);
    // 若要直接阻止弹窗，就不调用原函数
};

只要页面中任何代码调用alert()，都会进入这个覆盖后的函数，你可以在这里判断内容是否包含alert(1)，再执行对应的拦截或记录操作。

二、阻止用户输入的"alert(1)"代码执行 #

1. 输入内容转义（最可靠的前端方案） #

当展示用户搜索内容时，避免使用innerHTML插入DOM，改用textContent将内容当作纯文本解析，从根源上阻止JS代码执行：

// 示例：获取用户输入并展示
const userSearchInput = document.getElementById('search-input').value;
const resultDisplay = document.getElementById('result-container');

// 用textContent展示，所有内容都会被当作纯文本
resultDisplay.textContent = `搜索结果：${userSearchInput}`;

如果必须保留部分HTML格式，手动转义特殊字符后再用innerHTML：

function escapeSpecialChars(str) {
    return str.replace(/[&<>"']/g, char => {
        const escapeMap = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return escapeMap[char];
    });
}

const userInput = document.getElementById('search-input').value;
document.getElementById('result-container').innerHTML = `搜索结果：${escapeSpecialChars(userInput)}`;

2. 拦截代码执行入口（补充方案） #

如果担心恶意代码通过eval或Function构造函数执行，可以覆盖这些方法来拦截包含alert(1)的代码：

// 拦截eval
const originalEval = window.eval;
window.eval = function(code) {
    if (code.includes('alert(1)')) {
        console.log('拦截到恶意代码执行：', code);
        return; // 直接阻止执行
    }
    return originalEval(code);
};

// 拦截Function构造
const originalFunction = window.Function;
window.Function = function(...args) {
    const code = args[args.length - 1];
    if (code.includes('alert(1)')) {
        console.log('拦截到恶意Function构造：', code);
        return () => {}; // 返回空函数替代
    }
    return originalFunction.apply(this, args);
};

注意：以上方案仅适用于测试场景，生产环境建议结合后端输入校验、输出转义以及CSP等安全机制来防范XSS。

内容的提问来源于stack exchange，提问作者pandaish