防止数据属性中的Javascript注入

Question

I have a script that pulls a text from an API and sets that as a tooltip in my html.

<div class="item ttip" data-html="<?php echo $obj->titleTag;?>">...</div>

The API allows html and javascript to be entered on their side for that field.

I tried this $obj->titleTag = htmlentities(strip_tags_content($this->channel->status)));

I now had a user that entered the following (or similar, he is blocked now I cannot check it again):

\" <img src="xx" onerror=window.location.replace(https://www.youtube.com/watch?v=IAISUDbjXj0)>

which does not get caught by the above. I could str_replace the window.location stuff, but that seems dirty. What would be the right approach? I am reading a lot of "Whitelists" but I don't understand the concept for such a case.

//EDIT strip_tags_content comes from here: https://php.net/strip_tags#86964

Answer 1

Well, It's not tags you're replacing now but code within tags. You need to allow certain attributes in your code rather than stripping tags since you've only got one tag in there ;)

What you wanna do is check for any handlers being bound in the JS, a full list here, and then remove them if anything contains something like onerror or so