Intensive reading of the Vue official document series 🎉

Reporting security Vulnerabilities

If you find any security holes, please email to [email protected]. There will be full-time contributors to handle it in a timely manner.

It is recommended to always use the latest version of Vue and its official peripheral libraries to ensure your application is as secure as possible.

Never use untrusted templates

Never use untrustworthy content as template content, the most typical is user-provided content, including HTML, JS, CSS.

HTML injection

Typical XSS attacks:

new Vue({
  el: '#app'.template: `<div>` + userProvidedString + `</div>` // Never do this
})
Copy the code

Vue internally escapes through the browser’s native textContent.

If you are completely sure that the dynamically rendered content is absolutely correct, you can also render HTML content by displaying it in the following way:

  • Using templates:
<div v-html="userProvidedHtml"></div>
Copy the code
  • Using the render function:
h('div', {
  domProps: {
    innerHTML: this.userProvidedHtml
  }
})
Copy the code
  • Using jSX-based render functions:
<div domPropsInnerHTML={this.userProvidedHtml}></div>
Copy the code

The Attribute injection

The attack is implemented by indirectly injecting new attributes by closing attributes

var dynamicTitle = '" onclick="alert(\'hi\')';
var h1 = '<h1 title="'+ dynamicTitle +'">hello</h1>';
Copy the code

To ensure that such attacks do not occur, we should always bind attributes and pass values based on the V-bind directive provided by Vue.

<h1 v-bind:title="userProvidedString">
  hello
</h1>
Copy the code

If userProvidedString contains attack code, it will be escaped as:

&quot; onclick=&quot;alert('hi')
Copy the code

The escape is done through browser-native apis such as setAttribute, so there is no security hole unless the browser itself has a security hole.

Assign unsafe content toonclick,onfocus,onmouseenterEtc event handle

Developers should always take risks and not operate templates that bypass Vue’s own capabilities.

URL into

The href attribute allows you to execute javascript:alert(\’hi\’) expressions.

<a v-bind:href="userProvidedUrl">
  click me
</a>
Copy the code

The best solution is to filter the URLS as they are stored in the back end.

CSS injection

<a
  v-bind:href="sanitizedUrl"
  v-bind:style="userProvidedStyles"
>
  click me
</a>
Copy the code

If tag A in the above example allows users to provide links and styles that are not 100% secure, it is conceivable that an attacker would change the presentation style of the current tag. For example, make it transparent and locate it above the login button, and then when the user clicks on login, it will jump to a similar phishing site, which can steal user information and conduct “phishing attacks”.

The solution is not to assign a value directly to the style property of a tag, but to always assign a value to a specific CSS property through object syntax.

<a
  v-bind:href="sanitizedUrl"
  v-bind:style="{ color: userProvidedColor, background: userProvidedBackground }"
>
  click me
</a>
Copy the code

Sandboxed unsafe HTML, CSS, and JS content.

Using CodePen and JSFiddle, you can sandbox your content by putting it in an iframe that you can’t determine is secure.

Best practices

Please read the article in detail, they document the various attack methods, learn from the experience, strengthen the security of our application:

  • HTML5 security cheat sheets
  • Cross site Scripting prevention cheat sheet – XSS
  • Cross site Request Security cheat sheet – CSRF