Внедрение защищенной Grafana в веб-приложение

Я хочу встроить 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.

Ответ 1