gpt4 book ai didi

javascript - 将安全的 Grafana 嵌入到 Web 应用程序中

转载 作者:可可西里 更新时间:2023-11-01 02:28:04 29 4
gpt4 key购买 nike

我想使用 AngularJS 将 Grafana 嵌入到我的 Web 应用程序中。目标是,当用户在我的应用程序中时,她应该能够单击按钮并加载 Grafana UI。就其本身而言,这是一项简单的任务。为此,我让 apache 代理 Grafana 并返回任何必要的 CORS header 。 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。我的目标是让我的网络应用程序通过浏览器将基本身份验证传递给 Grafana。基本上,当用户点击按钮打开 Grafana 时,我会通过 AngularJS 发出请求。此请求将包含加载 Grafana 所需的授权 header 。为此,我在 url 字段后添加了 http 博客的上述代码段:

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

此外,在成功回调函数中,我将第一条指令替换为:

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

不幸的是,我似乎无法让它工作。

我知道这应该可行,因为我可以使用 Chrome 浏览器的 ModHeader 扩展来模拟这种行为。如果我将以下 header 放在 ModHeader 中:Authorization: Basic YWRtaW46YWRtaW4=,它会在无需登录的情况下加载 Grafana。如果我删除 Authorization header ,系统会再次提示我输入登录名和密码。

grafana 的变化非常简单:

[auth.basic]
enabled = true

我错过了什么?我猜这是 AngularJS/Javascript 的东西。

最佳答案

在编写问题时不知道这是否是一个选项,但我们通过注入(inject) API token 进行授权 (http://docs.grafana.org/http_api/auth/) 非常成功地做到了这一点。

关于javascript - 将安全的 Grafana 嵌入到 Web 应用程序中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35583712/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com