21

Is it possible to load an iframe with different user agent ?? Using a mobile user agent for an iframe will help my app to show mobile sites as hover popup.

For example, Google shows the mobile search results page only if the user agent is from a mobile one.

Is there any alternate solutions or is there any security risks involved in this idea ??

Aakash Chakravarthy
  • 10,523
  • 18
  • 61
  • 78
  • I think you'd have to proxy the page with a server. If you use some simple PHP you could probably manage to send fake headers. – TheZ Oct 11 '12 at 17:45

5 Answers5

10

First of all, you must create a function to change the user agent string:

function setUserAgent(window, userAgent) {
  if (window.navigator.userAgent != userAgent) {
    var userAgentProp = {
      get: function() {
        return userAgent;
      }
    };
    try {
      Object.defineProperty(window.navigator, 'userAgent', userAgentProp);
    } catch (e) {
      window.navigator = Object.create(navigator, {
        userAgent: userAgentProp
      });
    }
  }
}

Then you need to target the iframe element:

setUserAgent(
    document.querySelector('iframe').contentWindow, 
    'Aakash Chakravarthy Mobile Agent'
);

You may also set an ID to the iframe and target the ID instead of all iframe elements on the page.

Olian04
  • 6,480
  • 2
  • 27
  • 54
Aero Wang
  • 8,382
  • 14
  • 63
  • 99
  • nice solution although I had to change document.querySelector to document.getElementById – Guy Lowe Mar 08 '16 at 23:20
  • 2
    Is this supposed to work in Chrome? I cannot get it to set the iframe's userAgent. No errors are thrown though. – philk Mar 09 '16 at 12:02
  • 3
    @philk it is not supposed to work with any modern browser with enhanced security features. – Aero Wang Jul 06 '17 at 06:33
  • This is not working for me right now in Windows Google Chrome Version 78.0.3904.108 (Official Build) (64-bit) – Ryan Dec 16 '19 at 17:58
  • @Ryan it is not supposed to work with any modern browser with enhanced security features. – Aero Wang Dec 17 '19 at 02:03
  • I used `user-agent` instead of `userAgent` like `Object.defineProperty(window.navigator, 'user-agent', userAgentProp);` and it works. – Mahmonir Bakhtiyari Aug 02 '21 at 07:55
7

You can do it with JavaScript:

navigator.__defineGetter__('userAgent', function(){
    return 'foo' // customized user agent
});

navigator.userAgent; // 'foo'

However, this will only work with a select number of browsers.

See this question: Mocking a useragent in javascript?

Community
  • 1
  • 1
Fluidbyte
  • 5,162
  • 9
  • 47
  • 76
6

You could create a proxy that makes requests with a different user agent, and then load the iframe content through the proxy.

Billy Moon
  • 57,113
  • 24
  • 136
  • 237
  • 1
    Sounds pretty clever, probably the only solution when hitting cross-origin issues. Can you give a link to a SO question that deals with this? I'm not finding the right keywords to get good search results... (ps: just remembered about cors-anywhere, will try something with it) – brasofilo Jan 15 '19 at 00:33
  • @brasofilo I added capability to my personal little dev server (published as version 2.7.0) and got it to work as expected with the last code block documented in the proxy section here: https://github.com/billymoon/sir#proxy – Billy Moon Jan 15 '19 at 22:24
1

From what I see, you have two solutions:

  • Most of the websites don't render per user agent, they just recognize the user agent and redirect the user to the mobile view, reachable under a different domain (http://m.youtube.com/, for instance) or some other URL segment. You just have to check their documentation, get their mobile URL and load it in the iframe.

  • The other solution is point the Iframe to your application, and then fetch the document from your backend. Then you can change the request user agent.

From HTML is impossible to influence the request headers. But you can do it with javascript.

ChuckE
  • 5,610
  • 4
  • 31
  • 59
-3

I'm guessing one may only change the user agent information for the entire browser window or tab. By loading the iframes at different times, one could change the user agent between loads to get two different iframes on one page with different user agent related content. I tested this with a trivial example page:

<!DOCTYPE html> <html> <body>
<iframe src="http://whatsmyuseragent.com/" name="mobile" width="60%" height="400px"></iframe>
<a href="http://whatsmyuseragent.com/" target="mobile">Mobile Spoof</a>
<iframe src="http://whatsmyuseragent.com/" name="pc" width="60%" height="400px" ></iframe>
</body> </html>

After loading this page in Firefox 36.0.1, I used the User Agent Switcher extension https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/ to select iPhone 3.0, and then clicked the "Mobile Spoof" link to reload that frame. At that point I saw the same page showing a different user agent in each iframe. I'm sure the page load or reload timing could be automated with the setTimeout() method, or perhaps via event handlers. I'm not sure how to automate the user agent switch. I tried the setUserAgent function suggested by Aero Windwalker, but could not get it to work in Firefox 36 or Chrome 41. I would also like to create a page that does this well.

MSZ
  • 80
  • 4