0

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

ssomename
  • 505
  • 6
  • 21
  • Where are you executing the EJS? Client-side or server-side? If it is client-side then provide a [mcve]. – Quentin Sep 04 '20 at 09:44
  • @Quentin I have added the ejs code – ssomename Sep 04 '20 at 09:51
  • Does it make a difference if you remove "async defer" from the script tag? I've often found a race condition at the heart of this kind of bug as small seemingly inconsequential stuff can often have an impact on timing. – Euan Smith Sep 04 '20 at 09:59
  • (to be clear - removing the async defer is about finding out if it is a race issue or not - this may not be the best solution as async loading may still be desired.) – Euan Smith Sep 04 '20 at 10:06
  • @EuanSmith lol no, it still does'nt work, I added it to make the code work somehow :/ but it doesnt make a difference – ssomename Sep 04 '20 at 10:06
  • OK. So to clarify - if you load the HTML as a stitic file it works, but if you load it via your server (with _exactly the same_ HTML output) it does not work? – Euan Smith Sep 04 '20 at 10:08
  • Yes,all I get is the following warning, when I check the Enable Javascript Sourcemaps option in chrome dev tools settings : DevTools failed to load SourceMap: Could not load content for https://unpkg.com/lottie-player.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE – ssomename Sep 04 '20 at 10:11
  • Check the network tab - are all the other sources (the player and your JSON file) loading correctly and in the same order in each case? – Euan Smith Sep 04 '20 at 10:16
  • The network tab does not show the json file and the player being loaded, all I get there is a picture I use on the website, screenshot attached – ssomename Sep 04 '20 at 10:21
  • @EuanSmith I hosted the website so you could see it, its at https://dcrypt.in – ssomename Sep 04 '20 at 17:31

1 Answers1

1

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.

Euan Smith
  • 2,102
  • 1
  • 16
  • 26
  • 1
    Thanks a lot! this solved my problem, but could you please tell me if there is any security risk that comes up with these headers? if yes, then is there a better way of loading scripts like these? thanks again – ssomename Sep 05 '20 at 08:30
  • @SomeName where did you added this `unsafe-eval` – mr.loop May 23 '21 at 10:02
  • @mr.loop Check out the links to the MDN documentation in the answer. All the info you need is there. – Euan Smith May 24 '21 at 11:10