CODEWITHSUNDEEP
htmlbrowserpopup
Aakash Chakravarthy
Aakash Chakravarthy

Reputation: 10691

Load iframe content with different user agent

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 ??

Upvotes: 22

Views: 43174

Answers (6)

EoghanM
EoghanM

Reputation: 26944

The following has a chance of working iff:

  • the requested website provides permissive CORS headers in the response e.g. Access-Control-Allow-Origin: * which enables loading over ajax
  • the browser supports changing User-Agent in XHR (apparently this is no longer forbidden by the spec)

const MOBILE_UA = 'Mozilla/5.0 (iPhone;...'  // copy from your dev tools
const YOUR_IFRAME_SRC_URL = 'https://example.com';

const iframe = document.createElement('iframe');

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    // might need some escaping of xhr.response here
    iframe.srcdoc = xhr.response;
    document.body.appendChild(iframe);
  }
};
xhr.open("GET", YOUR_IFRAME_SRC_URL);
xhr.setRequestHeader('User-Agent', MOBILE_UA);  // succeeds in FF anyhow
xhr.send();

Upvotes: 0

Aero Wang
Aero Wang

Reputation: 9227

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.

Upvotes: 10

MSZ
MSZ

Reputation: 90

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.

Upvotes: -3

ChuckE
ChuckE

Reputation: 5688

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.

Upvotes: 1

Fluidbyte
Fluidbyte

Reputation: 5210

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?

Upvotes: 7

Billy Moon
Billy Moon

Reputation: 58541

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

Upvotes: 6

Related Questions