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.

It's impossible to say without more debugging. Look at the Network tab of the Developer Tools and look for any errors. The page you are showing looks like a 500 Internal Server Error, which is thrown by ASP.NET, which is not something you're going to be able to solve without altering the code for the intranet site. — Heretic Monkey, May 08 '20 at 12:30
@SimoneRossaini I can't as it is an internal website of my company. — Eray Balkanli, May 11 '20 at 15:52

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 08 '20 at 13:06

Lajos Arpad

64,414
37
100
175

In Step 4, once i change src="/myintranetproxy" to "https://www.myintranetsite.com", I am getting the jquery error still. Maybe I got you wrong? "write that html as it is instead of hello world", can you please explain in an example what to do for step 4? – Eray Balkanli May 12 '20 at 13:37
@ErayBalkanli unfortunately I do not know about your server-side tech stack, so I will improvise with the assumption that you use PHP. Assuming that you send a GET request via file_get_contents or cURL (see https://stackoverflow.com/questions/959063/how-to-send-a-get-request-from-php) and receive the response into a variable, you can generate your page using their HTML via ``````. If you have another tech stack, you can act rather similarly, but with different syntax of course. – Lajos Arpad May 13 '20 at 10:39
@ErayBalkanli with this approach your jQuery issue is not necessarily resolved at step 4, because they might have been including jQuery via a ```script``` tag using relative URL (see https://stackoverflow.com/questions/2005079/absolute-vs-relative-urls). If the other page uses a relative URL for jQuery and you use that HTML as it is in your site, then jQuery will be searched for at your server at the same relative URL as specified in the tag. This is why Step 5 exists. Note that on step 5 we deal with several different tag types, including ```script```, which deals with your jQuery reference – Lajos Arpad May 13 '20 at 10:42
@ErayBalkanli among others. Step 5 instructs you to ensure that iframe, script, link and img tags use absolute URL (see the link in the previous comment), so you will need to transform any relative URLs in the raw HTML you receive before you send it to the browser. So, the issue you experience looks very much to be related closely to relative URLs being copied to your page. Check the page source of the page you intent to put into an iframe. There is a jQuery reference in a script tag, where the src does not start with the root URL of their site. That's the problem. – Lajos Arpad May 13 '20 at 10:45

score 0 · Answer 2 · answered May 08 '20 at 12:23

0

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

answered May 08 '20 at 12:23

David Bradshaw

11,859
3
41
70

Thanks, they both use HTTPS – Eray Balkanli May 11 '20 at 15:51

score 0 · Answer 3 · answered May 12 '20 at 10:20

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).