How to replace the `vue:href` method

:href="" is scanned by sonarqube, showing Take care when using the v-bind:href directive to set URLs which can contain malicious Javascript (javascript:onClick(…)).
Brothers and sisters, is there any way to replace :href?

<el-table-column prop="link" width="70">
   <template slot-scope="{row}">
      <a :href="row.link" rel="opener" target="_blank" class="fast">{{row.link}}</a>
   </template>
</el-table-column>

>Solution :

Looking at the sonarqube report, your code href address may be a piece of executable code, which can be changed to a p tag, and then bind the click event to the p tag to achieve the purpose through window.open();

In addition, the address of the general dynamic a link still needs to be processed, otherwise there is a risk of script injection.

A js library is recommended:
https://www.npmjs.com/package/@braintree/sanitize-url

Leave a Reply