Решение CSP для нескольких встроенных скриптов

Question

Итак... CSP успешно реализован на моем сайте. Однако на моем веб-сайте используется множество встроенных скриптов для перенаправления посетителей в зависимости от их выбора флажка HTML. В развитие, хватило, но теперь я готов выйти в эфир, и это большое препятствие, мешающее мне это сделать.

      <label for="giorgio-armani" class="d-flex">
<input type="checkbox" id="giorgio-armani" class="mr-2 mt-1" onChange="window.location.href='/shop/brands/giorgio-armani'"> Giorgio Armani</label>

Это будет пример моего кода. Как и в случае с меню сайта, могут быть буквально сотни одинаковых флажков подряд для разных пунктов назначения.

У меня была ссылка на решение в закладках, чтобы я мог вернуться к ней позже, но, похоже, я удалил ее...

Вся помощь приветствуется!

Answer 1

Один из подходов состоит в том, чтобы устранить необходимость во встроенных привязках событий и сделать их динамическими с вашими сценариями. Такие как...

      <label for="giorgio-armani" class="d-flex">
    <input type="checkbox"
           id="giorgio-armani"
           class="goto mr-2 mt-1"
           data-target="/shop/brands/giorgio-armani"
    >
    Giorgio Armani
</label>

      document.body.addEventListener('change', e => {
  if (e.target && e.target.classList.contains('goto')) {
    window.location.href = e.target.dataset.target;
  }
});

Итак, давайте посмотрим на это.

1. Вход теперь имеет класс, означающий, что это элемент, который мы обобщили, чтобы вести себя так, как мы хотим. В этом случае нужно изменить страницу, на которой мы находимся.
2. На входе также есть data-targetатрибут на нем. Мы используем это как атрибут модели данных для хранения данных, связанных со «ссылкой», которая нам нужна для выполнения нашей логики изменения страницы.
3. В сценарии мы создаем обработчик событий в теле, который прослушивает любое событие изменения для любого его дочернего элемента, сейчас или в будущем.
4. Когда происходит событие изменения, мы проверяем элемент, из которого возникло событие, чтобы увидеть, имеет ли он gotoкласс на нем. Если это так, мы делаем свою работу.