8000 `isomorphic-dompurify` will sanitize the `line` attribute from the generated HTML. · Issue #72 · timlrx/rehype-prism-plus · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
isomorphic-dompurify will sanitize the line attribute from the generated HTML. #72
Open
@KUN1007

Description

@KUN1007

If we input the HTML output: from the document into isomorphic-dompurify, like this:

const res = DOMPurify.sanitize(`<code class="language-js">
  <div class="code-line line-number highlight-line" line="1">
    <span class="keyword">function</span>
    <span class="function">fancyAlert</span><span class="punctuation">(</span
    ><span class="">arg</span><span class="punctuation">)</span>
    <span class="punctuation">{</span>
  </div>
  <div class="code-line line-number highlight-line" line="2">
    <span class="keyword">if</span>
    <span class="punctuation">(</span>arg<span class="punctuation">)</span>
    <span class="punctuation">{</span>
  </div>
  <div class="code-line line-number" line="3">
    $<span class="punctuation">.</span><span class="function">facebox</span
    ><span class="punctuation">(</span><span class="punctuation">{</span> div<span class="">:</span>
    <span class="string">'#foo'</span>
    <span class="punctuation">}</span><span class="punctuation">)</span>
  </div>
  <div class="code-line line-number" line="4">
    <span class="punctuation">}</span>
  </div>
  <div class="code-line line-number" line="5">
    <span class="punctuation">}</span>
  </div></code
>`)

console.log(res)

the output will be:

<code class="language-js"> <div class="code-line line-number highlight-line"> <span class="keyword">function</span> <span class="function">fancyAlert</span><span class="punctuation">(</span><span class="">arg</span><span class="punctuation">)</span> <span class="punctuation">{</span> </div> <div class="code-line line-number highlight-line"> <span class="keyword">if</span> <span class="punctuation">(</span>arg<span class="punctuation">)</span> <span class="punctuation">{</span> </div> <div class="code-line line-number"> $<span class="punctuation">.</span><span class="function">facebox</span><span class="punctuation">(</span><span class="punctuation">{</span> div<span class="">:</span> <span class="string">'#foo'</span> <span class="punctuation">}</span><span class="punctuation">)</span> </div> <div class="code-line line-number"> <span class="punctuation">}</span> </div> <div class="code-line line-number"> <span class="punctuation">}</span> </div></code>

It’s evident that the line attribute is removed by dompurify, as it is not a standard HTML attribute.

However, the removal of the line attribute means that content: attr(line); will no longer work, which will result in the line numbers not being displayed.

Perhaps we can resolve this issue by replacing the line attribute with a data-line attribute.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0