I have a web app written in javascript and C#. The web app contains an iframe in one of its pages. I need to embed an external web site (controlled by the client, and protected by an API Key) into this iframe.

Before I chose to mark this as doable I did a test, downloading requestly chrome extension, and injecting the API Key into the Authorization header whenever the Cross-Origin-Request is made by chrome to the external web site. The site loaded into the iframe perfecto. no complications. I’ve also done this with Fiddler as an experiment. The Cross-Origin-Request is made by chrome, and Fiddler then intercepts the request, injects the Auth header and viola, iframe loads the site seamlessly!

Please note, the external URL is not an endpoint that returns data, but simple a web page that displays a dashboard. And this web page is secured by an API Key, which can only be passed in through an Authorization Header. So this makes it somewhat a little more tricky.

Given the above, We cannot expect every client to download and configure requestly, or Fiddler for that matter, and update the API keys should they be updated. This is definately a no go for us. So I need to have this done in our code (javascript, or C#), so I’ve tried:

• Service Workers (but this is not allowed for Cross-Origin-Requests)
• I’ve looked at creating a URL rewrite rule in IIS but got stuck here and spent way to much time on this so I don’t think this will work either
• Creating a simple javascript fetch statement I don’t think will work either as this fetches the content from the external site as if it were static, which breaks navigability on the site in addition to not loading styles e.t.c. You can see this when doing it through postman.
• I’ve tried InterceptRequestsJS, but this does not seem to work. will have a look again just to be sure.

So it almost feels near impossible a task. Is this something doable? When I enable requestly and look at the network traffic, the first call to the web site issues a 307 redirect with what looks like a Auth cookie. The Auth cookie is then stored in the browser under the external web site domain, then a second call is made to the “Location” response header of the 307 redirect, which then calls the site again but this time, the browser says, “hey, here’s the cookie, send that along” and viola! the site loads.

Given the above, I will need to mimick this either by:

• Using a javascript fetch statement (but wrestling with CORS errors at the moment) and then hope that the cookie is consumed by chrome.
• Or use a nice tool that someone wrote that can do all this for me, almost like a ‘mini’ requestly package for javascript, for which I have searched but struggling to find something that works. (Will keep on searching…)

Has anyone had the same requirements? I would preferrably want to use C# as a type of proxy for this so that I don’t expose the API Key on the front end. However, javascript is probably then also an option.

Any help would be greatly appreciated.
Thanks