将 WebP 回退与 CSP 结合使用

Question

我正在使用以下方法将 WebP 图像与 JPG 后备一起使用：

<img 
    src="{{ $img_webp_desktop.RelPermalink }}" 
    onerror="this.onerror=null;this.src='{{ $img_jpg_desktop.RelPermalink }}';" 
    loading="lazy"
    height="{{ $img_jpg_desktop.Height }}" 
    width="{{ $img_jpg_desktop.Width }}">

但是，在我的 CSP 设置为 script-src 'self' 的情况下，onerror 内联脚本不会执行，回退也不起作用。

有什么方法可以使它与 CSP 一起工作吗？最坏的情况，我可以启用 unsafe-hashes.

提前致谢:)

Answer 1

您可以像这样使用 data-... 属性：

<img 
    src="{{ $img_webp_desktop.RelPermalink }}" 
    data-src="{{ $img_jpg_desktop.RelPermalink }}" 
    loading="lazy"
    height="{{ $img_jpg_desktop.Height }}" 
    width="{{ $img_jpg_desktop.Width }}">

然后向所有具有数据源属性的图像普遍添加 onerror 事件侦听器：

imgList = document.querySelectorAll("img[data-src]");
imgList.forEach( function(img) {
  img.addEventListener( 'error', function(e) {
    e.target.removeEventListener(e.type, arguments.callee);
    e.target.src = e.target.getAttribute("data-src");
    });
  });

Worst case scenario, I can enable 'unsafe-hashes'.

是的，这真的很糟糕。 Safari 不支持 'unsafe-hashes'。很难管理很多 'hash-values'，所有 onerror 都会有一个独特的。更改图像名称后，您需要重新计算并替换哈希值。

将 WebP 回退与 CSP 结合使用

Using WebP fallback with CSP

html

content-security-policy

hugo