在现有JSF Web应用中集成lottie-player时标签未渲染的问题

核心原因 #

JSF Facelets默认会过滤未注册的自定义HTML元素（如lottie-player这类Web Component），将其视为无效标签并移除，导致无法传到客户端渲染。

解决方案 #

1. 配置Facelets允许未知标签 #

在web.xml中添加以下上下文参数，让Facelets忽略无效标签，保留自定义元素：

<context-param>
    <param-name>javax.faces.FACELETS_IGNORE_INVALID_TAGS</param-name>
    <param-value>true</param-value>
</context-param>
<context-param>
    <param-name>javax.faces.FACELETS_IGNORE_INVALID_XML</param-name>
    <param-value>true</param-value>
</context-param>

2. 正确引入lottie-player脚本 #

确保在xhtml页面中引入官方的lottie-player脚本，建议放在<h:head>或页面末尾的<h:body>内：

<h:head>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <!-- 本地部署可替换为相对路径，比如：
    <script src="#{request.contextPath}/js/lottie-player.js"></script>
    -->
</h:head>

3. 绕过JSF的文本转义（可选） #

如果直接写<lottie-player>标签仍不生效，可通过<h:outputText>配合escape="false"强制输出原始标签：

<h:outputText value="<lottie-player src='#{request.contextPath}/animations/demo.json' 
    background='transparent' speed='1' style='width: 300px; height: 300px;' 
    loop autoplay></lottie-player>" escape="false" />

4. 检查Payara-Micro的安全限制 #

如果Payara-Micro配置了内容安全策略（CSP），需允许加载lottie脚本和动画资源。可通过自定义过滤器设置响应头：

public class CspFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) 
            throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        // 根据实际需求调整CSP规则
        httpResponse.setHeader("Content-Security-Policy", 
            "script-src 'self' unpkg.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;");
        chain.doFilter(request, response);
    }
}

在web.xml中注册该过滤器：

<filter>
    <filter-name>CspFilter</filter-name>
    <filter-class>com.yourpackage.CspFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CspFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

5. 客户端验证 #

部署后打开浏览器开发者工具：

• 查看Elements标签，确认<lottie-player>标签是否存在
• 查看Network标签，确认lottie脚本和动画JSON是否加载成功
• 查看Console标签，排查JS报错（如路径错误、脚本加载失败等）

内容的提问来源于stack exchange，提问作者Makhz