实现验证码完成后调用独立JS反混淆函数显示页面内容

完整代码实现 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安全页面</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        #captcha-wrapper {
            text-align: center;
        }

        #decoded-content {
            display: none;
            width: 100%;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <?php
    include 'verify_recaptcha.php';
    ?>

    <div id="captcha-wrapper">
        <div id="recaptcha-container"></div>
    </div>
    <div id="decoded-content"></div>
    
    <script>
        // 反混淆处理函数
        function normalize(obtext){
            var ot = obtext; 
            var ra = ["+","-","&","*","!","@","#","$","%","^","(",")","~",",",".","<",">","/","?"]; 
            for(var i=0;i<ra.length;i++) {
                while(ot.indexOf(ra[i]) > -1) {
                    ot = ot.replace(ra[i],"");
                }
            }
            var tcrb = "", enca = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
            for(var i_var = 0; i_var < ot.length; i_var += 2) { 
                var val = 0xFF - (((enca.indexOf(ot.substr(i_var,1))*36+enca.indexOf(ot.substr(i_var+1,1)))) >> 2); 
                var res = ""; 
                while(val >= 0x10) { 
                    res = enca.charAt(val % 0x10) + res; 
                    val = parseInt(val / 0x10); 
                }; 
                if(val > 0) res = enca.charAt(val)+res; 
                while (res.length < 2) res = "0"+res; 
                tcrb+=unescape("%"+res); 
            }
            return tcrb;
        }

        function onLoadCallback() {
            grecaptcha.render('recaptcha-container', {
                'sitekey': '你的站点密钥',
                'callback': onCaptchaCompleted
            });
        }

        function onCaptchaCompleted(response) {
            // 隐藏验证码区域
            document.getElementById('captcha-wrapper').style.display = 'none';
            // 获取内容容器
            const contentEl = document.getElementById('decoded-content');
            // 替换成你实际的混淆文本，执行反混淆
            const decodedHtml = normalize("你的obtext内容") + normalize("你的obtext内容");
            // 插入反混淆后的内容并显示
            contentEl.innerHTML = decodedHtml;
            contentEl.style.display = 'block';
        }

        window.onload = onLoadCallback;
    </script>
    
</body>
</html>

关键修改说明 #

• 页面结构调整：新增#captcha-wrapper包裹验证码，#decoded-content专门承载反混淆后的内容，确保验证完成后完全替换页面显示。
• 整合反混淆函数：直接把normalize函数写到页面脚本里，无需额外引入外部文件。
• 回调逻辑修改：
  1. 验证码验证通过后，先隐藏验证码容器；
  2. 调用normalize处理你的混淆文本（把代码里的"你的obtext内容"替换成实际的混淆字符串）；
  3. 将反混淆后的HTML插入到容器中并显示。
• 样式适配：给内容容器设置全屏样式，保证反混淆内容占满整个页面。

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