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

Question

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

这将是我的代码示例。因为它是用于站点菜单，所以实际上可以有数百个相同的复选框在一行中指向不同的目的地。

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

感谢所有帮助！

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