无法通过脚本注入在某些网站上执行 Javascript

Question

我试图在页面加载后将 React 脚本注入网站/

我能够让它在大多数网站上运行，例如 https://google.com、https://discovercard.com、https://stackoverflow.com、https://capitalone.com。

但是，当我在 https://chase.com 或 https://bankofamerica.com 中执行相同的脚本时，我在使用 Babel.transform 转换 JSX 时遇到参考错误，因为 @ 987654328@ 未定义。

然而，所有必需的脚本都已下载，如网络选项卡和 DOM 中所示。

如果 HTML 中有任何特定的标签或属性阻止在这些网站上执行 Javascript，请告诉我。似乎银行网站这样做是为了防止外部 Javascript。

这是我在开发者控制台上尝试的代码

注意：世界你好！由于setTimeout

，在 5 秒后出现

const react = document.createElement("script");
react.src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"
document.body.appendChild(react);

const reactDom = document.createElement("script");
reactDom.src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"
document.body.appendChild(reactDom);

const babel = document.createElement("script");
babel.src = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"
document.body.appendChild(babel);

const rootDiv = document.createElement("div");
rootDiv.id = "app";
rootDiv.style="width: 100px; height: 100px; position: absolute; top: 0px; left: 0px; z-index: 999999";
document.body.appendChild(rootDiv);

setTimeout(() => {
  const babelScript = document.createElement("script");
  babelScript.type = "text/babel";

  const jsxCode = "ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('app'));"

  const babelTransformCode = Babel.transform(jsxCode, { presets: ["react"] } ).code;

  eval(babelTransformCode);
}, 5000)

Answer 1

这两个不工作的网站都在使用 requireJs，所以它们不是在 window 上加载模块，而是使用 define 加载。

做起来很简单，只需在脚本的其余部分之前调用define = undefined，它就可以像处理其他站点一样工作。为了安全起见，UMD 加载器似乎也会检查 export 和 modules.exports，因此您可能也希望将它们设置为 undefined。

define = undefined;
exports = undefined;
if (window.module) module.exports = undefined;

您正在使用的库是使用通用模块定义打包在一起的。这样他们就可以使用各种各样的模块加载器，例如 requireJs。 UMD 模式查找由模块加载器定义的公共变量，因此通过将这些变量设置为未定义，它会导致模块被全局加载并且可以被您的脚本访问。