CODEWITHSUNDEEP
vue.jscontent-security-policy
Dean Christian Armada
Dean Christian Armada

Reputation: 7384

Content Security Policy reject XSS attacks in v-html

I was expecting that having a Response Header: Content-Security-Policy-Report-Only: script-src 'self' 'unsafe-inline' in my Nuxt.js .vue file. With my snippet below

<template>
  <div>
    <span v-html="xss"></span>
  </div>
</template>

<script>
export default {
  data() {
    return { xss: '<b onmouseover=alert("Wufff!")>click me!</b>' }
  }
}
</script>

I was expecting that hovering on the span from the browser will not result to an alert but it still does despite the Content-Security-Policy-Report-Only

Upvotes: 1

Views: 918

Answers (2)

Machine Yadav
Machine Yadav

Reputation: 326

Well I cant comment so I am posting answer as I fully dont understand the question (i heard xhtml exist, never heard about vhtml). <span> doesnt protect against XSS attack.This triggers xss.

<html>
    <head>
        <title></title></head>
    <body>
        <span ><img src=x onerror=alert(1)></img></span>
</html>

Don't use <span> as a mitigating measure. You should read what the unsafe-inline policy does. It allows as it name says any script on that page from the attacker. So, you should never use unsafe-inline to mitigate XSS attack. Use only self or other sources that you trust. In nutshell, unsafe-inline is a blessing for hackers. As its name says its an unsafe policy

This topic is more suited on security.stackexchange.com alert(1)

Upvotes: 2

Dean Christian Armada
Dean Christian Armada

Reputation: 7384

nuxt-helmet module did the trick for me. Just add below snippet in nuxt.config.js

   helmet: {
     contentSecurityPolicy: {
       directives: {
         defaultSrc: ["'self'"],
         scriptSrc: ["'self'", "'unsafe-eval'"]
       }
     }
   }

Upvotes: 0

Related Questions