Lottie Animation не загружается с помощью ejs, но загружается со стандартным html

Я использую следующий код для встраивания файла лотереи в проект, он добавляется в DOM, но я его не вижу. Я использую ejs, но когда я переключаюсь на стандартный html, я вижу анимацию лотереи.

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

Вкладка «Сеть»: Вкладка


person ssomename    schedule 04.09.2020    source источник
comment
Где вы выполняете EJS? На стороне клиента или на стороне сервера? Если это на стороне клиента, предоставьте минимальный воспроизводимый пример.   -  person Quentin    schedule 04.09.2020
comment
@Quentin, я добавил код ejs   -  person SomeName    schedule 04.09.2020
comment
Есть ли разница, если вы удалите асинхронную отсрочку из тега скрипта? Я часто находил состояние гонки в основе такого рода ошибок, поскольку небольшие, казалось бы, несущественные вещи часто могут влиять на время.   -  person Euan Smith    schedule 04.09.2020
comment
(для ясности - удаление асинхронной отсрочки связано с выяснением того, является ли это проблемой гонки или нет - это может быть не лучшим решением, поскольку асинхронная загрузка все еще может быть желательной.)   -  person Euan Smith    schedule 04.09.2020
comment
@EuanSmith, лол, нет, это все еще не работает, я добавил его, чтобы код как-то работал:/ но это не имеет значения   -  person SomeName    schedule 04.09.2020
comment
ХОРОШО. Итак, чтобы уточнить - если вы загружаете HTML как статический файл, он работает, но если вы загружаете его через свой сервер (с точно таким же выводом HTML), он не работает?   -  person Euan Smith    schedule 04.09.2020
comment
Да, все, что я получаю, это следующее предупреждение, когда я проверяю параметр «Включить исходные карты Javascript» в настройках инструментов разработчика Chrome: DevTools не удалось загрузить SourceMap: не удалось загрузить контент для unpkg.com/lottie-player.js.map: ошибка HTTP: код состояния 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE   -  person SomeName    schedule 04.09.2020
comment
Проверьте вкладку «Сеть» — все остальные источники (проигрыватель и ваш JSON-файл) загружаются правильно и в том же порядке в каждом случае?   -  person Euan Smith    schedule 04.09.2020
comment
На вкладке сети не отображается файл json и загружаемый плеер, все, что я получаю, это изображение, которое я использую на веб-сайте, скриншот прилагается   -  person SomeName    schedule 04.09.2020
comment
@EuanSmith Я разместил веб-сайт, чтобы вы могли его увидеть, он находится по адресу dcrypt.in.   -  person SomeName    schedule 04.09.2020


Ответы (1)


Так что это не имеет ничего общего с ejs - разница в том, что ваш сервер добавляет заголовки в HTTP-запрос на получение страницы.

Открывая сайт, я получаю следующую ошибку в консоли:

Политика безопасности контента: настройки страницы заблокировали загрузку ресурса в eval (script-src).

Это связано с заголовком на вашей странице:

политика безопасности контента: script-src 'self' https://* 'unsafe-inline'

Дополнительную информацию можно найти на странице MDN на заголовок и на script-src в частности.

Строка, которая выдает ошибку, использует eval для создания функции, чтобы включить ее, вы должны добавить 'unsafe-eval' в заголовок.

person Euan Smith    schedule 04.09.2020
comment
Большое спасибо! это решило мою проблему, но не могли бы вы сказать мне, есть ли какая-либо угроза безопасности, связанная с этими заголовками? если да, то есть ли лучший способ загрузки таких скриптов? еще раз спасибо - person SomeName; 05.09.2020
comment
@SomeName, куда ты добавил это unsafe-eval - person mr.loop; 23.05.2021
comment
@mr.loop Ознакомьтесь со ссылками на документацию MDN в ответе. Вся необходимая информация есть. - person Euan Smith; 24.05.2021