Configure Chrome to Support Cross-Origin Frames in Web Pages

Preface

Cross-origin restrictions can ensure security, but turning them off is more convenient when debugging. However, the methods for disabling cross-origin restrictions that can be found online nowadays simply don't work on newer versions of Chrome...

After some exploration, I found that using an older version of Chrome can bypass the cross-origin restrictions. The page I made that needs a cross-origin embedded frame is just for display, so this happens to fit my needs. Let's go!

Then I found an old version of Chrome. After extracting it, it was a portable version that could run directly, but after launching it I found it just started the system's Chrome, so I had to run it inside the Windows 10 sandbox (I have to say this sandbox is really convenient)

To disable Chrome's cross-origin restrictions, add the command-line argument --disable-web-security to Chrome's shortcut, as shown in the figure:

After running it, a prompt will pop up saying that an unsupported command-line argument was used and that it will reduce security, etc., which means it succeeded. At this point, visiting pages with cross-origin frames will work.

Using JS to Manipulate Elements Inside a Frame

This part is extra content, I'll briefly mention it... You can find it all with a search online

First you need to determine when the page inside the frame or iframe has finished loading. I was too lazy to check for that, so I made a button and judged it myself: wait until the page in the frame has loaded, then click this button, and it will automatically fill in the username and password on the page inside the frame and log in automatically

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

Then you can use iframe.querySelector to freely manipulate the DOM inside the frame

Download Old Versions of Chrome

Chrome 45 version: https://pan.baidu.com/s/1bCv9W8gcm9oi0tHOKuAgGw (extraction code: 74xr)

For more versions, see this: https://www.zhihu.com/question/20364836

References

• Chrome 80's default SameSite causing cookies to be lost on cross-origin requests: http://www.withcoder.com/articles/server_side/zs/434.html
• iframe cross-origin, is there a way to get elements of the iframe child page: https://segmentfault.com/q/1010000017568917/a-1020000017570521

Feel Free to Discuss

Programming Lab focuses on exploring popular new internet technologies and team agile development practices. Reply with linux, flutter, c#, netcore, android, kotlin, java, python, etc. in the backend of the WeChat official account 「程序设计实验室」 to get related technical articles and materials. If you have any questions, you can also leave a message in the official account backend~