Как безопасно отображать графики в графической панели моего сайта?
Я создал несколько хороших сюжетов в графане. Я хочу отобразить некоторые из них прямо в панели администратора моего веб-сайта, вместо того чтобы заставлять пользователей переходить на информационные панели grafana и заставлять их выполнять двойную аутентификацию (один раз для моего сайта и один раз для графана).
Одним из вариантов является включить анонимный доступ в графане и используйте опцию share / embed in iframe, доступную для каждого графика в графане. Хотя он работает отлично, кажется, что огромная уязвимость, если кто-то, кто знает соответствующий URL-адрес, может видеть данные графана.
Тогда я увидел, что у графаны есть HTTP API но я не вижу возможности отобразить там определенный график.
Я пробовал решение с PHP Proxy это добавит заголовки авторизации и подключится к URL-адресу для встраивания grafana, если пользователь авторизован на моем сайте. Тем не менее, это не работает, и это кошмар для настройки.
Последний вариант — это получить pngs графиков из grafana на стороне сервера и обслуживать их только для авторизованных администраторов на моем сайте. Тем не менее, в таком случае я теряю все классные вещи, которые Grafana предлагает OOTB, такие как расширение / сжатие временного диапазона, автоматическое обновление и т. Д.
Решение
На основе этот ответ а также этот ответ Мне удалось встроить панель Grafana в мою страницу.
Положить ваши iframe:
<iframe id="dashboard"></iframe>
Затем добавьте содержимое Grafana с помощью запросов AJAX, например:
<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 является обязательным, поскольку он позволяет вам установить заголовок с вашими учетными данными.
В этот момент вы получаете пустой ответ от сервера Grafana из-за CORS. Что вам нужно сделать, это включить прокси для Grafana. Ниже приведен пример конфигурации Docker-контейнеров Grafana и nginx с использованием docker-compose:
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 заголовок.
Другие решения
Других решений пока нет …