在 Shopify Hydrogen 中，图像组件触发 CSP

Question

错误

“拒绝应用内联样式，因为它违反了以下内容安全策略指令...”

背景

我知道此安全功能的要求，但我的特殊问题与 Hydrogen 的图像组件有关。

使用 Shopify Hydrogen（主要是演示商店），有一个产品卡组件。 在里面你会发现以下代码...

return (
    <div className="flex flex-col gap-2">
      <Link
        onClick={onClick}
        to={`/products/${product.handle}`}
        prefetch="intent"
      >
        <div className={clsx("grid gap-4", className)}>
          <div className="card-image aspect-[4/5] bg-primary/5">
            {image && (
              <Image
                className="fadeIn w-full object-cover"
                sizes="(min-width: 64em) 25vw, (min-width: 48em) 30vw, 45vw"
                aspectRatio="4/5"
                data={image}
                alt={image.altText || `Picture of ${product.title}`}
                loading={loading}
              />
            )}

问题

如果我删除图像组件并替换为 <>，安全错误就会消失。 所以我知道这与图像组件有关。但我无法更改 Shopify 的组件。

注意：我已经检查了安全策略允许的域 - 所以这似乎是内联样式问题。

不幸的是，开发工具不会告诉您 CSP 问题实际上在哪里。

问题

如何满足安全要求并安全地使用 Shopify Hydrogen 中的 Image 组件？

谢谢。

Answer 1

很可能是“尺寸”属性作为图像上的样式属性输出。这算作内联样式。属性不是 nonceable，如果您还添加“不安全哈希”，则只能由哈希允许它们。另一种选择是允许“不安全内联”，有些人可能不同意，但如果您限制 CSP 的其余部分，也没有那么糟糕，请参考 https://scotthelme.co.uk/can-you-get-pwned -with-css/.