How to view a web page including JQuery with an iframe in Google Chrome
Question
We have an intranet website, lets call it https://www.myintranetsite.com . Note that I can't access its source code.
I would like to use it in another web page in an IFrame, so I am creating a very basic HTML page like:
<html><body>
<div>
<iframe id="myIframe" width="100%" height="1200px" src="https://www.myintranetsite.com/"></iframe>
</div>
</body></html>
When I open the HTML page with Microsoft Edge, it works, however Google Chrome does not work and it shows the error below:
When I do F12 in the browser, the error message I see in the console is on below:
Uncaught ReferenceError: $ is not defined at login?isajax=true:19
As I understand, JQuery is used in the myintranetsite.com and Chrome does not load it for some reason, probably security related... Version of Chrome: 81.0.4044.122 (64bit)
How can I overcome this issue? I've tried those but no help:
- clearing the cache ,
- adding myintranetsite to trusted sites in internet options ,
- clearing SSL Stage ,
- disabling cookies in chrome
I've checked this but it did not help either: jQuery/iframe not working in Chrome
Any help or advice would be appreciated.
3 answers
solution1
2 2020-05-08 13:06:16
Your understanding that this is prevented by security measures is correct, basically you get a jQuery error because jQuery would be loaded by the inner page, but since the inner page is not loaded, it's not loading jQuery either. You will need to create some proxy pages, let's see the steps:
Step 1
Create a separate page, let's call it myintranetproxy. I will assume that the location of this page you create is /myintranetproxy, so, if you have different routes, feel free to make the changes you need.
Step 2
Make sure that myintranetproxy shows a text or something at this stage, like 'Hello World', just to ensure that it's loaded at the next step.
Step 3
Load myintranetproxy:
<html><body>
<div>
<iframe id="myIframe" width="100%" height="1200px" src="/myintranetproxy"></iframe>
</div>
</body></html>
now you should see your temporary content inside the iframe .
Step 4
Change myintranetproxy, it should now send a GET request to https://www.myintranetsite.com/ and once the response arrives, write that HTML as it is instead of your "Hello World"
Step 5
Make sure that you change any URL in the response you get to the absolute URL of the page. This will affect iframe , script , link , img tags. You can implement this, or use an HTML parser for this purpose.
solution2
0 2020-05-08 12:23:03
The most likely cause is that your somehow mixing HTTP and HTTPS. Chrome really does not like this, make sure your parent page and the page in the iframe are both using the same protocol
solution3
0 2020-05-12 10:20:41
Sometimes iFrames are disabled as mitigation against clickjacking attempts.
In order for the intranet site to be framed, all of the mitigations below would need to be disabled.
- Content Security Policy (CSP) frame-ancestors directive
- X-Frame-Options Response Headers
- Legacy Browser Frame Breaking Script
more about those clickjacking mitigations and how to enable/disable those protections can be found here
Also, if your site requires session cookies, the end-user will have to ensure that third party cookies are enabled. (Safari has them turned off by default for example).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.