Grafana-web visual read-only/kiosk mode for integration in enteprise app -


have requirement in project integrate grafana-web in enteprise app.

some of points are:

  • don't show grafana menu (dashboards read via api , integrated in app menu)
  • hide playground buttons users (even if grafana offers readonly mode, prevents saving not playing around settings/data)
  • for users allow edit mode (add rows, dashboard settings, dashboard save ...)
  • disable sharing users
  • all these visual quirks in frontend, security level low (evil user can still bypass hidden buttons , that's ok)
  • create/delete dashboards done via api triggered buttons in enteprise app

as grafana has nothing this, thinking load iframe , xss hide buttons (both ui's loaded same domain).

i understand , accept torkel , grafana team decision not have readonly mode in frontend "evil" user can query backend around it, security point of view right.

but see edge cases/projects require if visual quirk.

warning: sure got it, visual styling of grafana-web , not offer security, "evil" user can still have access everything.

so here's how implemented it:

  • all users have edit priviledges in grafana (the buttons hidden frontend only)
  • load grafana-web iframe
  • the iframe either has mask on (one can move iframe our of view or make if transparent)
  • on iframe domcontentloaded handler, register mutationobserver on iframe document catch , hide buttons added dom, using amazing mutation summary library rafael weinstein.
  • hide buttons @ stage rendered, in case observer registred late (it's race condition against angular rendering)
  • remove mask (move iframe visible area, make opac ...)

here's customizer code triggered domcontentloaded:

// don't forget load mutation-summary.js lib  function iframeload (iframe) {     // disable if want users have access playground buttons like:     // add rows, edit panels, dashboard settings ...     readonlymode = true;      // iframe "window"     var iframe_window = iframe.contentwindow;      // iframe "document" under mutationobserver dom changes     var iframe_document = iframe.contentdocument;      var queries = [{         // main menu of grafana         element: '.navbar-brand-btn'      },{          // dashboard selection right of main menu         element: '.navbar-page-btn'      },{          // share button appearing inside .dashnav-action-icons, don't want allow         // anybody, it's exposes real url, bypassing code         element: 'li[ng-show="::dashboardmeta.canshare"]'      },{          // dashboard delete button, under dashboard setting button         element: 'a[ng-click="deletedashboard();"]'      }];       if ( readonlymode ) {         queries.push({              // 3 vertical dots button open row menu/edit             element: '.dash-row-menu-grip'          });         queries.push({             // bottom "+ add row" button             element: '.add-row-panel-hint'         });         queries.push({             // share button right of dashboard menu             element: '.dashnav-action-icons'          });         queries.push({             // "panel" menu triggered clicking panel name             element: '.panel-menu'          });     }       var observer;     observer = new mutationsummary({         callback: function (changes) {             changes.foreach(function (change) {                 change.added.foreach(function (el) {                     iframe_window.angular.element(el).addclass('ng-hide');                 });             });              // disconnect here free resources, on new dashboards             // buttons re-rendered angular, keep block behaviour             //observer.disconnect();         },         queries: queries,         rootnode: iframe_document     });       // hide elements if generated before registred observer     // race condition afterall "angular rendering" vs "registering observer"     queries.foreach( function (el) {         if ( iframe_window && iframe_window.angular ) {             iframe_window.angular.element(el.element).addclass('ng-hide');         }     });      // remove mask or move iframe view if needed     // [your code here]   }

this method tested against grafana version 4.0.0-1476697633pre1 (and 1 running in play.grafana.org)

will try update code in github page, once upgrade grafana.

full example can found on github page using play.grafana.org in iframe, , play.grafana not in domain play around disable same-origin policy in chrome starting with:

google-chrome --disable-web-security --user-data-dir

Comments

Post a Comment

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more