0

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

这将是我的代码的一个示例。对于站点菜单，实际上可以有数百个相同的复选框连续排列到不同的目的地。

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

所有帮助表示赞赏！

4

1 回答 1

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. 在脚本中，我们在 body 上创建一个事件处理程序，用于侦听它现在或将来拥有的任何孩子的任何更改事件。
  4. 当更改事件发生时，我们测试事件起源的元素以查看它是否具有goto类。如果是这样，我们会做我们的工作。
于 2020-12-30T22:33:58.870 回答