[CHIA-4324] NFT media pipeline 3/3: preview verification & hardening (#3010)

Author: jlobue10

packages/gui/src/components/nfts/NFTHashStatus.tsx

@@ -31,6 +31,7 @@ export default function NFTHashStatus(props: NFTHashStatusProps) {
   const isLoading = isLoadingNFTVerifyHash || isLoadingNFT;
   const isVerified = preview ? nftPreview?.isVerified : data?.isVerified;
   const error = (errorNFT ?? preview) ? nftPreview?.error : data?.error;
+  const failedFetch = preview ? nftPreview?.failedFetch : data?.failedFetch;
 
   const isValidURI = useMemo(() => {
     if (!nftPreview || !('originalUri' in nftPreview)) {
@@ -77,8 +78,12 @@ export default function NFTHashStatus(props: NFTHashStatusProps) {
       return <Trans>URL is not valid</Trans>;
     }
 
+    if (failedFetch) {
+      return <Trans>File is not available</Trans>;
+    }
+
     return <Trans>Invalid hash</Trans>;
-  }, [isLoading, isVerified, nft, isValidURI]);
+  }, [isLoading, isVerified, nft, isValidURI, failedFetch]);
 
   const color = useMemo(() => {
     if (isLoading) {

packages/gui/src/components/nfts/NFTPreview.tsx

@@ -23,6 +23,7 @@ import VideoSmallIcon from '../../assets/img/video-small.svg';
 import VideoPngIcon from '../../assets/img/video.png';
 import VideoPngDarkIcon from '../../assets/img/video_dark.png';
 import FileType from '../../constants/FileType';
+import { isSettledHashMismatch } from '../../hooks/selectNFTPreviewState';
 import useCache from '../../hooks/useCache';
 import useFileType from '../../hooks/useFileType';
 import useHideObjectionableContent from '../../hooks/useHideObjectionableContent';
@@ -141,7 +142,7 @@ export default function NFTPreview(props: NFTPreviewProps) {
   const nftId = useMemo(() => getNFTId(id), [id]);
   const iframeRef = useRef<any>(null);
   const { isDarkMode } = useDarkMode();
-  const [, setError] = useStateAbort<Error | undefined>(undefined);
+  const [prepareError, setPrepareError] = useStateAbort<Error | undefined>(undefined);
   const [previewContent, setPreviewContent] = useStateAbort<ReactNode | undefined>(undefined);
   const abortControllerRef = useRef(new AbortController());
   const [hideObjectionableContent] = useHideObjectionableContent();
@@ -172,15 +173,20 @@ export default function NFTPreview(props: NFTPreviewProps) {
 
   const { isLoading: isLoadingNFT } = useNFT(nftId);
   const { metadata, isLoading: isLoadingMetadata } = useNFTMetadata(nftId);
-  const isLoading = isLoadingVerifyHash || isLoadingMetadata || isLoadingNFT || isLoadingFileType;
+  // hash verification downloads the full data file, which can take a long
+  // time for large media, and the metadata host can be slow or dead — either
+  // one only blocks the tile while there is no verified preview uri to show
+  const isLoading = isLoadingNFT || isLoadingFileType || ((isLoadingVerifyHash || isLoadingMetadata) && !preview);
 
   const blurPreview = useMemo(() => {
     if (!hideObjectionableContent) {
       return false;
     }
 
-    if (isLoading) {
-      return false;
+    // a verified preview can render before the metadata fetch settles — keep
+    // it covered until the sensitive-content flag can actually be read
+    if (isLoadingMetadata) {
+      return true;
     }
 
     if (!metadata) {
@@ -192,16 +198,22 @@ export default function NFTPreview(props: NFTPreviewProps) {
     }
 
     return false;
-  }, [hideObjectionableContent, isLoading, metadata]);
+  }, [hideObjectionableContent, isLoadingMetadata, metadata]);
 
   const previewExtension = useMemo(() => getFileExtension(preview?.uri), [preview]);
 
+  // The cached bytes of a settled mismatch must never reach the iframe, even
+  // though the state still carries the uri so the hash badge can report it.
+  const isHashMismatch = isSettledHashMismatch(preview);
+
+  const previewUri = isHashMismatch ? undefined : preview?.uri;
+
   const preparePreview = useCallback(
     async (signal: AbortSignal) => {
       try {
-        setError(undefined, signal);
+        setPrepareError(undefined, signal);
 
-        if (!preview?.uri) {
+        if (!previewUri) {
           setPreviewContent(undefined, signal);
           return;
         }
@@ -232,9 +244,10 @@ export default function NFTPreview(props: NFTPreviewProps) {
           }
         `;
 
-        const cachedURI = await getURI(preview.uri, { maxSize: ignoreSizeLimit ? -1 : undefined });
+        const cachedURI = await getURI(previewUri, { maxSize: ignoreSizeLimit ? -1 : undefined });
         if (!cachedURI || !cachedURI.startsWith('cache://')) {
           setPreviewContent(undefined, signal);
+          setPrepareError(new Error(t`File is not available`), signal);
           return;
         }
 
@@ -276,10 +289,21 @@ export default function NFTPreview(props: NFTPreviewProps) {
           signal,
         );
       } catch (e) {
-        setError(e as Error, signal);
+        setPreviewContent(undefined, signal);
+        setPrepareError(e as Error, signal);
       }
     },
-    [preview, fit, getURI, ignoreSizeLimit, previewFileType, loopVideo, isDarkMode, setPreviewContent, setError],
+    [
+      previewUri,
+      fit,
+      getURI,
+      ignoreSizeLimit,
+      previewFileType,
+      loopVideo,
+      isDarkMode,
+      setPreviewContent,
+      setPrepareError,
+    ],
   );
 
   useEffect(() => {
@@ -482,6 +506,13 @@ export default function NFTPreview(props: NFTPreviewProps) {
 
   const hasFile = !!preview;
 
+  // icon, model, document and compact non-image previews do not render the
+  // iframe, so they never wait for the preview file to download
+  const usesIframe =
+    !(isCompact && previewFileType !== FileType.IMAGE) &&
+    !icon &&
+    ![FileType.MODEL, FileType.DOCUMENT].includes(previewFileType);
+
   return (
     <StyledCardPreview width={width} height={height} sx={{ aspectRatio: ratio.toString() }}>
       {isLoading ? (
@@ -494,6 +525,22 @@ export default function NFTPreview(props: NFTPreviewProps) {
             <Trans>No file available</Trans>
           </IconMessage>
         </Background>
+      ) : isHashMismatch ? (
+        <Background>
+          <IconMessage icon={<NotInterested fontSize="large" />}>
+            <Trans>File does not match the expected hash</Trans>
+          </IconMessage>
+        </Background>
+      ) : usesIframe && prepareError ? (
+        <Background>
+          <IconMessage icon={<NotInterested fontSize="large" />}>
+            <Trans>Preview is not available</Trans>
+          </IconMessage>
+        </Background>
+      ) : usesIframe && !previewContent ? (
+        <Flex position="absolute" left="0" top="0" bottom="0" right="0" justifyContent="center" alignItems="center">
+          <Loading center>{!isCompact && t`Loading preview...`}</Loading>
+        </Flex>
       ) : (
         previewIframe
       )}

packages/gui/src/components/settings/SettingsNFT.tsx

@@ -14,6 +14,7 @@ import { Trans } from '@lingui/macro';
 import { Grid, Button, Switch, FormControlLabel, Typography } from '@mui/material';
 import React from 'react';
 
+import useAllowUnverifiedNFTPreviews from '../../hooks/useAllowUnverifiedNFTPreviews';
 import useCache from '../../hooks/useCache';
 import useHideObjectionableContent from '../../hooks/useHideObjectionableContent';
 import useNFTImageFittingMode from '../../hooks/useNFTImageFittingMode';
@@ -40,6 +41,7 @@ export default function SettingsGeneral() {
   const { cacheSize, clearCache, cacheDirectory, setCacheDirectory } = useCache();
   const [nftImageFittingMode, setNFTImageFittingMode] = useNFTImageFittingMode();
   const [nftVideoLoop, setNFTVideoLoop] = useNFTVideoLoopGlobal();
+  const [allowUnverifiedPreviews, setAllowUnverifiedPreviews] = useAllowUnverifiedNFTPreviews();
   // const [, setCacheFolder] = usePrefs('cacheFolder', '');
   const openDialog = useOpenDialog();
 
@@ -51,6 +53,10 @@ export default function SettingsGeneral() {
     setNFTVideoLoop(event.target.checked);
   }
 
+  function handleChangeAllowUnverifiedPreviews(event: React.ChangeEvent<HTMLInputElement>) {
+    setAllowUnverifiedPreviews(event.target.checked);
+  }
+
   async function clearNFTCache() {
     openDialog(
       <ConfirmDialog
@@ -144,6 +150,28 @@ export default function SettingsGeneral() {
         </Grid>
       </Grid>
 
+      <Grid container>
+        <Grid item style={{ width: '400px' }}>
+          <SettingsTitle>
+            <Trans>Show unverified previews</Trans>
+          </SettingsTitle>
+        </Grid>
+        <Grid item container xs justifyContent="flex-end" marginTop="-6px">
+          <FormControlLabel
+            control={<Switch checked={allowUnverifiedPreviews} onChange={handleChangeAllowUnverifiedPreviews} />}
+          />
+        </Grid>
+        <Grid item style={{ width: '400px' }}>
+          <SettingsText>
+            <Trans>
+              When an NFT image is too large to verify against its on-chain hash, load the transaction confirmation
+              preview directly from its source URL without verification. When disabled, no preview is shown for these
+              NFTs.
+            </Trans>
+          </SettingsText>
+        </Grid>
+      </Grid>
+
       <Grid item style={{ maxWidth: '400px' }}>
         <Flex flexDirection="column" gap={1}>
           <SettingsSection>

packages/gui/src/electron/api/nftGetMetadata.test.ts

@@ -0,0 +1,143 @@
+import crypto from 'node:crypto';
+
+type FetchBuffer = typeof import('../utils/fetchBuffer').default;
+
+const mockFetchBuffer = jest.fn<ReturnType<FetchBuffer>, Parameters<FetchBuffer>>();
+
+jest.mock('../utils/fetchBuffer', () => ({
+  __esModule: true,
+  default: mockFetchBuffer,
+  MaxSizeExceededError:
+    jest.requireActual<typeof import('../utils/fetchBuffer')>('../utils/fetchBuffer').MaxSizeExceededError,
+}));
+
+const mockAllowUnverifiedNftPreviews = jest.fn<boolean, []>();
+
+jest.mock('../utils/allowUnverifiedNftPreviews', () => ({
+  __esModule: true,
+  default: mockAllowUnverifiedNftPreviews,
+}));
+
+const { MaxSizeExceededError } = jest.requireActual<typeof import('../utils/fetchBuffer')>('../utils/fetchBuffer');
+
+const { nftGetImageDataUrl, nftGetMetadata } =
+  jest.requireActual<typeof import('./nftGetMetadata')>('./nftGetMetadata');
+
+function sha256(data: Buffer): string {
+  return crypto.createHash('sha256').update(data.toString('latin1'), 'latin1').digest('hex');
+}
+
+describe('nftGetMetadata', () => {
+  beforeEach(() => {
+    mockFetchBuffer.mockReset();
+  });
+
+  it('parses metadata only after its raw bytes match the expected hash', async () => {
+    const data = Buffer.from('{"name":"Verified NFT","preview_image_uris":["https://example.com/preview.png"]}');
+    mockFetchBuffer.mockResolvedValue({
+      data,
+      headers: {
+        'content-type': 'application/json',
+      },
+    });
+
+    await expect(nftGetMetadata('https://example.com/metadata.json', `0x${sha256(data)}`)).resolves.toEqual({
+      name: 'Verified NFT',
+      preview_image_uris: ['https://example.com/preview.png'],
+    });
+  });
+
+  it('rejects metadata whose bytes do not match the on-chain hash', async () => {
+    const data = Buffer.from('{"name":"Tampered NFT"}');
+    mockFetchBuffer.mockResolvedValue({
+      data,
+      headers: {},
+    });
+
+    await expect(nftGetMetadata('https://example.com/metadata.json', '00')).resolves.toBeUndefined();
+  });
+
+  it('does not fetch metadata without an expected hash', async () => {
+    await expect(nftGetMetadata('https://example.com/metadata.json', undefined)).resolves.toBeUndefined();
+    expect(mockFetchBuffer).not.toHaveBeenCalled();
+  });
+});
+
+describe('nftGetImageDataUrl', () => {
+  beforeEach(() => {
+    mockFetchBuffer.mockReset();
+    mockAllowUnverifiedNftPreviews.mockReset();
+    mockAllowUnverifiedNftPreviews.mockReturnValue(false);
+  });
+
+  it('returns an immutable data URL for a verified image response', async () => {
+    const data = Buffer.from('verified image bytes');
+    mockFetchBuffer.mockResolvedValue({
+      data,
+      headers: {
+        'content-type': 'image/png; charset=binary',
+      },
+    });
+
+    await expect(nftGetImageDataUrl('https://example.com/preview.png', sha256(data))).resolves.toBe(
+      `data:image/png;base64,${data.toString('base64')}`,
+    );
+  });
+
+  it('rejects a hash-matched response that is not an image', async () => {
+    const data = Buffer.from('<html>not an image</html>');
+    mockFetchBuffer.mockResolvedValue({
+      data,
+      headers: {
+        'content-type': 'text/html',
+      },
+    });
+
+    await expect(nftGetImageDataUrl('https://example.com/preview.png', sha256(data))).resolves.toBeUndefined();
+  });
+
+  it('does not fetch an image without an expected hash', async () => {
+    await expect(nftGetImageDataUrl('https://example.com/preview.png', undefined)).resolves.toBeUndefined();
+    expect(mockFetchBuffer).not.toHaveBeenCalled();
+  });
+
+  it('omits the preview for an oversized image response by default', async () => {
+    mockFetchBuffer.mockRejectedValue(
+      new MaxSizeExceededError({
+        'content-type': 'image/gif',
+      }),
+    );
+
+    await expect(nftGetImageDataUrl('https://example.com/large.gif', '00')).resolves.toBeUndefined();
+  });
+
+  it('falls back to the direct URL for an oversized image when unverified previews are enabled', async () => {
+    mockAllowUnverifiedNftPreviews.mockReturnValue(true);
+    mockFetchBuffer.mockRejectedValue(
+      new MaxSizeExceededError({
+        'content-type': 'image/gif',
+      }),
+    );
+
+    await expect(nftGetImageDataUrl('https://example.com/large.gif', '00')).resolves.toBe(
+      'https://example.com/large.gif',
+    );
+  });
+
+  it('rejects an oversized response that is not an image even when unverified previews are enabled', async () => {
+    mockAllowUnverifiedNftPreviews.mockReturnValue(true);
+    mockFetchBuffer.mockRejectedValue(
+      new MaxSizeExceededError({
+        'content-type': 'video/mp4',
+      }),
+    );
+
+    await expect(nftGetImageDataUrl('https://example.com/large.mp4', '00')).resolves.toBeUndefined();
+  });
+
+  it('rejects on any other download failure', async () => {
+    mockFetchBuffer.mockRejectedValue(new Error('Request timeout after 10000ms'));
+
+    await expect(nftGetImageDataUrl('https://example.com/preview.png', '00')).resolves.toBeUndefined();
+  });
+});