说明

把文本当做HTML代码渲染。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  11.   <div id="app"></div>
  13.   <template id="my-app">
  14.     <div>{{msg}}</div>
  15.     <div v-html="msg"></div>
  16.   </template>
  18.   <script src="https://unpkg.com/vue@next"></script>
  19.   <script>
  20.     const App = {
  21.       template: '#my-app',
  22.       data() {
  23.         return {
  24.           msg: '<span style="color:red; background: blue;">哈哈哈</span>'
  25.         }
  26.       }
  27.     }
  29.     Vue.createApp(App).mount('#app');
  30.   </script>
  31. </body>
  32. </html>

image.png

安全隐患

注意！你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。

image.png
如上图，虽然vue不允许你直接写script标签，但是可以通过其他方式执行

下面代码，放在服务器环境下运行

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  13.     <div id="app"></div>
  15.     <template id="my-app">
  16.     <div>{{msg}}</div>
  17.     <div v-html="msg"></div>
  18.     <div v-html="hack"></div>
  20.   </template>
  22.     <script src="https://unpkg.com/vue@next"></script>
  23.     <script>
  24.       // 设置cookie，用来测试
  25.         document.cookie = "name=test";
  26.         const App = {
  27.             template: '#my-app',
  28.             data() {
  29.                 return {
  30.                     msg: '<span style="color:red; background: blue;">哈哈哈</span>',
  31.                     hack: '<img src="123123" alt="" onerror="console.log(document.cookie)">',// 通过输入不存在的img src，让其执行onerror里面的恶意代码
  32.                 }
  33.             }
  34.         }
  36.         Vue.createApp(App).mount('#app');
  37.     </script>
  39. </body>
  41. </html>

如下图，通过输入不存在的img src，让其执行onerror里面的恶意代码。
image.png

如果服务器保存了用户输入的恶意代码，然后通过v-html 生成标签，就会执行代码，产生安全隐患