The default configuration will allow your code to pass if it ensures that all user input is properly escaped. Using the sanitizer.js library your code would look like this:
// example for no-unsanitized/property
foo.innerHTML = Sanitizer.escapeHTML`<a href="${link}">click</a>`
// example for no-unsanitized/method
node.insertAdjacentHTML('afterend', Sanitizer.escapeHTML`<a href="${link}">click</a>`);
If you need to generate your HTML somewhere else and e.g. cache it,
you won't be able to run escapeHTML
on a string that knows no
distinction between HTML and user inputs.
Another feature in Sanitizer that allows you to create an object
that contains escaped HTML which is guaranteed to be safe and thus
allowed for direct innerHTML assignments (and insertAdjacentHTML
calls): createSafeHTML
and unwrapSafeHTML
Example:
// create the HTML object for later usage
function storeGreeting(username) {
var safeHTML = Sanitizer.createSafeHTML`<p>Hello ${username}</p>`;
cache.store('greeting', safeHTML)
}
// re-use the existing safe-HTML object
function useGreeting(domNode) {
var htmlObj = cache.retrieve('greeting');
domNode.innerHTML = Sanitizer.unwrapSafeHTML(htmlObj);
}
It might very well be the case that there's a bug in our linter rule.