WebView加载本地HTML时如何防止XSS攻击？

轩辕梦媛提问于 2026-03-20 13:40:25 阅读 14

移动

我在React Native里用WebView加载本地的HTML文件，但担心用户输入的内容被注入脚本。比如我从接口拿到一段富文本，直接塞进HTML里展示，会不会有安全风险？

试过用DOMPurify清理内容，但在WebView里好像没生效，还是能执行alert。是不是本地HTML本身就容易被绕过？有没有更稳妥的做法？

const htmlContent = 
  <html>
    <body>
      <div>${userGeneratedContent}</div>
    </body>
  </html>
;
// userGeneratedContent 可能包含 alert('xss')

我来解答赞 1 收藏

反馈

1 条解答

星瑶 ☘︎ Lv1

一般这样处理。在WebView加载本地HTML时，防止XSS攻击的关键是要确保用户生成的内容不会被当作代码执行。虽然你已经尝试了DOMPurify，但在WebView中可能需要额外的措施。

首先，确保DOMPurify正确集成。有时候配置不当会导致它不起作用。你需要确保它是为浏览器环境配置的，而不是Node.js。

其次，尽量避免直接将用户生成的内容插入到HTML中。可以考虑使用Content Security Policy (CSP) 来限制可以执行的脚本来源。虽然CSP在WebView中的支持可能有限，但可以在一定程度上提高安全性。

再者，可以尝试对用户输入进行严格的转义处理。HTML实体编码是一个简单有效的方法，可以防止特殊字符被解析为HTML或脚本。比如将<转换为<，>转换为>，&转换为&。

最后，如果你的应用逻辑允许，可以考虑将用户生成的内容存储在服务器端，并通过API返回安全处理后的内容，而不是直接在客户端拼接HTML。

举个简单的例子，使用HTML实体编码可以这样处理用户输入：

function escapeHtml(unsafe) {

    return unsafe

         .replace(/&/g, "&")

         .replace(/
         .replace(/>/g, ">")

         .replace(/"/g, """)

         .replace(/'/g, "'");

}



const safeUserContent = escapeHtml(userGeneratedContent);

const htmlContent = 

  '' + safeUserContent + '
';

这样可以减少XSS攻击的风险。当然，安全是个不断变化的话题，最好定期更新和检查你的安全策略。

2026-03-20 14:49