fix(codebase audit): preserve cleanup without regressions

Fix codebase audit regressions while preserving UI/UX behavior and adding review-driven hardening.

src/components/comment-media/__tests__/comment-media.test.tsx

@@ -32,6 +32,14 @@ vi.mock('../../../lib/utils/media-utils', () => ({
 
 vi.mock('../../../lib/utils/url-utils', () => ({
   getHostname: () => testState.hostname,
+  parseHttpUrl: (value: string) => {
+    try {
+      const parsedUrl = new URL(value);
+      return parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:' ? parsedUrl : null;
+    } catch {
+      return null;
+    }
+  },
 }));
 
 vi.mock('../../../stores/use-expanded-media-store', () => {

src/components/comment-media/comment-media.module.css

@@ -141,14 +141,14 @@
 .mediaMobile video,
 .mediaMobile iframe,
 .mediaMobile audio {
-  padding: 3px 0 5px 0;
+  padding: 0;
 }
 
 .mediaDesktopReply img,
 .mediaDesktopReply video,
 .mediaDesktopReply iframe,
 .mediaDesktopReply audio {
-  padding: 3px 20px 5px 20px;
+  padding: 0;
 }
 
 .mediaDesktopOp {
@@ -160,7 +160,7 @@
 .mediaDesktopOp video,
 .mediaDesktopOp iframe,
 .mediaDesktopOp audio {
-  padding: 3px 20px 5px 20px;
+  padding: 0;
   max-width: 100%;
   box-sizing: border-box;
 }

src/components/comment-media/comment-media.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail, getMediaDimensions } from '../../lib/utils/media-utils';
-import { getHostname } from '../../lib/utils/url-utils';
+import { getHostname, parseHttpUrl } from '../../lib/utils/url-utils';
 import useExpandedMediaStore from '../../stores/use-expanded-media-store';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import useIsMobile from '../../hooks/use-is-mobile';
@@ -47,6 +47,7 @@ const Thumbnail = ({
   const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
 
   let thumbnailComponent: React.ReactNode = null;
+  const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
   const iframeThumbnail = patternThumbnailUrl || thumbnail;
   const { frameUrl: gifFrameUrl, status: gifFrameStatus } = gifFrameState;
   const hasThumbnail = getHasThumbnail(commentMediaInfo, url);
@@ -139,9 +140,8 @@ const Thumbnail = ({
   }
 
   const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
-  const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
 
-  const linkWithoutThumbnail = url && new URL(url);
+  const linkWithoutThumbnail = url ? parseHttpUrl(url) : null;
   const fallbackLinkLabel = url ? getHostname(url) || (url.length > 30 ? `${url.slice(0, 30)}...` : url) : '';
   const noThumbnailLink =
     !hasThumbnail && linkWithoutThumbnail ? (
@@ -160,7 +160,7 @@ const Thumbnail = ({
           {fallbackLinkLabel}
         </span>
       ) : (
-        <a href={url} target='_blank' rel='noreferrer'>
+        <a href={url} target='_blank' rel='noopener noreferrer'>
           {fallbackLinkLabel}
         </a>
       )