面试题：Vue中v - html指令存在哪些常见安全风险及如何防范

Question

请详细阐述Vue中v - html指令在使用过程中可能面临的安全风险，例如跨站脚本攻击（XSS）的风险点在哪里，并说明针对这些风险通常有哪些防范措施。

Answer 1

v-html指令安全风险

1. XSS风险点
   • 恶意代码注入：当v - html绑定的数据来自用户输入且未经过严格过滤时，攻击者可以输入包含恶意JavaScript代码的HTML字符串。例如，如果有一个评论输入框，用户输入<script>alert('XSS')</script>，然后通过v - html指令渲染到页面上，这段恶意脚本就会被执行，从而可以窃取用户的Cookie、执行其他恶意操作等。因为v - html会直接将绑定的HTML字符串解析并渲染到DOM中，浏览器会把其中的JavaScript代码当作正常脚本执行。

防范措施

1. 输入验证与过滤
   • 白名单过滤：对用户输入的数据进行严格的白名单过滤，只允许特定的、安全的HTML标签和属性通过。例如，只允许<p>、<b>、<i>等简单的文本格式化标签，而过滤掉<script>、<iframe>等可能执行脚本的标签。可以使用一些第三方库如DOMPurify来实现白名单过滤。例如：

   import DOMPurify from 'dompurify';
   let userInput = '<script>alert("XSS")</script>';
   let cleanInput = DOMPurify.sanitize(userInput);
   // cleanInput 将会是去除了 <script> 标签的安全字符串
   

2. 避免直接渲染用户输入
   • 尽量使用文本插值：如果只是展示用户输入的文本，尽量使用{{}}文本插值而不是v - html。文本插值会对内容进行转义，自动防止XSS攻击。例如，用户输入<script>alert('XSS')</script>，使用文本插值展示时，会将其显示为纯文本<script>alert('XSS')</script>，而不会当作脚本执行。
3. 内容安全策略（CSP）
   • 设置HTTP头：在服务器端设置Content - Security - Policy（CSP）HTTP头。例如，设置Content - Security - Policy: default - src'self'，这表示浏览器只允许从当前源加载资源，不允许加载外部脚本，从而限制了XSS攻击的可能性。即使攻击者通过v - html注入了恶意脚本，由于CSP的限制，该脚本也无法执行。