Vue Fortified: Best Practices for Web App Security

In today's world, prioritizing your application's security is crucial. All the data stored in it should be kept safe and protected, just like the inhabitants of a fortress that rely on high walls for their defense. However, history and movies have shown that even the most robust walls can't withstand an attack if weak points can be exploited. This is also true for VueJS applications.

Join me for a concise, practical session on fortifying your Vue.js apps against security threats and implementing best practices.

Transcript

19. Vue.createApp({ template: `<div>` + userProvidedString + `</div>` // NEVER DO THIS }).mount('#app')
20. Vue.createApp({ template: `<div>` + userProvidedString + `</div>` // NEVER DO THIS }).mount('#app')
23. <h1>{{ userProvidedString }}</h1> '<script>alert("hi")</script>'
24. <h1>{{ userProvidedString }}</h1> '<script>alert("hi")</script>'
25. <h1>{{ userProvidedString }}</h1> &quot; onclick=&quot;alert('hi')
26. '" onclick="alert(\'hi\')' <h1 :title="userProvidedString"> hello </h1>
27. '" onclick="alert(\'hi\')' <h1 :title="userProvidedString"> hello </h1>
28. &quot; onclick=&quot;alert('hi') <h1 :title="userProvidedString"> hello </h1>
33. <div v-html="userProvidedHtml"></div>
34. h('div', { innerHTML: this.userProvidedHtml })
35. <div innerHTML={this.userProvidedHtml}></div>
37. <a :href="userProvidedUrl"> click me </a>
38. <a :href="userProvidedUrl"> click me </a>
39. <a :href="sanitizedUrl" :style="userProvidedStyles" > click me </a>
40. <a :href="sanitizedUrl" :style="userProvidedStyles" > click me </a>
41. <style>{{ userProvidedStyles }}</style>
42. <style>{{ userProvidedStyles }}</style>
43. <style>{{ userProvidedStyles }}</style> <a :href="sanitizedUrl" :style="{ color: userProvidedColor, background: userProvidedBackground }" > click me </a>
44. <style>{{ userProvidedStyles }}</style> <a :href="sanitizedUrl" :style="{ color: userProvidedColor, background: userProvidedBackground }" > click me </a>
45. JavaScript injection DON'Ts
46. JavaScript injection DON'Ts
47. JavaScript injection DON'Ts