title: Are we forced to use 'unsafe-inline' in our CSP when using Vue.JS?
body: <p>Is there a way to make Vue.js to work with CSP properly?</p>
  
  <p>When I run my <code>spa</code> application (resulting from <code>npm run generate</code> with Nuxt.js), I will get several warnings such as these:</p>
  
  <blockquote>
    <p>Refused to apply inline style because it violates the following
    Content Security Policy directive: "style-src 'self' 'strict-dynamic'
    'nonce-124lk5fjOc4jn7qqLYEsG2jEvxYuqu8J' 'unsafe-inline' https:". Note
    that 'unsafe-inline' is ignored if either a hash or nonce value is
    present in the source list.</p>
  </blockquote>
  
  <p>Knowing <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP" rel="noreferrer">CSP</a>, there are two correct ways of fixing this:</p>
  
  <ol>
  <li><p>Using nonces, where Vue.js would have to sign all the generated scripts and styles with a <code>nonce</code> attribute. But I don't think this would solve anything, since it appears some CSS is added inline.</p></li>
  <li><p>Using hashes, which is actually the preferred way of doing it, since the hash secures exactly what we want the client to execute on the browser.</p></li>
  </ol>
  
  <p>However, in order to use hashes, Vue.js/Webpack must be able to calculate the hash for all its <strong>scripts</strong> and <strong>styles</strong>, and:</p>
  
  <ul>
  <li>for each compilation, tell them to the developer that will then <a href="https://content-security-policy.com/" rel="noreferrer">add these hashes</a> to a NGINX configuration file,</li>
  </ul>
  
  <p>or,</p>
  
  <ul>
  <li>be able to generate <a href="https://developers.google.com/web/fundamentals/security/csp#the_meta_tag" rel="noreferrer">meta tags</a> containing the hashes, making this process 100% transparent to the developer, who doesn't need to configure anything else to guarantee a good CSP protection.</li>
  </ul>
  
  <p>Does Vue.js support this in any way? Is there anyone in the world who was able to make CSP working with Vue.js without any 'unsafe-inline'?</p>