title: Embedding a Secured Grafana into Web Application
body: <p>I want to embed Grafana into my web application using AngularJS. The goal is, when user is in my application, she should be able to click on a button and load the Grafana UI. In itself, this is an easy task. To do this, I have apache  proxying Grafana and returning any necessary CORS headers. The apache reverse proxy config is as follows:</p>
  
  <pre><code>    Header always set Access-Control-Allow-Origin "*"
      Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
      Header always set Access-Control-Max-Age "1000"
      Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, Authorization, accept, client-security-token"
  
  
      RewriteEngine on
      RewriteCond %{REQUEST_METHOD} OPTIONS
      RewriteRule ^(.*)$ $1 [R=200,L]
      RewriteCond %{REQUEST_METHOD} OPTIONS
      ProxyPass / http://localhost:3000/
  </code></pre>
  
  <p>All works perfectly fine when no security is involved. The  following code is a simple HTML/Javascript that shows what I am doing:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://requirejs.org/docs/release/2.1.11/minified/require.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-1.11.3.js"&gt;&lt;/script&gt;
  &lt;body &gt;
  &lt;script&gt;
      var app = angular.module('myApp', []);
  
      app.controller('MainCtrl', function ($scope, $http, $sce) {
  
      $scope.trustSrc = function(src) {
              console.log(src);
              return $sce.trustAsHtml(src);
      }
  
      $http({
              method : 'GET',
              url : 'http://grafana-host.com',
  
      }).success(function(response) {
              $("#test").attr('src', 'http://grafana-host.com')
              $("#test").contents().find('html').html(response);
  
      }).error(function(error) {
              console.log(error);
      });
  });
  &lt;/script&gt;
  
  &lt;div ng-app="myApp" ng-controller="MainCtrl"&gt;
  
  &lt;iframe id="test" style="position: absolute; top: 50px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; border: none; margin: 0; padding: 0; overflow: hidden;"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>The challenge now is that once logged in into my application, user should not have to log in into Grafana again.</p>
  
  <p>To resolve this issue, I set up Grafana to use Basic Auth. My goal is for my web app to pass basic auth to Grafana via the browser. Basically, when the user clicks on the button to open Grafana, I would issue a request via AngularJS. This request would include the required Authorization header to load Grafana. To do this, I augment the above code segment with the http blog after the url field:</p>
  
  <pre><code>            headers : {
                 'Authorization' : 'Basic YWRtaW46YWRtaW4='
              }
  </code></pre>
  
  <p>Also, in the success callback function, I replace the first instruction with:</p>
  
  <pre><code>  $("#test").attr('src',"data:text/html;charset=utf-8," + escape(response))
  </code></pre>
  
  <p>Unfortunately, I do not seem to be able to get this to work.</p>
  
  <p>I know this should work because I can simulate this behavior with ModHeader extension of  Chrome browser. If I put the following header in ModHeader: Authorization: Basic YWRtaW46YWRtaW4=, it loads Grafana from  without need to log in. And if I remove the Authorization header, I am prompted for login name and password again.</p>
  
  <p>The grafana changes are pretty simple:</p>
  
  <pre><code>[auth.basic]
  enabled = true
  </code></pre>
  
  <p>What am I missing? My guess is this is an AngularJS/Javascript thing. </p>