Don't sanitize custom HTML elements

[salty-horse]

Is your feature request related to a problem? Please describe.
Many modern HTML5 web pages use custom element names.
For example, reactormag.com uses <article-content>.

These are removed (keeping the contents) by WebToEpub's sanitize() function, specifically by DOMPurify.sanitize.

In this particular case, I can match against one of the element's children, which are not removed, but then I need to specify elements to remove.

Those custom elements names are not a security risk - they're just custom names, and in standard use. Is there a specific reason they are removed?

[dteviot]

@salty-horse

Is there a specific reason they are removed?

Mozilla requires us to use DOMPurify to sanitize HTML that comes from outside an Extension.
Not unreasonable from their perspective, as they want to be sure the extensions are not a vulnerability. And the easy way to validate is mandate DOMPurify and then do automated dataflow to check it's called.

Also note that EPUB 2 requires XHTML, not HTML 5. So those elements are not valid. And I've seen at least one epub reader choke when getting custom names.

[salty-horse]

What if the sanitization happened after the selection process?

[dteviot]

@salty-horse

What if the sanitization happened after the selection process?

That's where it's normally done for most parsers. As part of the final step in packaging the epub.
However, there are other parsers that need to do a conversion of string to HTML. So, DOMPurify is normally used for that.
So, it depends on the parser (i.e. Site) Which site are you trying to work with?

[salty-horse]

I mentioned the site at the top - I'm extracting short fiction from reactormag.com (Example)

There's no official parser for it, it's not really a serialized fiction website, and only hosts individual stories. Having official support for it would be nice, but in poor taste, since they are also selling these stories in epub files in storefronts such as Amazon.

I currently use .article-contents to capture a parent <div>, but then have to strip junk from the footer (.shop-the-book, .about-author, .tags, section.comments).
Instead, I would like the target its more specific child element <article-content class="block prose js-article-content prose--article">