【发布时间】：2016-06-05 15:42:19
【问题描述】：
我想使用 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 的东西。
【问题讨论】：
-
当您可以使用代理 URL“攻击”它时，保护 grafana 的意义何在？
-
我不确定我是否完全理解您的问题。但就我理解的程度，让我试着回答一下。代理服务于保护 Grafana 之外的其他目的。在我的帖子中，安全是指在集成环境中提供身份验证。
-
@Klaus 你最终设法让它工作了吗？
-
尝试 selenium 登录到后端的 grafana。因此，用户看到您的登录窗口并重定向到 grafana 仪表板。（只是一个想法）。我自己也会尝试，因为我正在做类似的事情
标签： javascript angularjs basic-authentication