内容安全策略拒绝 v-html 中的 XSS 攻击

Question

我原以为 Response Header: Content-Security-Policy-Report-Only: script-src 'self' 'unsafe-inline' 在我的 Nuxt.js .vue 文件中。下面是我的代码片段

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

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

我原以为从浏览器悬停在 span 上不会导致 alert，但尽管有 Content-Security-Policy-Report-Only

但它仍然会出现

Answer 1

好吧，我不能发表评论，所以我发布了答案，因为我完全不明白这个问题（我听说存在 xhtml，从未听说过 vhtml）。 <span> 不防止 XSS attack.This 触发 xss。

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

不要使用 <span> 作为缓解措施。您应该阅读 unsafe-inline 政策的作用。顾名思义，它允许攻击者在该页面上使用任何脚本。所以，你不应该使用 unsafe-inline 来缓解 XSS 攻击。仅使用 self 或您信任的其他来源。简而言之，unsafe-inline 是黑客的福音。顾名思义，这是一项不安全的政策

这个话题更适合 security.stackexchange.com

Answer 2

nuxt-helmet 模块帮了我大忙。只需在 nuxt.config.js

中添加以下代码段

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

内容安全策略拒绝 v-html 中的 XSS 攻击

Content Security Policy reject XSS attacks in v-html

content-security-policy

vue.js