Fix escaping of placeholder strings

[raimund-schluessler]

Fixes #1123. Related to nextcloud/server#20976.

This will only work with Nextcloud 18.0.5 nextcloud/server#21127 and 19.0.1 nextcloud/server#21126 onwards.

Before merging we need to check that this doesn't introduce any XSS vulnerabilities.

[codecov]

Codecov Report

Merging #1124 into master will not change coverage.
The diff coverage is 50.00%.

@@           Coverage Diff           @@
##           master    #1124   +/-   ##
=======================================
  Coverage   27.82%   27.82%           
=======================================
  Files          48       48           
  Lines        2609     2609           
  Branches      494      494           
=======================================
  Hits          726      726           
  Misses       1743     1743           
  Partials      140      140           

[raimund-schluessler]

Seems to be fine XSS wise, but another opinion from @nextcloud/javascript and @ChristophWurst (since you introduced the fix in server) would be great.

[ChristophWurst]

Make not to use v-html with this

[raimund-schluessler]

Make not to use v-html with this

Thanks for the feedback. We don't use v-html anywhere in Tasks (I also think one should use a component with a render function instead of v-html, but that's a different story I guess.)

[raimund-schluessler]

I just realized there are more occurrences where we have to fix it:

• Creating a calendar with an already used name
• Deleting a calendar
• Removing a calendar share
• Batch-deleting tasks from a calendar

[raimund-schluessler]

I think I found all occurrences now. If anything else shows up, we can fix it in a later PR.

[gitaarik]

Just a question, what is this.$t? It looks like vue-i18n but I don't recognize all the options. Also I'm not very familiar with Vue so I don't know where to look to find out where this.$t is defined.

[gary-kim]

It's Nextcloud's l10n system. You will find it bound to window.t on all Nextcloud pages or you can use this npm package. You find where it gets set here:

tasks/src/main.js

Lines 61 to 66 in e56ed81

	Vue.prototype.$t = function() {
	return t.apply(null, arguments).toString()
	}
	Vue.prototype.$n = function() {
	return n.apply(null, arguments).toString()
	}

[gitaarik]

Aha I see, cool. So the translations of nextcloud apps are all managed by a centralized system? Also, don't you mean it's bound to the `Vue` object instead of the `window` object?

…

On 7/16/20 11:20, Gary Kim wrote: It's Nextcloud's l10n system. You will find it bound to |window.t| on all Nextcloud pages or you can use this <https://github.com/nextcloud/nextcloud-l10n> npm package. You find where it gets set here: https://github.com/nextcloud/tasks/blob/e56ed81a2f6b91ec6abc37039619bc8da0741882/src/main.js#L61-L66 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1124 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAS3DHV2J3QKL3YIOVDCOY3R34SFNANCNFSM4OZ3WRAA>.

[raimund-schluessler]

So the translations of nextcloud apps are all managed by a centralized system?

Yes, they are handled by Transifex. The translateable strings get extracted from the source automatically, get uploaded to transifex, translated there, and the translated strings are pushed to the repo by @nextcloud-bot.

Also, don't you mean it's bound to the Vue object instead of the window object?

Both, actually. We bind the window.t to the Vue object here:

tasks/src/main.js

Line 62 in e56ed81

return t.apply(null, arguments).toString()

[gitaarik]

Aha cool, so Nextcloud does not enforce apps to be written in Vue? Sorry if I'm bothering you with these questions. I really like the Nextcloud project and especially the tasks app at the moment. I'm using it in combination with the android app https://tasks.org/. That app also supports sub-tasks and synchronizes nicely with Nextcloud. I am sharing a task list with my partner now and it's really handy. I would like to get a notification when my partner adds new items in the list. So therefore the creator/owner of the task should be saved with the item so it can be synchronized to this app so the app can get a feature to send a notification when new items from another person have been synchronized.

…

On 7/16/20 13:10, Raimund Schlüßler wrote: So the translations of nextcloud apps are all managed by a centralized system? Yes, they are handled by Transifex. The translateable strings get extracted from the source automatically, get uploaded to transifex, translated there, and the translated strings are pushed to the repo by @nextcloud-bot <https://github.com/nextcloud-bot>. Also, don't you mean it's bound to the |Vue| object instead of the |window| object? Both, actually. We bind the |window.t| to the Vue object here: https://github.com/nextcloud/tasks/blob/e56ed81a2f6b91ec6abc37039619bc8da0741882/src/main.js#L62 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1124 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAS3DHXFWAVQ4VCGMAM5AC3R3467TANCNFSM4OZ3WRAA>.

[raimund-schluessler]

Aha cool, so Nextcloud does not enforce apps to be written in Vue?

You can write your apps using React or Angluar or plain JavaScript as well. However, I would highly recommend Vue, since the Nextcloud interface library https://github.com/nextcloud/nextcloud-vue is written in Vue and Vue is the standard framework used all over Nextcloud.

Let's discuss the other questions in the respective issue.