Dashboards & Visualizations

Render base64 image in dashboard

jallen02
Explorer

There's an active directory attribute that holds a base64 encoded thumbnail of users. We have this data in Splunk already through LDAP lookups, it would be great if I could integrate this into a dashboard, but I'm having problems rendering an image in a dashboard.

This code works when it's just loaded as an html document in my browser, but it's not rendering the image in a Splunk dashboard. Has anyone else had any luck with this? I've not got much experience with xml or html, am I missing something here?

<dashboard>
  <label></label>
  <description></description>
  <row>
    <panel>
      <html>      
      <h1>test</h1>    
      <img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
      </html>
    </panel>
  </row>
</dashboard>
Tags (2)
0 Karma
1 Solution

bradensmith
Engager

I recently wanted to render base64 images dynamically in a dashboard, and got this to work...

1) Create Javascript file "dynamicImage.js" that monitors value changes of token "tokBASE64", then injects value into src attribute of img tag "imgDynamic".

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
 ], function ($, mvc,) {
         var submittedTokens = mvc.Components.get('submitted');
         submittedTokens.on("change:tokBASE64", function(model, tokBASE64, options) {
            var tokHTMLJS=submittedTokens.get("tokBASE64");
            if(tokHTMLJS!==undefined) {
              document.getElementById("imgDynamic").src = "data:image/jpeg;base64," + tokHTMLJS;
            }
         });
});

2) Place dynamicImage.js in your Splunk Searchhead

$SPLUNK_HOME/etc/apps/<your app>/appserver/static

3) Restart Searchhead so the new static content will be picked up.

In your XML dashboard source:

4) Reference the JS in the initial form/dashboard tag

<form script="dynamicImage.js">

5) Assign base64 content to tokBASE64 when search is completed. I used Fields to suppress displaying base64 in table.

<search>
        <query>index=peoples personID=12345 | table personID, Firstname, Lastname, PhotoBase64</query>
        <finalized>
            <set token="tokBASE64">$result.PhotoBase64$</set>
        </finalized>
        <fields>["personID","Firstname","Lastname"]</fields>
</search>

6) Add a HTML panel in your XML dashboard source, consisting of img tag

<panel>
      <html>
         <div>
           <img id="imgDynamic" src=""/>
         </div>
       </html>
</panel>

Done !

View solution in original post

bradensmith
Engager

I recently wanted to render base64 images dynamically in a dashboard, and got this to work...

1) Create Javascript file "dynamicImage.js" that monitors value changes of token "tokBASE64", then injects value into src attribute of img tag "imgDynamic".

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
 ], function ($, mvc,) {
         var submittedTokens = mvc.Components.get('submitted');
         submittedTokens.on("change:tokBASE64", function(model, tokBASE64, options) {
            var tokHTMLJS=submittedTokens.get("tokBASE64");
            if(tokHTMLJS!==undefined) {
              document.getElementById("imgDynamic").src = "data:image/jpeg;base64," + tokHTMLJS;
            }
         });
});

2) Place dynamicImage.js in your Splunk Searchhead

$SPLUNK_HOME/etc/apps/<your app>/appserver/static

3) Restart Searchhead so the new static content will be picked up.

In your XML dashboard source:

4) Reference the JS in the initial form/dashboard tag

<form script="dynamicImage.js">

5) Assign base64 content to tokBASE64 when search is completed. I used Fields to suppress displaying base64 in table.

<search>
        <query>index=peoples personID=12345 | table personID, Firstname, Lastname, PhotoBase64</query>
        <finalized>
            <set token="tokBASE64">$result.PhotoBase64$</set>
        </finalized>
        <fields>["personID","Firstname","Lastname"]</fields>
</search>

6) Add a HTML panel in your XML dashboard source, consisting of img tag

<panel>
      <html>
         <div>
           <img id="imgDynamic" src=""/>
         </div>
       </html>
</panel>

Done !

jgf5013
Engager

If the base64 string comes from an untrusted source (user logs,) couldn't this be exploited as a xss attack by adding in encoded js to the bytestring?

0 Karma

jallen02
Explorer

Fair point, but in this case the logs are based on LDAP queries that are run from a scripted input. I suppose an Active Directory administrator could change the value on a user's thumbnail attribute, but anyone who's administering AD could easily cause a lot more damage in other ways. The same goes for a Splunk administrator who could change the scripted input or add custom data to this index.

jgf5013
Engager

Yea. I'm wondering more for myself/an "in theory" question. Thanks for following up!

0 Karma

jallen02
Explorer

Perfect! Exactly what I needed, I hadn't thought of doing it through javascript but it looks like if it's hardcoded like I was trying originally the value gets removed when the page is being loaded.

0 Karma
Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...