问题

I am trying to load images from in my react component but I am getting this error Refused to load the image 'blob:https://canister_id.icp0.io/76684b08-27e4-4c3f-b260-16847c3b7df6' because it violates the following Content Security Policy directive: "img-src 'self' data:"..

我试图在我的React组件中加载图像，但是我遇到了这个错误Refused to load the image 'blob:https://canister_id.icp0.io/76684b08-27e4-4c3f-b260-16847c3b7df6' because it violates the following Content Security Policy directive: "img-src 'self' data:".。

I tried fixing the problem by updating the metadata to this:

我尝试通过将元数据更新为以下内容来解决问题：

   <meta
      http-equiv="Content-Security-Policy"
      content="default-src *;
   img-src * 'self' data: https: blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
   style-src  'self' 'unsafe-inline' *"
    />

But the error still remained as above.

但是错误仍然如上所示。

I should also add that the react frontend is in a motoko smart contract, I am converting the images from bytes data to the blobs in my component like so:

我还应该补充一下，React前端位于Motoko智能合约中，我正在将图像从字节数据转换为组件中的blob，就像这样：

   const getAllProducts = async (): Promise<Product[]> => {
    setLoading(true);
    try {
      const products = await marketplace_backend.getProducts();

      const convertImage = (image: Uint8Array | number[]): string => {
        const imageContent = new Uint8Array(image);
        const blob = new Blob([imageContent.buffer], { type: "image/png" });
        return URL.createObjectURL(blob);
      };

      const productsWithUrl = products.map((product) => ({
        ...product,
        image: convertImage(product.image),
        smallImages: {
          image1: convertImage(product.smallImages.image1),
          image2: convertImage(product.smallImages.image2),
          image3: convertImage(product.smallImages.image3),
        },
      }));
      setProducts(productsWithUrl);
      console.log(productsWithUrl, "converted images");
      setLoading(false);
      return productsWithUrl;
    } catch (e) {
      setLoading(false);
      console.log(e, "Error");
    }
  };

Maybe there is something I should also do in the function here where the images are being converted to solve the problem?

也许在这里将图像转换的函数中还有一些我应该做的事情来解决问题？

   <meta
      http-equiv="Content-Security-Policy"
      content="default-src *;
   img-src * 'self' data: https: blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
   style-src  'self' 'unsafe-inline' *"
    />

   const getAllProducts = async (): Promise<Product[]> => {
    setLoading(true);
    try {
      const products = await marketplace_backend.getProducts();

      const convertImage = (image: Uint8Array | number[]): string => {
        const imageContent = new Uint8Array(image);
        const blob = new Blob([imageContent.buffer], { type: "image/png" });
        return URL.createObjectURL(blob);
      };

      const productsWithUrl = products.map((product) => ({
        ...product,
        image: convertImage(product.image),
        smallImages: {
          image1: convertImage(product.smallImages.image1),
          image2: convertImage(product.smallImages.image2),
          image3: convertImage(product.smallImages.image3),
        },
      }));
      setProducts(productsWithUrl);
      console.log(productsWithUrl, "converted images");
      setLoading(false);
      return productsWithUrl;
    } catch (e) {
      setLoading(false);
      console.log(e, "Error");
    }
  };

答案1

得分: 1

有可能还有另一个CSP作为响应头提供。在meta标签中添加另一个只会使其更加严格。您需要确定现有CSP是如何设置并更新那一个。