ESP32搭建WebServer时页面出现<app-content>和<style>标签的原因排查

问题场景 #

我在ESP32上使用WebServer.h、ESPmDNS.h和WebSocketsServer.h搭建仪表盘WebServer，核心代码如下：

初始化服务器的代码：

void setupServer(std::string ssid, std::string password)
{
    WiFi.begin(ssid.c_str(), password.c_str());

    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }

    Serial.print("connected\n");
    Serial.print("IP address: ");
    Serial.print(WiFi.localIP());

    if (!MDNS.begin("esp32")) {
        Serial.println("Error setting up MDNS responder!");
        while (1) {
            delay(1000);
        }
    }
    Serial.println("mDNS responder started");
    SPIFFS.begin();
    server.on("/", serveIndexFile);
    server.begin();
    webSocket.begin();
    webSocket.onEvent(webSocketEvent);
}

从SPIFFS发送静态文件的方法：

void serveIndexFile() {
    File file = SPIFFS.open("/index.html", "r");
    server.streamFile(file, "text/html");
    file.close();
}

即使使用完全空白的index.html文件，在电脑浏览器中检查页面时，仍会出现<app-content>和<style>标签，但手机端打开页面时没有这个现象，怀疑是浏览器扩展导致，想知道这是什么、原因是什么。

解答 #

• 这确实是浏览器扩展注入的内容，和你的ESP32代码完全无关。
• 很多浏览器扩展（比如广告拦截器、隐私保护插件、页面美化工具、AI辅助浏览插件甚至VPN扩展）会在页面加载时，通过JavaScript动态修改页面的DOM结构，插入自定义标签、样式或脚本，来实现它们的功能。空白页面没有原有内容，这些注入的元素就会直接暴露出来。
• 手机端浏览器默认安装的扩展很少，或者你没装相关插件，所以不会出现这种情况。
• 验证方法很简单：打开浏览器的无痕/隐私模式（该模式下默认禁用所有扩展），再访问ESP32页面，这些额外标签应该就会消失。如果确认是扩展导致，可以逐个禁用已安装的扩展，排查出具体是哪一个插件在搞鬼。

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