配置Chrome支持网页内的frame跨域

原创 曦远 程序设计实验室 1周前

前言

跨域限制可以保证安全，但是调试的时候关掉会更方便，然而现在网络上能找到的关闭跨域限制方法，在新版的Chrome浏览器上根本没用……

经过一番摸索，发现用旧版的Chrome就可以绕过跨域限制，刚好我做的这个需要跨域内嵌frame的网页只是单纯展示的，所以这个正好符合我的需求，奥利给！

然后我找到了旧版的Chrome软件，解压出来是绿色版的可以直接运行，不过运行后发现直接把系统的Chrome给调起来了，然后只好放到Windows10的沙盒里面运行，（不得不说这个沙盒真的方便）

要取消Chrome的跨域限制，请在Chrome的快捷方式里加上命令行参数 --disable-web-security，如图所示：

运行之后会弹出提示说使用了不支持的命令行参数，会降低安全性啥的，就说明成功了，这时访问带有跨域frame的网页就是可以了

使用js操作frame中的元素

这部分是附加内容，简单说一下… 网络上一搜索都有的

首先是要确定frame或者iframe内的网页啥时候加载好，我懒得判断了，所以弄了个按钮，人肉判断，等frame里的网页加载完，按一下这个按钮，就实现自动把用户名密码填入frame内的网页并且自动登录

document.querySelector('#btn-login').onclick = function () {
    var iframe_window = document.getElementById('hik').contentWindow
    var iframe = iframe_window.document
}

然后就可以 iframe.querySelector 随意操作 frame内的DOM了

参考资料

• 谷歌浏览器Chrome 80版本默认SameSite导致跨域请求Cookie丢失：http://www.withcoder.com/articles/server_side/zs/434.html
• iframe 跨域，有没办法获取 iframe子页面元素：https://segmentfault.com/q/1010000017568917/a-1020000017570521