Einbinden einer gesicherten Grafana in eine Webanwendung

Question

Feb 23, 2016, 06:04 PM

javascript basic-authentication angularjs http-basic-authentication

Einbinden einer gesicherten Grafana in eine Webanwendung

Ich möchte Grafana mit AngularJS in meine Webanwendung einbetten. Das Ziel ist, dass der Benutzer in meiner Anwendung auf eine Schaltfläche klicken und die Grafana-Benutzeroberfläche laden kann. An sich ist dies eine leichte Aufgabe. Zu diesem Zweck muss Apache Grafana vertreten und alle erforderlichen CORS-Header zurückgeben. Die Apache-Reverse-Proxy-Konfiguration sieht wie folgt aus:

    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 funktioniert einwandfrei, wenn keine Sicherheit betroffen ist. Der folgende Code ist ein einfaches HTML / Javascript, das zeigt, was ich tue:

<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>

Die Herausforderung besteht nun darin, dass sich der Benutzer nach dem Anmelden bei meiner Anwendung nicht erneut bei Grafana anmelden muss.

Um dieses Problem zu beheben, habe ich Grafana für die Verwendung von Basic Auth eingerichtet. Mein Ziel ist es, dass meine Web-App die grundlegende Authentifizierung über den Browser an Grafana weitergibt. Grundsätzlich würde ich, wenn der Benutzer auf die Schaltfläche klickt, um Grafana zu öffnen, eine Anfrage über AngularJS stellen. Diese Anforderung würde den erforderlichen Authorization-Header zum Laden von Grafana enthalten. Dazu ergänze ich das obige Codesegment mit dem http-Blog nach dem URL-Feld:

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

Auch in der Erfolgsrückruffunktion ersetze ich die erste Anweisung durch:

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

Leider scheine ich nicht in der Lage zu sein, dies zum Laufen zu bringen.

Ich weiß, dass dies funktionieren sollte, da ich dieses Verhalten mit der ModHeader-Erweiterung des Chrome-Browsers simulieren kann. Wenn ich den folgenden Header in ModHeader einfüge: Authorization: Basic YWRtaW46YWRtaW4 =, wird Grafana geladen, ohne dass eine Anmeldung erforderlich ist. Wenn ich den Authorization-Header entferne, werde ich erneut zur Eingabe von Anmeldenamen und Kennwort aufgefordert.

Die grafana Änderungen sind ziemlich einfach: