Paste angularjs application into another angularjs application

Question

I am trying to embed grafana in my angularjs application. I can do this easily with a simple iframe, but my application uses jwt for authentication, and I cannot find a way to set the header for the iframe. I have confirmed that it works fine when I enable authentication with a basic iframe, but I need it to be enabled for use.

I also tried using $http to get grafana html (this way I can set my jwt header), but js doesn't seem to work using this method. I assume this is due to bootstraping, as they load manually.

 //iframe <iframe id="grafana" layout-fill flex></iframe> //controller $http.get('/grafana/dashboard').then(function(response) { var iframeDocument = document.getElementById('grafana').contentWindow.document iframeDocument.open('text/html', 'replace') iframeDocument.write(response.data) iframeDocument.close() }) 

Is there any other way to set the title on an iframe? I also tried using grafana html as a template, but as I said, loading them does not work in another application.

Answer 1

You do this, it should work:

 $.ajax({ type: "GET", url: "/grafana/dashboard", contentType: "application/json", beforeSend: function(xhr, settings){ xhr.setRequestHeader("some_custom_header", "foo");}, success: function(data){ $("#output_iframe_id").attr('src',"data:text/html;charset=utf-8," + escape(data)) } });