[英]How to display grafana graphs in my website's admin panel securely?
我在格拉法纳(Granana)创建了一些漂亮的地块。 我想直接在我网站的管理面板中显示其中一些,而不是强迫用户访问grafana仪表板并强迫他们进行两次身份验证(一次访问我的网站,一次访问grafana)。
一种选择是在grafana中启用匿名访问,并使用grafana中每个图可用的共享/嵌入iframe选项。 尽管它可以正常工作,但如果知道适当URL的任何人都可以看到grafana数据,这似乎是一个巨大的漏洞。
然后,我看到grafana具有HTTP API,但是看不到在那里显示特定图形的可能性。
我已经尝试了使用PHP代理的解决方案,如果用户在我的网站上通过了身份验证,则该代理将添加授权标头并连接到grafana嵌入URL。 但是,它不起作用,这是配置的噩梦。
最终的选择是从服务器端的grafana提取图形的png,并将其仅提供给我网站中经过身份验证的管理员使用。 但是,在这种情况下,我会松散grafana提供的所有很酷的东西OOTB,例如扩展/折叠时间范围,自动刷新等。
根据此答案和此答案,我能够将Grafana仪表板嵌入页面中。
将您的iframe
放入:
<iframe id="dashboard"></iframe>
然后使用如下所示的AJAX请求将Grafana的内容提供给它:
<script type="text/javascript">
$.ajax(
{
type: 'GET',
url: 'http://localhost:3000/dashboard/db/your-dashboard-here',
contentType: 'application/json',
beforeSend: function(xhr, settings) {
xhr.setRequestHeader(
'Authorization', 'Basic ' + window.btoa('admin:admin')
);
},
success: function(data) {
$('#dashboard').attr('src', 'http://localhost:3000/dashboard/db/your-dashboard-here');
$('#dashboard').contents().find('html').html(data);
}
}
);
</script>
AJAX请求是强制性的,因为它使您能够使用凭据设置标头。
在这一刻,由于CORS,您将从Grafana服务器获得空响应。 您要做的是为Grafana启用一些代理。 以下是使用docker-compose配置Grafana和nginx docker容器的示例:
version: '2.1'
services:
grafana:
image: grafana/grafana
nginx:
image: nginx
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
ports:
- 3000:80
您要做的最后一件事是提供您的nginx.conf文件:
events {
worker_connections 1024;
}
http {
#
# Acts as a nginx HTTPS proxy server
# enabling CORS only to domains matched by regex
# /https?://.*\.mckinsey\.com(:[0-9]+)?)/
#
# Based on:
# * http://blog.themillhousegroup.com/2013/05/nginx-as-cors-enabled-https-proxy.html
# * http://enable-cors.org/server_nginx.html
#
server {
listen 80;
location / {
#if ($http_origin ~* (https?://.*\.tarunlalwani\.com(:[0-9]+)?$)) {
# set $cors "1";
#}
set $cors "1";
# OPTIONS indicates a CORS pre-flight request
if ($request_method = 'OPTIONS') {
set $cors "${cors}o";
}
# Append CORS headers to any request from
# allowed CORS domain, except OPTIONS
if ($cors = "1") {
add_header Access-Control-Allow-Origin $http_origin always;
add_header Access-Control-Allow-Credentials true always;
proxy_pass http://grafana:3000;
}
# OPTIONS (pre-flight) request from allowed
# CORS domain. return response directly
if ($cors = "1o") {
add_header 'Access-Control-Allow-Origin' '$http_origin' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Headers' 'Origin,Content-Type,Accept,Authorization' always;
add_header Content-Length 0;
add_header Content-Type text/plain;
return 204;
}
# Requests from non-allowed CORS domains
proxy_pass http://grafana:3000;
}
}
}
此文件基于此处提供的,但重要的区别是
add_header 'Access-Control-Allow-Headers' 'Origin,Content-Type,Accept,Authorization' always;
这表示您允许设置Authorization
标头。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.