在htm项目中正确处理HTML中的JSON字符串

2025-05-26 18:49:30作者：滕妙奇

在开发Web应用时，我们经常需要在HTML中嵌入JSON数据，特别是在使用现代前端框架如Preact时。htm作为一个轻量级的HTML模板标签库，提供了一种简洁的方式来创建虚拟DOM节点。然而，当我们需要在HTML中嵌入包含双引号的JSON字符串时，可能会遇到转义问题。

问题背景

当我们在htm模板中直接写入包含双引号的JSON字符串时，htm会自动将这些双引号转义为HTML实体"。这在大多数情况下是安全的，但对于某些特定场景（如<script type="importmap">标签内的JSON内容），这种转义会导致内容无法被正确解析。

解决方案

Preact和React提供了dangerouslySetInnerHTML属性，它可以让我们直接设置元素的innerHTML而不进行转义。虽然这个属性名称中带有"dangerously"（表示潜在的安全风险），但在受控环境下（如我们完全掌控JSON内容时），这是一个可靠的解决方案。

实现步骤

首先将JSON数据定义为JavaScript对象
使用JSON.stringify()将其转换为字符串
通过dangerouslySetInnerHTML属性将其注入到script标签中

const importMap = {
    imports: {
        "preact-iso": "https://esm.sh/preact-iso@2.4.0"
    }
};

const htmlContent = html`
    <html>
        <head>
            <script 
                type="importmap" 
                dangerouslySetInnerHTML=${{ __html: JSON.stringify(importMap) }}
            ></script>
        </head>
    </html>
`;

安全注意事项

虽然这种方法解决了我们的问题，但需要注意以下几点：

确保JSON数据来源可信，避免XSS攻击
不要直接将用户输入的内容通过这种方式注入
考虑使用JSON Schema验证数据格式
对于复杂的应用，可以考虑将importmap提取到单独的文件中

替代方案

如果对安全性有更高要求，可以考虑以下替代方案：

使用外部JSON文件并通过<script src>引入
使用Webpack或Rollup等构建工具处理importmap
在服务端渲染时注入JSON数据

总结

在htm项目中使用dangerouslySetInnerHTML是处理HTML中JSON字符串的有效方法，特别是在需要保持JSON格式完整性的场景下。开发者需要权衡便利性与安全性，选择最适合项目需求的解决方案。

登录后查看全文

热门内容推荐

最新内容推荐

项目优选

收起

ohos_react_native

React Native鸿蒙化仓库

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

openGauss-server

openGauss kernel ~ openGauss is an open source relational database management system

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！

HarmonyOS-Examples

本仓将收集和展示仓颉鸿蒙应用示例代码，欢迎大家投稿，在仓颉鸿蒙社区展现你的妙趣设计！

CangjieCommunity

为仓颉编程语言开发者打造活跃、开放、高质量的社区环境

ShopXO开源商城

🔥🔥🔥ShopXO企业级免费开源商城系统，可视化DIY拖拽装修、包含PC、H5、多端小程序(微信+支付宝+百度+头条&抖音+QQ+快手)、APP、多仓库、多商户、多门店、IM客服、进销存，遵循MIT开源协议发布、基于ThinkPHP8框架研发

一款跨平台的 Markdown AI 笔记软件，致力于使用 AI 建立记录和写作的桥梁。

🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端

基于可以运行在OpenHarmony的git，提供git客户端操作能力