Acceptable way of modifying contents of Extension Panel

Extensions
1

Hello,

as someone relatively new to Javascript and even more so Twitch Extensions, I am currently wondering what the acceptable way of modifying an Extension’s contents is. As the guidelines state:

Do not inject directly into the DOM any data obtained dynamically over AJAX (e.g., JSON is fine, HTML is not).

But if I just take a string from my JSON object and throw that into the mix, it could still contain arbitrary HTML tags, so I’m a bit confused by this line. (Let’s blame it on a language barrier and lack of experience.) Even though I control everything my backend sends out and know for certain there is no way of it containing HTML tags, the Twitch devs won’t, and I feel like it might be rejected due to these guidelines if I just do this:

someDivElement.innerHtml = json.myText;

Because that means if json.myText happens to be, for whatever reason,

<img src=”data:image/png;base64,iVBORw0KGgoAAAA...5ErkJggg==”>

…the viewers could end up with an image of dickbutt (or worse!) in the panel which I feel was supposed to be prevented by this guideline in the first place. Or maybe I just misunderstand the intention of it?
dickbutt (Sorry, could not resist)

Trying to get around this problem, this is how I currently intend handle it:

window.Twitch.ext.listen('broadcast', function(target, contentType, message) {
  //Handle PubSub messages
  var json = 0;
  try { json = JSON.parse(message); }
  catch(ex) { /* do some error handling */ }

  upd("titleDiv", json.myTitle); //shortcut function
  //do this a few more times for different things
}

//Shortcut function for updating contents
function upd(id, val)
{
  //replace "<" and ">"
  var safeVal = String(val).replace(/</g, "&lt;").replace(/>/g, "&gt;");
  document.getElementById(id).innerHTML = safeVal;
}

Is this a good and acceptable way for handling content updates? Should I do something else instead?

Thanks for your time, any tips on how you guys handle this are most welcome.

Best regards
Matt

2

If you want your EBS to return a dickbutt to a panel. Then return a dickbutt to the panel.

The guideline is not, as far as I know, to make it hard to send a dickbutt to a panel. But to reduce the amount of data being sent and received by a EBS to a panel. Which can mean a browser is doing less work to render your Panel, and thus not end up skipping video frames for the stream on the page.

A JSON object is less characters/bits and bytes than a whole pile of HTML.

I don’t use a upd function or equivalent.

My returns from the EBS usually contain a error note, a message, some payload, where the payload contains more than one bit of text. Then I build a div from a template and substitue in data from the JSON object.

Logically one of those bits of data could be a URL to a DickButt (I use URL’s to something else), but you could return a data:image/png I suppose, probably not very efficent

2 Likes
3

Thank you very much for clarifying this and for the example of how you’re doing it (likely more efficient than my current mess - sometimes you miss the bigger picture when you look too hard). I suppose I read too much into the guideline!

The data:image part was a poorly chosen example to express what I thought the guideline was meant to prevent, I don’t intend to actually do something like that. My concern was more along the lines of the possibility to inject scripts, e.g. if the backend was compromised or if I had bad intentions, but I realize now there are technical restrictions in place to prevent this kind of abuse already.

4

The intent of the policy was not only to encourage best-practices, but to also raise awareness of content sanitisation; particularly for UGC. People should not be blindly injecting data into an Extension without first sanitising it.

1 Like