CODEWITHSUNDEEP
javascripthtmlcssejslottie
ssomename
ssomename

Reputation: 545

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

I am using the following code to embed a lottie file in a project, it gets added to the DOM but I cant see it. I am using ejs, but when I switch to standard html, I can see the lottie animation.

<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>

When I run this code on ejs, this is what I get, please suggest a solution, Thanks! enter image description here

My ejs code:

<%- 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'); -%>

How I render the above ejs code:

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

The footer and header only have text and css

Network tab: Network Tab

Upvotes: 0

Views: 2089

Answers (1)

Euan Smith
Euan Smith

Reputation: 2192

So this is nothing to do with ejs - the difference is that your server is adding headers to the HTTP get request for the page.

Opening the site I get the following error on the console:

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

This is because of a header served with your page:

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

You can find more details on the MDN page on the header and on script-src specifically.

The line that is throwing the error uses an eval to create a function, to enable that you have to add 'unsafe-eval' to the header.

Upvotes: 1

Related Questions