Unable to redirect to Kibana from webapp inside IFrame

[sumit_monga]

Hi All,
I have a usecase where I want to redirect from a webpage to Kibana by creating the html content of the page from server side and returning the html as source in src attribute inside of IFrame. However I am not able to do so as after redirection, page is stuck at the Kibana image which loads on startup .I have created the html for url http://X.X.X.X:5601/app/kibana . I can also notice that the referrer header in the request for the image and font is set to the web application and not to http://X.X.X.X:5601/app/kibana but as the Kibana page is loading these so I have the feel or confusion that Kibana url should be the referrer . Also there is no calls to css and js which happens when I open the Kibana url directly. these calls should also happen though maybe failing but still there. Am I missing something and any solution to achieving redirection to Kibana from webapp.

[Brandon_Kobel]

@sumit_monga just to clarify, you're generating HTML server-side that contains an iframe with the src attribute set to the Kibana URL; however you're getting stuck on the "Loading Kibana" screen?

The good news is that this configuration is supported. On a Dashboard you can click the 'Share' button which will give you the iframe HTML to use for embedding Kibana in another webpage.

Are you using X-Pack with this instance of Kibana/Elasticsearch? Also, do you see any messages in your browser's console? If you're using Google Chrome and right-click and select "Inspect" and then switch to the "Console" tab, do you see any message?

[sumit_monga]

Hi @Brandon_Kobel,
I am embedding the Kibana main screen as an iframe into a jsp file. My aim is to redirect the user of webapp to Kibana on a button click . My aim is not to open a specific dashboard but the main Kibana page. I am not giving src attribute in iframe tag to the Kibana url but to a web application endpoint which hits the Kibana url and generates html which is then returned as the src to the iframe. However this I am doing with security disabled for now. PS I have created a custom realm in X-Pack where I will need request headers in the request to validate the user request and authorize the same. I have raised a question regarding the same at Custom Realm authentication without headers

[Brandon_Kobel]

@sumit_monga interesting... if you view the web-application endpoint which hits the Kibana url and generates the HTML directly in your browser (the src attribute of the iframe) do you get stuck on the login screen as well? If you inspect the Network tab of your browser while doing so, it's my suspicion that you'll see the requests for all of the .js/.css failing because they're relative urls and the custom web application endpoint isn't proxying the requests to Kibana.

[sumit_monga]

@Brandon_Kobel it looks like the html generated for the Kibana page contains window.onload function in the script tag as shown below :

    <script>
window.onload = function () {
  var buildNum = 15104;
  var cacheParam = buildNum ? '?v=' + buildNum : '';
  function bundleFile(filename) {
    var anchor = document.createElement('a');
    anchor.setAttribute('href', "/bundles" + '/' + filename + cacheParam);
    return anchor.href;
  }
  var files = [
    bundleFile('commons.style.css'),
    bundleFile('kibana.style.css'),
    bundleFile('commons.bundle.js'),
    bundleFile('kibana.bundle.js')
  ];

  (function next() {
    var file = files.shift();
    if (!file) return;

    var failure = function () {
      // make subsequent calls to failure() noop
      failure = function () {};

      var err = document.createElement('h1');
      err.style['color'] = 'white';
      err.style['font-family'] = 'monospace';
      err.style['text-align'] = 'center';
      err.style['background'] = '#F44336';
      err.style['padding'] = '25px';
      err.innerText = 'Kibana did not load properly. Check the server output for more information.';

      document.body.innerHTML = err.outerHTML;
    }

    var type = /\.js(\?.+)?$/.test(file) ? 'script' : 'link';
    var dom = document.createElement(type);
    dom.setAttribute('async', '');
    dom.addEventListener('error', failure);

    if (type === 'script') {
      dom.setAttribute('src', file);
      dom.addEventListener('load', next);
      document.head.appendChild(dom);
    } else {
      dom.setAttribute('rel', 'stylesheet');
      dom.setAttribute('href', file);
      document.head.appendChild(dom);
      next();
    }
  }());
};</script>

So when I am setting the src attribute of iframe to this html via ajax call, then this window.onload function is not executed and so the js and css files are not loaded and I am stuck at Kibana screen loading . Also when loading Kibana directly , then these are executed and js and css are loaded and the same is not done in case of redirection. Can this be the real issue ?

[Brandon_Kobel]

The iframe itself should be firing the window.onload event because the iframe is emulating an embedded browser.

[sumit_monga]

@Brandon_Kobel yes you are right in that window.onload should be fired but when I get the html for Kibana inside the iframe, there is no call to load the js and css as defined inside the bundleFile . The only calls that are fired are the open_sans font call and another for image . The call for js and css may fail but it is not triggered as confirmed from the developer console and network.