2

This question specifically regards the localhost. I am trying to embed a localhost web page in another localhost web page however it states that this cannot be done. This was the message in chrome developer tools:

Refused to display 'http://127.0.0.1:4040/jobs/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Pictured here

I have tried to use both firefox and chrome. This is the error message from firefox:

Load denied by X-Frame-Options: “SAMEORIGIN” from “http://127.0.0.1:4040/jobs/”, site does not permit cross-origin framing from “http://localhost:8888/lab”.

Why is localhost not considered to be the same origin?

How can I remove this restriction on my localhost?

Thank you in advance.

N.B. I would prefer to use iframes over AJAX requests unless AJAX can copy over the web page in the same fashion as iframes are capable of doing.

Umer
  • 21
  • 2
  • 5

2 Answers2

0

I don't know if there are any additional rules about localhost, but in general, the port number is part of the origin. So for it to count as same-origin, you need to use the same port number, i.e. a single web server.

If you absolutely need to use multiple servers for some technical reason you can have one server act as a "reverse proxy" for the other, or use a single reverse proxy server talking to both.

Kevin Reid
  • 37,492
  • 13
  • 80
  • 108
0

Kevin Reid's answer is correct and his proxy server solution is also correct. But I'll add a bit more detail.

From Mozilla Developer Network

Two URLs have the same origin if the protocol, port (if specified), and host are the same for both. You may see this referenced as the "scheme/host/port tuple", or just "tuple". (A "tuple" is a set of items that together comprise a whole — a generic form for double/triple/quadruple/quintuple/etc.)

http://127.0.0.1:4040 and http://localhost:8888 are not of the same origin. Heck, maybe even http://127.0.0.1 and http://localhost are not of the same origin based on the definition.

How to fix? This solution is specific to IIS 10 Windows Server 2016. But the idea as Kevin said is to enable "reverse proxy".

  1. Install Application Request Routing.
  2. Go to Application Request Routing Cache -> Server Proxy Settings and check Enable Proxy.
  3. Go to URL Rewrite and create an Inbound rule. That will be two inbound rules (port 4040 and 8888). The objective of this is to route localhost/jobs to localhost:4040/jobs and localhost/labs to localhost:8888/labs. In effect this will make both web servers of the same origin, http://localhost.
  4. Your pattern will likely be something like jobs(/)?(.*) and rewrite URL http://localhost:4040/jobs/{R:2} for the jobs web server. Test the pattern to get the {R:x} right.
  5. Test using your browser if you can access http://localhost/jobs and http://localhost/labs.
  6. iframe should work now.
jpllosa
  • 2,066
  • 1
  • 28
  • 30