web-dev-qa-db-ja.com

保護されたGrafanaをWebアプリケーションに埋め込む

AngularJSを使用してGrafanaをWebアプリケーションに埋め込みたいです。目標は、ユーザーが私のアプリケーションを使用しているときに、ボタンをクリックしてGrafanaUIをロードできるようにすることです。それ自体、これは簡単な作業です。これを行うために、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を設定しました。私の目標は、Webアプリがブラウザーを介して基本認証をGrafanaに渡すことです。基本的に、ユーザーがボタンをクリックしてGrafanaを開くと、AngularJSを介してリクエストを発行します。このリクエストには、Grafanaをロードするために必要なAuthorizationヘッダーが含まれます。これを行うには、URLフィールドの後にhttpブログを追加して、上記のコードセグメントを拡張します。

            headers : {
               'Authorization' : 'Basic YWRtaW46YWRtaW4='
            }

また、成功コールバック関数で、最初の命令を次のように置き換えます。

  $("#test").attr('src',"data:text/html;charset=utf-8," + escape(response))

残念ながら、これを機能させることができないようです。

ChromeブラウザのModHeader拡張機能でこの動作をシミュレートできるため、これが機能するはずです。ModHeaderに次のヘッダーを配置すると：Authorization：Basic YWRtaW46YWRtaW4 =、ログを記録せずにGrafanaをロードしますそして、Authorizationヘッダーを削除すると、ログイン名とパスワードの入力を再度求められます。

グラファナの変更は非常に簡単です。

[auth.basic]
enabled = true

何が足りないのですか？私の推測では、これはAngularJS/Javascriptのものです。

javascriptangularjsbasic-authentication
14
Klaus

質問が書かれた時点でこれがオプションであるかどうかはわかりませんが、承認用のAPIトークンを挿入することでこれを非常にうまく行っています（ http://docs.grafana.org/http_api/auth / ）。

3
Svet