vue-linkify icon indicating copy to clipboard operation
vue-linkify copied to clipboard

Add Support for `{{}}` syntax

Open yuichkun opened this issue 3 years ago • 1 comments

Summary

Hi, there!

When I posted this issue, I was misunderstanding this library's intention to use v-html rather than the {{}} syntax that vue provides.

I thought it would be nicer if there's an option to use {{}}, as it is safer in terms of XSS attack, which is what Vue.js itself suggests in the docs.

So, this PR intends to add support for such case, while preserving the original behavior of supporting v-html.

Notice:

vue-linkify kind of worked with {{}} syntax even without this PR, but it did have a re-render issue above, so this PR tries to solve that as well :)

Example

With this PR,

<div v-linkified>
      <h2>With new vue-linkify</h2>
       my site: {{ msg }}
</div>

will be converted to

<!-- suppose you provide msg as "https://google.com" -->
<div>
      <h2>With new vue-linkify</h2>
       my site: <a href="https://google.com" class="linkified" target="_blank">https://google.com</a>
</div>

yuichkun avatar Mar 24 '21 00:03 yuichkun

I'm not too convinced by this additional feature TBH. String interop with {{}} is meant to escape special HTML characters and should be used as such. Also, linkifying in itself means the user should be aware of the implications (XSS attacks).

In short, I don't think the additional code (and with it, maintenance) is worth the extra functionality.

phanan avatar Mar 24 '21 13:03 phanan