likes
comments
collection
share

为了伪装,如何给网页注入脚本

作者站长头像
站长
· 阅读数 58

缘起

最近要演示一个新的想法, 这个想法是要在一个现有的页面添加一个新功能, 然而这个页面是别人开发的, 改它现有的代码不合适, 发布到测试环境更不可能了. 为了在现有页面上添加这个新功能, 一个可行的想法就是通过给这个页面注入脚本的方式, 添加新功能. 通过注入 JavaScript 脚本, 不仅能够改变现有的页面处理逻辑, 还能改变页面的事件响应, 添加UI元素, 更改CSS等.

如何注入 JavaScript, 我们想到并尝试了下面的方案.

1. 直接在浏览器控制台执行脚本

这种是最直接的方案, 直接在控制台执行想要的脚本, 然后页面就更改了.

下面的几种方案都是想如何其它方式注入脚本, 隐藏执行脚本的操作.

2. iframe 嵌套

新做一个页面, 把原有页面通过 iframe 的形式嵌套进去, 这样在新页面(父页面)就可以操纵原有页面(通过iframe 嵌套进来的子页面)了. 于是我们做了一个测试页面, 内部嵌套一个 iframe, 如下:

<html>
    <body>
        <iframe id="originPage" src="https://www.tianxiaohui.com" style="width:100%;height:1200px; border:none;"> </iframe>
    </body>
    <script>
        let iframe = document.getElementById('originPage')
        iframe.addEventListener('load', function() {
          let iframeWindow = iframe.contentWindow;
          iframeWindow.document.title = "New Title for Iframe";
          iframeWindow.document.getElementById("logo").innerHTML = "new title";
        });
      </script>
</html>

在这个测试页面里面, 我们想更改原有页面的title. 看上去除了url不像, 伪装的还很像, 只不过这段 JavaScript 因为同源策略, 被拦住了.

为了伪装,如何给网页注入脚本

同源策略要求协议, 主机名, 端口都必须一致, 才被认为同源, 所以我们无法做到同源. 即便我可以更改本地的/etc/hosts 文件, 添加一行10.249.64.103 test.www.tianxiaohui.com, 仍然不是同源. 要不被同源策略拦截, 除非原页面设置合适的跨域资源共享 (CORS) 头部来允许不同源之间的通信, 这个我们无法更改.

这种尝试到此结束, 放弃.

3. 收费代理软件

一位精通测试的同事, 提供了一个本地代理收费软件(Charles), 安装它, 然后各种设置, 最后它拦截所有的本地出去的流量, 可以通过它的 map local 功能把某个 JavaScript 给拦截掉, 替换成我们的 JavaScript, 这样就能工作了.

4. chrome 扩展插件

chrome 扩展插件可以给访问的网页注入脚本. 下面制作一个简单的 chrome 插件.

首先创建一个文件夹 myext

$ mkdir myext && cd myext

添加一个脚本文件 contentScript.js

$ vim contentScript.js

它的内容如下:

console.log("exec inject script");

添加一个元数据文件 manifest.json

$ vim manifest.json

它的内容如下:

{
  "manifest_version": 2,
  "name": "Your Extension",
  "version": "1.0",
  "permissions": [
    "tabs",
    "https://www.tianxiaohui.com"
  ],
  "content_scripts": [
    {
      "matches": ["https://www.tianxiaohui.com/"],
      "js": ["contentScript.js"]
    }
  ]
}

然后在 chrome 扩展插件管理页面 load unpacked 插件, 就能把这个插件加载进来.

为了伪装,如何给网页注入脚本

然后就是真实测试了:

为了伪装,如何给网页注入脚本

添加一个大的JavaScript 文件

上面的 contentScript.js 文件中只是添加了一行输入, 如果有个大的JavaScript文件, 并且希望在其它在原有页面都加载执行完再执行, 可以通过下面的方式:

  1. 在 myext 文件夹添加新的 Javascript 文件: my.js
  2. 更改 manifest.json, 添加网页可以访问的插件资源
"web_accessible_resources": [
  "my.js"
],
  1. 更改 contentScript.js, 变成下面的内容
console.log("exec inject script");

window.onload = function() {
  console.log(document.readyState);
  var script = document.createElement("script");

  script.src = chrome.extension.getURL("my.js");
  script.type = "text/javascript";
  document.body.appendChild(script);
  script.onload = function() {
      console.log("Injected script has been loaded and executed");
  };
};

然后运行, 可以看到这些脚本已经被执行.

转载自:https://juejin.cn/post/7246025362970624056
评论
请登录