Links in Table of Contents not working

[n-tanchev]

Describe the bug
Clicking on a the links in the Table of Contents doesn't scroll down to the clicked heading, and produces the following error in the console:

TypeError: Target must be a Number/Selector/HTMLElement/VueComponent, received undefined instead.
    at M (app.js?1601761667:350)
    at Object.T (app.js?1601761667:350)
    at click (theme0.js?1601761667:2)
    at qt (app.js?1601761667:350)
    at a.n (app.js?1601761667:350)
    at qt (app.js?1601761667:350)
    at a.t.$emit (app.js?1601761667:350)
    at a.click (app.js?1601761667:350)
    at qt (app.js?1601761667:350)
    at HTMLDivElement.n (app.js?1601761667:350)

To Reproduce
Steps to reproduce the behavior:

1. Click on one of the links in the table of contents on any page

Expected behavior
The page to be scrolled down to the clicked link heading

Host Info (please complete the following information):

• OS: Docker Container
• Wiki.js version: 2.5.159
• Database engine: postgres 11.7

Additional context
It seems there are no anchors generated, when inspecting the pages' html source

[NGPixel]

TOC links work just fine here: https://docs.requarks.io/releases

Are you using the markdown or visual editor?

[n-tanchev]

I'm using the markdown editor, and none of the headings in the page's content haven an id attribute, so I'm assuming that is the reason the scroll doesn't work.

[vkatsuba]

Hi All,

Have the same issue.
Used MD editor, add into page [Links](#links) and below # Links , save page and try click to the link Links in the page as result we ca see that the scrolling does not occur and in console we can see error:

Uncaught Error: Target element "#links" not found.
    M https://some.page.net/_assets/js/app.js?1603683027:350
    T https://some.page.net/_assets/js/app.js?1603683027:350
    onclick https://some.page.net/_assets/js/theme0.js?1603683027:2
    mounted https://some.page.net/_assets/js/theme0.js?1603683027:2
    mounted https://some.page.net/_assets/js/theme0.js?1603683027:2
    ie https://some.page.net/_assets/js/app.js?1603683027:350
    Xt https://some.page.net/_assets/js/app.js?1603683027:350

OS: Linux
Browser: Firefox 82.0.2

Regards,
--V

[Lurkars]

I can reproduce this issue. Using WikiJs 2.5.197 and markdown:

## Header with custom anchor {#link}

Click in Table Of Contents returns
TypeError: Target must be a Number/Selector/HTMLElement/VueComponent, received undefined instead. at M (app.js?1616731122:478) at Object.T (app.js?1616731122:478) at click (theme0.js?1616731122:2) at qt (app.js?1616731122:478) at a.n (app.js?1616731122:478) at qt (app.js?1616731122:478) at a.t.$emit (app.js?1616731122:478) at a.click (app.js?1616731122:478) at qt (app.js?1616731122:478) at HTMLDivElement.n (app.js?1616731122:478)

OS: Linux
Browser: Chrome 89, Firefox 87

[broxen]

Can also confirm this happens with custom header IDs.

[mabuatmb]

I have the same issue, running Stable 2.5.201. I am using the Markdown editor with one simple document:

# Header
...
(20 lines of something..)
....

## SubHeader

The Table of Contents shows but the link to SubHeader is not working. I am seeing the same vue.js error in the console and see in the HTML there are no anchors being created.

I also tried copying the source (markdown) exactly copy and paste form:
https://docs.requarks.io/releases

The links still don't work.

[elbae]

Can confirm on 2.5.201 with node 14.16.1.
Markdown editor.

[dbelovol]

I have not this issue on 2.5.201 with node 14.16.1. with markdown, but have it with raw html. With the same output in console

[exglade]

TL;DR

Go to Admin > Rendering > html to html > Security, then disable Sanitize HTML.

Technical explanation

In the security renderer, Wiki.js uses DOMPurify to sanitise the HTML. Using the default options, DOMPurify would prevent DOM Clobbering by removing id or name attributes that match any property name in document or formElement DOM object. You can find this function in DOMPurify by searching SANITIZE_DOM.

Property names in document/formElement?

It's a long list so I won't be writing it out here. Open your developer console F12, type document. (take note of the period), you should be able to see the properties. Similarly for formElement.. Using Chromium here, it should work similarly for other browsers.

Test

You can test the DOMPurify using their demo. For example:

<h1 id="links">Links</h1>
<h1 id="link">Link</h1>
<h1 id="images">Images</h1>
<h1 id="image">Image</h1>
<h1 id="action">Action</h1>

turns into

<h1>Links</h1>
<h1 id="link">Link</h1>
<h1>Images</h1>
<h1 id="image">Image</h1>
<h1>Action</h1>

Solutions

I think the DOMPurify is a good feature to prevent some nasty XSS attacks or messy DOM. A few solutions I can think of now for @NGPixel :

Disable SANITIZE_DOM

Wiki.js can outright disable SANITIZE_DOM:

DOMPurify.sanitize(dirty, {SANITIZE_DOM: true});

However, SANITIZE_DOM is for Output should be free from DOM clobbering attacks? as quoted from DOMPurify.

Provide DOMPurify options to customize

Wiki.js can extend the options to let us customize the configuration for the dependency it has. However, this will lead to more costly maintenance.

Header id prefix

This is widely discussed in markdown-it. There are a few plugins to implement the idea, but still an open issue.

References

• DOMPurify #517
• DOMPurify #439
• DOMPurify #208

[exglade]

Another possibility I've known for a broken table of content is HTML Core disabled in Admin > Rendering > html to html > Security. Wiki.js converts the Markdown into HTML, then process the HTML to further enhance it.

More info on Wiki.js Rendering Pipeline.

[mjavurek]

Thank you for this important hint. HTML Core has to be enabled, but it is located under Admin > Rendering > html to html (not under Security).

[broxen]

Submitted PR #4527 to attempt to fix the variant of this issue caused by custom header IDs as experienced by myself, @vkatsuba, and @Lurkars . I'd love your testing/feedback.

I don't believe this will resolve the other issues discussed here, which seem to related to sanitization happening before rendering reaches header-parsing, but maybe I'm misunderstanding the rendering order.