Only the first line gets numbered when fetching data from an API and rendering it with highlightjs
elaine-jackson opened this issue · comments
Describe the bug
I have an application which uses the JavaScript fetch() API to fetch some data and render it on a page.
To Reproduce
<html>
<body>
<!--StartFragment-->
Line wrap
--
| <!DOCTYPE html>
|
| <html>
|
| <head>
| <title>Paste.is</title>
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <link rel="stylesheet" href="/global.css" crossorigin="anonymous">
| <link rel="stylesheet" href="/lib/bootstrap.min.css" crossorigin="anonymous">
| <link rel="stylesheet" href="/lib/fontawesome-free-5.15.3-web/css/all.css" crossorigin="anonymous">
|
| <script src="/lib/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
| <script src="/lib/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
| <script src="/lib/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
| <script src="/lib/crypto-js.min.js" integrity="sha384-0DrKBsfUuJe/vqjia1HviapRn4mR1BYfCpQ9gT7qjSKu8TrzTe2tlbK3cI9i9EwV" crossorigin="anonymous"></script>
| <script src="/lib/highlight.min.js"></script>
| <script src="/lib/highlightjs-line-numbers.min.js"></script>
|
| <script src="/paste.js?v=1620658068"></script>
| </head>
|
| <body>
|
| <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
| <a class="navbar-brand" href="/">Paste.is</a>
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="true" aria-label="Toggle navigation">
| <span class="navbar-toggler-icon"></span>
| </button>
| <div class="navbar-collapse" id="navbarText">
| <ul class="navbar-nav mr-auto">
| <li class="nav-item active">
| <a class="nav-link" href="/"><span class="fas fa-home"></span> Home <span class="sr-only">(current)</span></a>
| </li>
| <li class="nav-item active">
| <a class="nav-link" href="mailto:abuse@paste.is"><span class="fas fa-exclamation-triangle"></span> Report Abuse <span class="sr-only">(current)</span></a>
| </li>
| </ul>
| </div>
| </nav>
| <div class="alert alert-primary">
| <strong>Introducing Encrypted Pastes:</strong> Encrypted Pastes are now in public beta there may still be bugs but we hope you enjoy the feature 😎.
| </div>
|
| <div class="card">
| <div class="card-body">
| <h5 class="card-title">View Paste</h5>
| <pre><code id="pasteContent"></code></pre>
| <hr />
| <h5 class="card-title">Additional Information</h5>
| <ul>
| <li><strong>UUID:</strong> <span id="uuid"></span></li>
| <li><strong>Published On:</strong> <span id="pub"></span></li>
| <li><strong>Expires On:</strong> <span id="exp"></span></li>
| <li><strong>Will Self Destruct:</strong> <span id="will_self_destruct"></span></li>
| <li><strong>Raw:</strong> <span id="raw_uuid_url"></span></li>
| </ul>
| </div>
| </div>
|
| <div style="text-align: center">
| <hr /><i>Copyright 2021 \| Developed with 💜 by <a href="https://hacked.is/">Hacked LLC</a></i>
| </div>
|
| </body>
|
| </html>
<!--EndFragment-->
</body>
</html>// Set page title
document.getElementsByTagName("title")
.item(0)
.innerText = `${document.getElementsByTagName("title")
.item(0)
.innerText} | View Paste`
// Get UUID
let uuid = window.location.href.split('/p/v/')[1];
// Get Key if exists
let isEncrypted = false;
if (window.location.href.split('#')[1]) {
isEncrypted = true;
}
// Get Paste JSON
fetch('/api/v1/paste?dataType=json&uuid='+uuid)
.then(resp => resp.text())
.then((json) => {
document.getElementById("will_self_destruct").innerText = JSON.parse(json)['will_self_destruct'];
document.getElementById("pub").innerText = JSON.parse(json)['published_on'];
document.getElementById("exp").innerText = JSON.parse(json)['expired_on'];
document.getElementById("raw_uuid_url").innerHTML = "<a href=\"" + window.location.href.split('/p/v/')[0] + "/api/v1/paste?dataType=text&uuid=" + uuid + "\">" + window.location.href.split('/p/v/')[0] + "/api/v1/paste?dataType=text&uuid=" + uuid + "</a>";
document.getElementById("uuid").innerText = uuid;
})
.then(() => {
// Get Paste Text
fetch('/api/v1/paste?dataType=text&uuid='+uuid)
.then(resp => resp.text())
.then((text) => {
if (isEncrypted) {
let bytes = CryptoJS.AES.decrypt(atob(text), atob(window.location.href.split('#')[1]));
let originalText = bytes.toString(CryptoJS.enc.Utf8);
document.getElementById("pasteContent").innerText = originalText;
document.getElementById("raw_uuid_url").innerHTML = "<a href=\"" + window.location.href.split('/p/v/')[0] + "/api/v1/paste?dataType=text&uuid=" + uuid.split("#")[0] + "\">" + window.location.href.split('/p/v/')[0] + "/api/v1/paste?dataType=text&uuid=" + uuid.split("#")[0] + "</a>";
document.getElementById("uuid").innerText = uuid.split("#")[0];
return originalText;
} else {
document.getElementById("pasteContent").innerText = text;
return text;
}
})
.then((text) => {
hljs.highlightAll();
hljs.initLineNumbersOnLoad({
singleLine: true,
});
})
})Expected behavior
I expect the content to be fetched, decrypted, hightlighted with highlightjs (this works great due to the usage of JavaScript promises) and finally for highlightjs line numbers to add a number to each line.
Screenshots
Additional context
Example URL https://paste.is/p/v/264ce2ae-c9c0-40f9-9863-61f1b0c3fd1b#NXZNeWVpM3lEV2xpNXZENldOOE5qaENUYlE5eHpoajJYTUJUblViQlZXWHY2dTJTYTFrWmVKeXZON0NHZ2haUQ==
Thanks for the report!
- Broken highlighting: highlight.js detected the wrong language as
less:
- Seems like the source code doesn't have line break symbols, could you please check?
- you can decode line break as
\ninstead of< br >
- Also you can use another way to call the plugin:
const block = document.querySelector('code.hljs');
hljs.lineNumbersBlock(block);HI thanks for replying quickly @wcoder . For the broken hilighting its unclear why the language was detected as less. I don't init hightlight until after the paste has been decrypted. I ensure this by using the promise based fetch API. This means that it will not init until the data has both been fetched and decrypted. So to answer your question about line breaks: On one page https://paste.is/p/v/2bcb2f5c-f795-466a-a128-b44bd0b06651 I turned off the encryption and the same bug occurs (see API response at https://paste.is/api/v1/paste?dataType=text&uuid=2bcb2f5c-f795-466a-a128-b44bd0b06651) as its a text file with new lines I believe line breaks are included as \n otherwise we wouldn't see the new lines? Beyond that is there any insight you could provide here if part of the issue lies in my code. It's admittedly challenging for my API serverto modify user input any as it's typically end to end encrypted to protect user privacy. Even when encrypted
are not added by the API or my JavaScript as far as I can tell.
Alternatively if you have insights on what a bug fix would ensue maybe I could contribute a pull request as your library is very helpful to my project.
One other note, it's possible that JavaScript changes the line breaks to
tags. Is there a way to turn off this behavior or replace every
element that was inserted into a \n again? I use the document.querySelector().innerText = to modify the #pasteContent element. This is needed because the API Server cannot modify an encrypted paste as not even I have access to the encryption keys. As a result when putting a user's content into the webpage I have to rely on JavaScript treating the text as text rather than HTML. Without it would be trivial for a user to put raw HTML and JavaScript into the page and perform a cross-site scripting attack.
A read of https://w3c.github.io/DOM-Parsing/#dfn-text doesn't mention the innerText adding <br> tags so it's unclear if this is undefined behavior and a browser implementation choice.
An unencrypted paste in VIM shows the line breaks.
On another note I did submit an issue to highlightjs project concerning the text being detected as LESS instead of C. highlightjs/highlight.js#3184
@irlcatgirl Please try to use innerHTML:
document.getElementById("pasteContent").innerHTML = textContent;
...
hljs.initHighlighting();
hljs.initLineNumbersOnLoad();Works fine:
So yes that works but it poses another problem (keep in mind the server cannot see let alone filter user input text). It's now unfiltered HTML / JS and results in a cross-site-scripting vulnerability. Any ideas on how to do about fixing it?
Sure, you can use any HTML escaping library for this (on backend or frontend side).
So the following works for me
document.getElementById("pasteContent").innerHTML = originalText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');a copy and paste of the https://owasp.org/www-community/xss-filter-evasion-cheatsheet does not trigger any alerts indicating its good enough.
Do you want me to close this issue since we found a solution or leave it open as a potential bug?
Yes, it can be closed.
Also, can be reopened when behaver will be wrong.