Last modified: 2014-09-17 19:22:44 UTC
We currently use jQuery to pluck out the reference link and text for the reference drawer on mobile by grabbing the clicked link, appending the href to a css selector looking for daughter elements of the reference list and displaying the text of that link. The href itself is determined (for named references) by an arbitrary string given as by the user. Crucially, the visual editor will insert placeholder named references (e.g. ":0", ":1") if you select "re-use" among the citation options for a reference which does not already have a name. If the selector string contains unescaped special characters it will likely fail, getReference will return undefined and the text field will be blank. The colon (':') is *automatically* inserted by the visual editor for reused references and will break the CSS selector and cause the reference drawer to appear blank. Steps to reproduce: 1. on a page with a reference list, make a named reference <ref name=":a">abcd</ref> 2. Save the page and (in mobile) tap on the reference. 3. The reference drawer will be blank How to fix: Sanitize the input field. Right now we escape '.' but nothing else. A user could insert any of the special characters in a name (see here for some info https://mathiasbynens.be/notes/css-escapes) so we should eventually have a solution which covers all of them but the visual editor inserts ':' likely without the knowledge of the user so that's the critical one.
Prioritization and scheduling of this bug is tracked on Trello card https://trello.com/c/rOLo9Dou
Change 160971 had a related patch set uploaded by Protonk: Escape all CSS metacharacters for ref drawer https://gerrit.wikimedia.org/r/160971
Change 160971 merged by jenkins-bot: Escape all CSS metacharacters for ref drawer https://gerrit.wikimedia.org/r/160971
