在开发模式下，reactjs 应用程序中意外注入了 iframe

Question

我有一个 React 应用程序，但大多数时候，当我对源代码进行更改时，浏览器会重新加载新代码，但 iframe 会在整个应用程序中注入到应用程序中

我已经审查了我的源代码，当然我不是自己做的，而且，我审查了我安装的 Chrome 扩展，基本上就是这些（复制所有 URL、Google Docs Offline、Redux DevTools、Redux DevTools ）

我在 package.json 文件中安装的所有库都是

{
  "name": "react-ui-generator",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^1.2.6",
    "@babel/core": "^7.14.6",
    "@date-io/date-fns": "^1.3.13",
    "@material-table/core": "~4.3.1",
    "@material-table/exporters": "^1.0.12",
    "@material-ui/core": "~4.12.3",
    "@material-ui/icons": "~4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@material-ui/pickers": "^3.3.10",
    "@monsonjeremy/react-leaflet-core": "^1.1.1",
    "@react-leaflet/core": "npm:@monsonjeremy/react-leaflet-core",
    "@reduxjs/toolkit": "^1.6.0",
    "@rjsf/core": "~3.1.0",
    "@rjsf/material-ui": "~3.1.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "aws-amplify": "^4.2.0",
    "axios": "^0.21.1",
    "connected-react-router": "~6.9.1",
    "date-fns": "^2.0.0-beta.5",
    "formik": "^2.2.9",
    "guid": "0.0.12",
    "http-proxy-middleware": "^2.0.1",
    "immutability-helper": "~3.1.1",
    "isomorphic-ws": "^4.0.1",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.21",
    "material-ui-nested-menu-item": "^1.0.2",
    "node-sass": "5.0.0",
    "notistack": "^1.0.10",
    "placeholder-loading": "^0.5.0",
    "react": "^16.14.0",
    "react-color": "^2.19.3",
    "react-dom": "^16.14.0",
    "react-leaflet": "npm:@monsonjeremy/react-leaflet@3.2.1",
    "react-leaflet-markercluster": "^3.0.0-rc1",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-simple-oauth2-login": "^0.5.1",
    "react-spring": "^9.3.1",
    "rxjs": "^7.3.0",
    "typescript": "^4.3.5",
    "web-vitals": "^1.0.1",
    "ws": "^7.5.3",
    "yup": "^0.32.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.12",
    "@storybook/addon-links": "^6.3.12",
    "@storybook/node-logger": "^6.3.12",
    "@storybook/preset-create-react-app": "^3.2.0",
    "@storybook/react": "^6.3.12",
    "@types/leaflet": "^1.7.5",
    "path": "^0.12.7",
    "react-json-editor-ajrm": "^2.5.13",
    "storybook": "^6.3.12",
    "storybook-addon-material-ui": "^0.9.0-alpha.24",
    "storybook-addon-mock": "^1.7.0"
  }
}

我认为这些都没有注入这个 iframe。

我还可以查看哪些内容来修复/删除这个意外的 iframe？

因为每次手动刷新页面或手动删除此 iframe 真的很烦人，因为会阻止整个页面的点击。

Answer 1

长话短说

您是否检查过控制台是否有在 React 应用程序外部发出的未捕获错误？这似乎发生在开发构建期间，当create-react-app的错误捕获机制变得混乱时。

更长的猜测

我也一直看到这个。这不是完整的答案，但可能会帮助您找到自己的错误。

看来这个覆盖层是一个create-react-app出错的错误捕获机制。<script>在我们的例子中， React 应用程序代码之外的标签完全抛出了错误。它可能是由 Google Tag Manager SDK 生成并附加到 DOM 的：

<script type="text/javascript" id="">fbq("trackCustom","Purchase Successful - Free");</script>

我们确实会触发该特定事件，但实现细节对我们的 React 应用程序是隐藏的。fbk在我们的开发环境中未定义（与 Facebook 跟踪相关），因此它会抛出 aReferenceError并弹出您所描述的覆盖层。

至于为什么create-react-app会生成一个完全透明的边到边空 iframe 来阻止所有点击，我不知道。