多个内联脚本的 CSP 解决方案

问题描述

所以... CSP 已在我的网站上成功实施。但是 - 我的网站使用许多内联脚本根据访问者的 HTML 复选框选择重定向访问者。在开发过程中，unsafe-inline 已经足够了，但我现在已准备好上线，这是阻止我这样做的一大障碍。

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

这将是我的代码示例。就像站点菜单一样，在一行中可以有数百个相同的复选框到不同的目的地。

我确实有一个解决方案链接书签，以便我稍后返回此链接，但我似乎已将其删除...

感谢所有帮助！

解决方法

一种方法是消除对内联事件绑定的需求，并使用您的脚本动态创建它们。比如...

<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. 输入现在有一个 goto 类，表示这是一个我们已经概括为以我们想要的方式运行的元素。在这种情况下，它需要更改我们所在的页面。
2. 输入也有一个 data-target 属性。我们将其用作数据模型属性来保存与执行页面更改逻辑所需的“链接”相关的数据。
3. 在脚本中，我们在主体上创建了一个事件处理程序，用于侦听它现在或将来拥有的任何子项的任何更改事件。
4. 当发生更改事件时，我们会测试该事件源自的元素，以查看其上是否具有 goto 类。如果是，我们就做我们的工作。