基于NodeJS与Puppeteer实现动态网站自动化登录问题求助

以下是针对你的代码的修改方案，解决403错误并完成预期登录流程：

核心问题分析 #

403错误通常是因为网站检测到你使用的是自动化工具（Puppeteer默认特征容易被识别），或者手动跳转页面导致会话上下文丢失。

修改后的代码 #

const puppeteer = require('puppeteer');

const start = async () => {
    // 配置浏览器启动参数，模拟真实浏览器环境
    const browser = await puppeteer.launch({
        headless: 'new', // 使用新版无头模式，更接近真实浏览器
        args: [
            '--no-sandbox',
            '--disable-setuid-sandbox',
            '--disable-blink-features=AutomationControlled', // 禁用自动化检测特征
            '--start-maximized', // 最大化窗口，模拟真实用户操作
            '--lang=id-ID,id', // 设置印尼语环境，匹配目标网站区域
            '--timezone=Asia/Jakarta' // 设置对应时区
        ],
        defaultViewport: null // 使用默认视口，避免固定尺寸暴露自动化
    });

    const page = await browser.newPage();

    // 模拟真实浏览器的请求头，补充缺失的关键字段
    await page.setExtraHTTPHeaders({
        'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8',
        'Accept-Language': 'id-ID,id;q=0.9,en-US;q=0.8,en;q=0.7',
        'Accept-Encoding': 'gzip, deflate, br',
        'Connection': 'keep-alive',
        'Upgrade-Insecure-Requests': '1', // 补充这个常见头，提升真实性
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0'
    });

    // 禁用自动化提示，避免被网站检测
    await page.evaluateOnNewDocument(() => {
        Object.defineProperty(navigator, 'webdriver', {
            get: () => undefined
        });
    });

    // 访问初始页面，等待网络空闲确保资源加载完成
    await page.goto("https://m.dana.id/d/ipg/inputphone?phoneNumber=85280302285&ipgForwardUrl=elefen&isFromItemDigital=true", {
        waitUntil: 'networkidle2', // 等待网络空闲，比load更可靠
        timeout: 60000 // 延长超时时间，避免网络问题导致失败
    });

    // 获取会话信息（可选，用于调试）
    const cookies = await page.cookies();
    let sessid = "", ctoken = "";
    for (let cookie of cookies) {
        if(cookie.name === "ALIPAYJSESSIONID") sessid = cookie.value;
        if(cookie.name === "ctoken") ctoken = cookie.value;
    }
    console.log(`${sessid} - ${ctoken}`);

    // 等待按钮加载，模拟人类延迟后点击
    await page.waitForSelector(".btn-continue.btn.btn-primary", { timeout: 30000 });
    await page.waitForTimeout(1500); // 模拟人类思考时间
    // 点击后等待页面跳转完成，不要手动goto
    await Promise.all([
        page.click(".btn-continue.btn.btn-primary"),
        page.waitForNavigation({ waitUntil: 'networkidle2', timeout: 60000 })
    ]);

    // 此时应该已进入目标中间页面，等待元素加载后截图
    await page.waitForTimeout(2000);
    await page.screenshot({path: "test.png"});

    // 后续可继续处理登录页面的操作，比如输入密码等
    // ...

    await browser.close();
};

start();

关键修改说明 #

• 浏览器参数配置：启用新版无头模式，禁用自动化检测特征，设置匹配网站的语言和时区，模拟真实用户的浏览器环境。
• 请求头补充：添加Upgrade-Insecure-Requests字段，调整语言头为印尼语，更贴合目标网站的用户群体。
• 避免手动跳转：点击按钮后通过waitForNavigation等待页面自然跳转，确保会话上下文不丢失——手动goto会导致之前的Cookie和会话失效，这是解决403的核心。
• 模拟人类操作：添加短暂延迟，避免操作速度过快被检测为自动化工具。
• 更可靠的等待策略：使用networkidle2替代load，确保页面所有必要资源加载完成后再进行下一步操作。

额外注意事项 #

• 如果仍然出现403，可尝试更换User-Agent为最新的Chrome/Firefox版本，或者确保页面的图片、CSS正常加载。
• 部分网站会检测鼠标移动轨迹，可添加page.mouse.move()模拟人类鼠标行为。

内容的提问来源于stack exchange，提问作者Lamberto Fredrick Nababan