chrome提示https不安全, 不能记住账号密码怎么办? 可以利用js输入账号

背景: 在内网搭建的服务, 由于https证书问题, 可能会被chrome浏览器提示不安全

此时, 默认的记住账号密码功能就无法使用, 那么此时只能手动输入了吗?

想到了几种方案

1.利用外置软件, 模拟按键输入(比如按键精灵, 缺点是依赖外部软件, 运行速度也慢, 且执行时占用了输入焦点)

2.使用js在进入登录页后, 修改user_name元素的value(常规网站都好使, 用浏览器插件如油猴执行即可)

写法如下

$(".userName").attr("value", "test_user_9527"); // 填你的用户名

3.有些网站直接修改user_name就不好使了, 由于本人不熟前端React

因此想到了, 直接拦截所有发送请求, 针对具体登录地址替换user_name

实现的效果是随便输入字符都可以替换成指定的账号, 不用再去记住账号

以下是完整的油猴插件 js代码

// ==UserScript==
// @name        自动填账号
// @namespace   Violentmonkey Scripts
// @match       https://localhost:8080/test/login
// @grant       none
// @version     1.0
// @author      -
// @require      https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js
// ==/UserScript==


(function() {


function waitForElement(selector, callback) {
    var element = $(selector);
    if (element.length) {
        // 元素已经存在，直接执行回调
        callback(element);
    } else {
        // 元素不存在，等待其加载
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if ($(selector).length) {
                    // 元素已添加到DOM中，执行回调
                    callback($(selector));
                    // 停止观察
                    observer.disconnect();
                }
            });
        });

        // 配置观察器选项
        var config = { attributes: false, childList: true, characterData: false, subtree: true };

        // 选择目标节点
        var target = document.body;

        // 启动观察器
        observer.observe(target, config);
    }
}

// 使用方法：
$(document).ready(function() {

  // 代理加载开关
  var proxySwitch = false;

	// 假设登录框是 class='userName'
    waitForElement('.userName', function(element) {
      // 当#yourElement加载完成后，这里的代码将被执行
      console.log("等待元素加载完成，执行回调函数");

       $(".userName").on("click", function() {

         // 代理只执行1次
         if(proxySwitch){
          console.log("proxySwitch: ", proxySwitch, "end...")
          return;
        }

         // ====拦截发送请求=======
        function interceptAndModifyRequest(request) {
          if (request.url === 'https://localhost:8080/test/user/login') {
            // 克隆请求以读取请求体
            let clonedRequest = request.clone();

            // 读取请求体
            return clonedRequest.text().then(body => {
              // 解析请求体
              let parsedBody = JSON.parse(body);

              // 修改 username
              if (parsedBody.params && parsedBody.params.username) {
                parsedBody.params.username = 'test_user_9527'; // 填你的用户名

                // 将修改后的请求体转换回字符串
                let newRequestBody = JSON.stringify(parsedBody);

                // 创建新的请求对象
                let newRequest = new Request(request.url, {
                  method: request.method,
                  headers: request.headers,
                  body: newRequestBody,
                  mode: request.mode,
                  credentials: request.credentials,
                  cache: request.cache,
                  redirect: request.redirect,
                  referrer: request.referrer,
                  referrerPolicy: request.referrerPolicy,
                  integrity: request.integrity
                });

                return newRequest;
              }

              return request;
            });
          }

          return request;
        }


        window.fetch = new Proxy(window.fetch, {
          apply: function (target, thisArg, argumentsList) {
            let request = argumentsList[0];

            // 如果请求是一个字符串，将其转换为 Request 对象
            if (typeof request === 'string') {
              request = new Request(request);
            }

            // 调用拦截器函数
            return interceptAndModifyRequest(request).then(modifiedRequest => {
              // 使用修改后的请求替换原始请求
              argumentsList[0] = modifiedRequest;
              return Reflect.apply(target, thisArg, argumentsList);
            });
          }
        });
      // ====拦截发送请求 end =======

      proxySwitch = true;
    });


    });
});


  })();