Solved: Re: Render base64 image in dashboard

jallen02 · ‎07-10-2018

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>

bradensmith · ‎12-03-2018

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 · ‎12-03-2018

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 · ‎12-22-2018

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?

jallen02 · ‎12-27-2018

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 · ‎12-27-2018

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

jallen02 · ‎12-04-2018

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.

Render base64 image in dashboard

Splunk Observability Cloud’s AI Assistant in Action Series: Analyzing and ...

Elevate Your Organization with Splunk’s Next Platform Evolution

Splunk Answers Content Calendar, June Edition

Are you a member of the Splunk Community?

Render base64 image in dashboard

Splunk Observability Cloud’s AI Assistant in Action Series: Analyzing and ...

Elevate Your Organization with Splunk’s Next Platform Evolution

Splunk Answers Content Calendar, June Edition