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

2025-05-26 04:48:33作者：滕妙奇

在开发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格式完整性的场景下。开发者需要权衡便利性与安全性，选择最适合项目需求的解决方案。

htm

Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.

项目地址：https://gitcode.com/gh_mirrors/ht/htm

登录后查看全文

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

问题背景

解决方案

实现步骤

安全注意事项

替代方案

总结

热门内容推荐

最新内容推荐

项目优选

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

问题背景

解决方案

实现步骤

安全注意事项

替代方案

总结

相关内容推荐

热门内容推荐

最新内容推荐

项目优选