將安全的 Grafana 嵌入到 Web 應用程序中

Question

我想使用 AngularJS 將 Grafana 嵌入到我的 Web 應用程序中。 目標是，當用戶在我的應用程序中時，她應該能夠單擊按鈕並加載 Grafana UI。 就其本身而言，這是一項簡單的任務。 為此，我讓 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 設置為使用基本身份驗證。 我的目標是讓我的網絡應用程序通過瀏覽器將基本身份驗證傳遞給 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 標題，我將再次提示輸入登錄名和密碼。

grafana 的變化非常簡單：

[auth.basic]
enabled = true

我錯過了什么？ 我的猜測是這是一個 AngularJS/Javascript 的東西。

Answer 1

不知道在編寫問題時這是否是一個選項，但我們通過注入 API 令牌進行授權（ http://docs.grafana.org/http_api/auth/ ）非常成功地做到了這一點。

將安全的 Grafana 嵌入到 Web 應用程序中

問題描述

1 個解決方案

解決方案1
4 2018-03-28 12:53:16

將安全的 Grafana 嵌入到 Web 應用程序中

問題描述

1 個解決方案

解決方案1 4 2018-03-28 12:53:16

解決方案1
4 2018-03-28 12:53:16