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>
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 !
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 !
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?
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.
Yea. I'm wondering more for myself/an "in theory" question. Thanks for following up!
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.