Я хочу встроить Grafana в мое веб-приложение, используя AngularJS. Цель состоит в том, что когда пользователь находится в моем приложении, она должна иметь возможность щелкнуть по кнопке и загрузить пользовательский интерфейс Grafana. Само по себе это непростая задача. Для этого у меня есть apache, проксирующий Grafana и возвращающий любые необходимые заголовки CORS. Конфигурация обратного прокси-сервера apache выглядит следующим образом:
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/
Все работает отлично, когда нет безопасности. Следующий код - это простой HTML/Javascript, который показывает, что я делаю:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.11/minified/require.js"></script>
<script src="https://code.jquery.com/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.com',
}).success(function(response) {
$("#test").attr('src', 'http://grafana-host.com')
$("#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>
Теперь проблема заключается в том, что после входа в мое приложение пользователю не нужно снова входить в Grafana.
Чтобы решить эту проблему, я настроил Grafana для использования Basic Auth. Моя цель состоит в том, чтобы мое веб-приложение передало базовый auth в Grafana через браузер. В принципе, когда пользователь нажимает кнопку, чтобы открыть Grafana, я бы запросил запрос через AngularJS. Этот запрос будет включать требуемый заголовок авторизации для загрузки Grafana. Чтобы сделать это, я добавлю выше сегмент кода с http-блоком после поля url:
headers : {
'Authorization' : 'Basic YWRtaW46YWRtaW4='
}
Кроме того, в функции обратного вызова успеха я заменяю первую команду:
$("#test").attr('src',"data:text/html;charset=utf-8," + escape(response))
К сожалению, я, похоже, не могу заставить это работать.
Я знаю, что это должно работать, потому что я могу имитировать это поведение с расширением ModHeader браузера Chrome. Если я поместил следующий заголовок в ModHeader: Авторизация: Basic YWRtaW46YWRtaW4 =, он загружает Grafana без необходимости входа в систему. И если я удалю заголовок авторизации, я снова запрошу имя пользователя и пароль.
Изменения grafana довольно просты:
[auth.basic]
enabled = true
Что мне не хватает? Я предполагаю, что это вещь AngularJS/Javascript.