"Unsafe assignment to innerHTML" workarounds

Add-ons Development
#1

I have an addon (https://github.com/irvinm/Toggle-Native-Tab-Bar) that has an “options.html” which gives the user instructions and part of that is some CSS. I thought it would be nice to color code that CSS to make it more readable.

I didn’t want to do this step manually and looked into a library I could include that could take that HTML and format it. I ended up picking prism. (https://github.com/PrismJS/prism)

In my HTML, I initially had a block that looked like:

<pre>
            <code class="language-css">
    #main-window[titlepreface*=" "] #TabsToolbar {
        display: none;
    }       </code>
</pre>

Prism.js uses the “language-css” class to determine how to return the CSS with proper CSS classes assigned to new spans. This all works well but when I was looking to submit this update to AMO, I got “Unsafe assignment to innerHTML” inside of Prism.js.

I looked into ways to resolve this and one way suggested was to use DOMPurify before calling innerHTML. However, when I tried this I got the same warning inside of DOMPurify.

I am not that experienced with JS and not sure how to proceed. Any suggestions would be appreciated. (In the short term, I have taken the returned HTML and just hard-coded that into options.html and removed Prism.js from the project for now. Obviously, I would prefer to leave it dynamic in case I need to change and\or add more CSS text)

Mozilla security page with reference to DOMPurify as well: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page

#2

In this case, the workarounds are meant to be used only if YOU are using the innerHTML.

If it’s used by “known and trustworthy” library in a safe way, it’s fine.
Many of my addons has this linter warning because I use Vue.js library.

#3

Do you mean you recieved a warning from a linter (automated tool) or that your submission was rejected for this reason? If it was a message from a linter, it may just be that the tool is not clever enough to understand that you’ve used DOMPurify to sanitize the HTML before assigning it.

#4

It was just from the linter. I just know that my addon (small number of users) isn’t going to likely see a reviewer anytime soon, but I also didn’t want to use the library and then one day have to remove it.

I guess I could always put it back in and submit it to see what happens.

#5

I think it’s because the hash hasn’t been updated in years…
Need to fix add-ons linter.
addons-linter/src/dispensary/hashes.txt at master · mozilla/addons-linter

2 Likes