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:
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/
All works perfectly fine when no security is involved. The following code is a simple HTML/Javascript that shows what I am doing:
<script src=".4.8/angular.min.js"></script>
<script src=".1.11/minified/require.js"></script>
<script src=".11.3.js"></script>
<body >
<script>
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 : '',
}).success(function(response) {
$("#test").attr('src', '')
$("#test").contents().find('html').html(response);
}).error(function(error) {
console.log(error);
});
});
</script>
<div ng-app="myApp" ng-controller="MainCtrl">
<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;"></iframe>
The challenge now is that once logged in into my application, user should not have to log in into Grafana again.
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:
headers : {
'Authorization' : 'Basic YWRtaW46YWRtaW4='
}
Also, in the success callback function, I replace the first instruction with:
$("#test").attr('src',"data:text/html;charset=utf-8," + escape(response))
Unfortunately, I do not seem to be able to get this to work.
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.
The grafana changes are pretty simple:
[auth.basic]
enabled = true
What am I missing? My guess is this is an AngularJS/Javascript thing.
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:
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/
All works perfectly fine when no security is involved. The following code is a simple HTML/Javascript that shows what I am doing:
<script src="http://ajax.googleapis./ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://requirejs/docs/release/2.1.11/minified/require.js"></script>
<script src="https://code.jquery./jquery-1.11.3.js"></script>
<body >
<script>
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.',
}).success(function(response) {
$("#test").attr('src', 'http://grafana-host.')
$("#test").contents().find('html').html(response);
}).error(function(error) {
console.log(error);
});
});
</script>
<div ng-app="myApp" ng-controller="MainCtrl">
<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;"></iframe>
The challenge now is that once logged in into my application, user should not have to log in into Grafana again.
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:
headers : {
'Authorization' : 'Basic YWRtaW46YWRtaW4='
}
Also, in the success callback function, I replace the first instruction with:
$("#test").attr('src',"data:text/html;charset=utf-8," + escape(response))
Unfortunately, I do not seem to be able to get this to work.
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.
The grafana changes are pretty simple:
[auth.basic]
enabled = true
What am I missing? My guess is this is an AngularJS/Javascript thing.
Share Improve this question edited Feb 23, 2016 at 22:23 Klaus asked Feb 23, 2016 at 17:04 KlausKlaus 2,3965 gold badges43 silver badges63 bronze badges 4- What is the point in securing grafana when you can 'attack' it using the proxy URL ? – Marged Commented Feb 23, 2016 at 17:13
- I am not sure I fully understand your question. But to the extent that I understand, let me try to answer it. The proxy serves other purposes than securing Grafana. In my post, securing refers to providing authentication in an integrated environment. – Klaus Commented Feb 23, 2016 at 17:17
- @Klaus did you manage to get that to work eventually? – Kin Cheung Commented Jul 21, 2016 at 6:09
- try selenium to login in to grafana in backend. So, the user see your login window and redirected to grafana dashboards.(just an idea).Im going to try the same myself, bcoz im doing something similar – siva shankar Commented Mar 3, 2020 at 4:36
1 Answer
Reset to default 6Don't know if this is an option at the time the question was written, but we're doing this quite successfully by injecting an API token for authorization (http://docs.grafana/http_api/auth/).