Lottie Animation 不加载 ejs，但加载标准 html

Question

我正在使用以下代码在项目中嵌入一个 lottie 文件，它被添加到 DOM 但我看不到它。我正在使用 ejs，但是当我切换到标准 html 时，我可以看到 lottie 动画。

<script
  src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"
></script>
<lottie-player
  src="https://assets2.lottiefiles.com/private_files/lf30_kecMeI.json"
  background="transparent"
  speed="0.2"
  style="width: 500px; height: 500px"
  loop
  autoplay
></lottie-player>

当我运行这段代码在ejs上时，我得到的是这样的，请提出解决方案，谢谢！

我的ejs代码：

<%- include('header'); -%>
<div class="info-header">
  <h1>dCrypt</h1>
  <p class="info">
    dCrypt 2020 promises to be a cryptic hunt in a league of its own. We have
    developed a new platform that combines the classic Capture the Flag formula
    with a fun, engaging and strategic wargame that will test both the
    participants ability to solve these questions, while also using resources in
    a tactical manner.
  </p>
  <button class="mainbtns">Format</button>
  <button class="mainbtns" style="margin-left: 5%">Discord</button>
</div>
<script
  src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"
></script>
<lottie-player
  src="https://assets2.lottiefiles.com/private_files/lf30_kecMeI.json"
  background="transparent"
  speed="0.2"
  style="width: 500px; height: 500px"
  loop
  autoplay
></lottie-player>
<%- include('footer'); -%>

我如何渲染上面的 ejs 代码：

app.get("/", contentSecurity, (req, res) => {
  res.render("index.ejs", { active: "home" });
});

页脚和页眉只有文字，css

网络选项卡：

Answer 1

所以这与 ejs 无关 - 不同之处在于您的服务器正在向页面的 HTTP get 请求添加 headers。

打开网站我在控制台上收到以下错误：

Content Security Policy: The page's settings blocked the loading of a resource at eval ("script-src").

这是因为 header 服务于您的页面：

content-security-policy: script-src 'self' https://* 'unsafe-inline'

您可以在 MDN page on the header and on script-src 上找到更多详细信息。

抛出错误的行使用 eval 来创建一个函数，以便您必须将 'unsafe-eval' 添加到 header。

Lottie Animation 不加载 ejs，但加载标准 html

Lottie Animation not loading with ejs, but loads with standard html

javascript

html

css

ejs

lottie