fix(web): frontend quality — XSS, error states, a11y, image optimization, security headers

- Whitelist OAuth error codes; never render raw URL params (XSS fix) - Add error state UI with retry button for API failures on homepage and search - Use <article> for property cards with ARIA labels and semantic list markup - Replace raw <img> with Next.js <Image> across all listing/gallery/KYC pages - Add security headers (X-Content-Type-Options, X-Frame-Options, etc.) in next.config.js - Gate console.error behind NODE_ENV check in global error boundary - Mapbox confirmed npm-bundled (SRI N/A) Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-08 06:32:08 +07:00
parent e9889539ea
commit afa70320f5
11 changed files with 215 additions and 104 deletions
--- a/apps/web/components/listings/image-gallery.tsx
+++ b/apps/web/components/listings/image-gallery.tsx
@@ -1,6 +1,7 @@
 'use client';

 import * as React from 'react';
+import Image from 'next/image';
 import { cn } from '@/lib/utils';
 import type { PropertyMedia } from '@/lib/listings-api';

@@ -30,10 +31,13 @@ export function ImageGallery({ media, className }: ImageGalleryProps) {
    <div className={cn('space-y-3', className)}>
      {/* Main image */}
      <div className="relative aspect-video overflow-hidden rounded-lg bg-muted">
-        <img
-          src={images[selectedIndex]?.url}
+        <Image
+          src={images[selectedIndex]?.url ?? ''}
          alt={images[selectedIndex]?.caption || `Ảnh ${selectedIndex + 1}`}
-          className="h-full w-full object-cover"
+          fill
+          sizes="(max-width: 768px) 100vw, 60vw"
+          className="object-cover"
+          priority={selectedIndex === 0}
        />
        {images.length > 1 && (
          <>
@@ -66,14 +70,16 @@ export function ImageGallery({ media, className }: ImageGalleryProps) {
              key={img.id}
              onClick={() => setSelectedIndex(index)}
              className={cn(
-                'h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border-2 transition-colors',
+                'relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border-2 transition-colors',
                index === selectedIndex ? 'border-primary' : 'border-transparent opacity-70 hover:opacity-100',
              )}
            >
-              <img
+              <Image
                src={img.url}
                alt={img.caption || `Thumbnail ${index + 1}`}
-                className="h-full w-full object-cover"
+                fill
+                sizes="64px"
+                className="object-cover"
              />
            </button>
          ))}
--- a/apps/web/components/search/property-card.tsx
+++ b/apps/web/components/search/property-card.tsx
@@ -1,5 +1,6 @@
 'use client';

+import Image from 'next/image';
 import Link from 'next/link';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -27,75 +28,91 @@ interface PropertyCardProps {
 }

 export function PropertyCard({ listing, compact }: PropertyCardProps) {
+  const transactionLabel = listing.transactionType === 'SALE' ? 'Bán' : 'Cho thuê';
+  const propertyTypeLabel = PROPERTY_TYPE_LABELS[listing.property.propertyType] || listing.property.propertyType;
+
  return (
-    <Link href={`/listings/${listing.id}`}>
-      <Card className="group h-full overflow-hidden transition-shadow hover:shadow-md">
-        <div className={`relative bg-muted ${compact ? 'aspect-[16/10]' : 'aspect-[4/3]'}`}>
-          {listing.property.media.length > 0 ? (
-            <img
-              src={listing.property.media[0]?.url}
-              alt={listing.property.title}
-              className="h-full w-full object-cover transition-transform group-hover:scale-105"
-              loading="lazy"
-            />
-          ) : (
-            <div className="flex h-full items-center justify-center text-muted-foreground">
-              Chưa có ảnh
-            </div>
-          )}
-          <div className="absolute left-2 top-2 flex gap-1">
-            <Badge variant="default" className="text-xs">
-              {listing.transactionType === 'SALE' ? 'Bán' : 'Cho thuê'}
-            </Badge>
-            <Badge variant="secondary" className="text-xs">
-              {PROPERTY_TYPE_LABELS[listing.property.propertyType] || listing.property.propertyType}
-            </Badge>
-          </div>
-          {listing.property.media.length > 1 && (
-            <div className="absolute bottom-2 right-2">
-              <Badge variant="outline" className="bg-black/50 text-xs text-white border-none">
-                {listing.property.media.length} ảnh
+    <article
+      aria-label={`${listing.property.title} — ${transactionLabel} ${propertyTypeLabel}, ${formatPrice(listing.priceVND)} VNĐ`}
+    >
+      <Link href={`/listings/${listing.id}`}>
+        <Card className="group h-full overflow-hidden transition-shadow hover:shadow-md">
+          <div className={`relative bg-muted ${compact ? 'aspect-[16/10]' : 'aspect-[4/3]'}`}>
+            {listing.property.media.length > 0 ? (
+              <Image
+                src={listing.property.media[0]?.url ?? ''}
+                alt={`Ảnh bất động sản: ${listing.property.title}`}
+                fill
+                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                className="object-cover transition-transform group-hover:scale-105"
+              />
+            ) : (
+              <div className="flex h-full items-center justify-center text-muted-foreground" aria-hidden="true">
+                Chưa có ảnh
+              </div>
+            )}
+            <div className="absolute left-2 top-2 flex gap-1">
+              <Badge variant="default" className="text-xs">
+                {transactionLabel}
+              </Badge>
+              <Badge variant="secondary" className="text-xs">
+                {propertyTypeLabel}
              </Badge>
            </div>
-          )}
-        </div>
-        <CardContent className="p-4">
-          <p className="text-lg font-bold text-primary">
-            {formatPrice(listing.priceVND)} VNĐ
-            {listing.transactionType === 'RENT' && listing.rentPriceMonthly && (
-              <span className="text-sm font-normal text-muted-foreground">/tháng</span>
-            )}
-          </p>
-          <h3 className="mt-1 line-clamp-1 font-medium">{listing.property.title}</h3>
-          <p className="mt-1 line-clamp-1 text-sm text-muted-foreground">
-            {listing.property.address}, {listing.property.district}, {listing.property.city}
-          </p>
-          <div className="mt-3 flex flex-wrap gap-1.5">
-            <Badge variant="secondary" className="text-xs">
-              {listing.property.areaM2} m²
-            </Badge>
-            {listing.property.bedrooms != null && (
-              <Badge variant="secondary" className="text-xs">
-                {listing.property.bedrooms} PN
-              </Badge>
-            )}
-            {listing.property.bathrooms != null && listing.property.bathrooms > 0 && (
-              <Badge variant="secondary" className="text-xs">
-                {listing.property.bathrooms} PT
-              </Badge>
-            )}
-            {listing.property.direction && (
-              <Badge variant="outline" className="text-xs">
-                Hướng {listing.property.direction === 'NORTH' ? 'Bắc' :
-                  listing.property.direction === 'SOUTH' ? 'Nam' :
-                  listing.property.direction === 'EAST' ? 'Đông' :
-                  listing.property.direction === 'WEST' ? 'Tây' :
-                  listing.property.direction}
-              </Badge>
+            {listing.property.media.length > 1 && (
+              <div className="absolute bottom-2 right-2">
+                <Badge variant="outline" className="bg-black/50 text-xs text-white border-none" aria-label={`${listing.property.media.length} ảnh`}>
+                  {listing.property.media.length} ảnh
+                </Badge>
+              </div>
            )}
          </div>
-        </CardContent>
-      </Card>
-    </Link>
+          <CardContent className="p-4">
+            <p className="text-lg font-bold text-primary">
+              {formatPrice(listing.priceVND)} VNĐ
+              {listing.transactionType === 'RENT' && listing.rentPriceMonthly && (
+                <span className="text-sm font-normal text-muted-foreground">/tháng</span>
+              )}
+            </p>
+            <h3 className="mt-1 line-clamp-1 font-medium">{listing.property.title}</h3>
+            <p className="mt-1 line-clamp-1 text-sm text-muted-foreground">
+              {listing.property.address}, {listing.property.district}, {listing.property.city}
+            </p>
+            <ul className="mt-3 flex flex-wrap gap-1.5" aria-label="Thông tin bất động sản">
+              <li>
+                <Badge variant="secondary" className="text-xs">
+                  {listing.property.areaM2} m²
+                </Badge>
+              </li>
+              {listing.property.bedrooms != null && (
+                <li>
+                  <Badge variant="secondary" className="text-xs">
+                    {listing.property.bedrooms} PN
+                  </Badge>
+                </li>
+              )}
+              {listing.property.bathrooms != null && listing.property.bathrooms > 0 && (
+                <li>
+                  <Badge variant="secondary" className="text-xs">
+                    {listing.property.bathrooms} PT
+                  </Badge>
+                </li>
+              )}
+              {listing.property.direction && (
+                <li>
+                  <Badge variant="outline" className="text-xs">
+                    Hướng {listing.property.direction === 'NORTH' ? 'Bắc' :
+                      listing.property.direction === 'SOUTH' ? 'Nam' :
+                      listing.property.direction === 'EAST' ? 'Đông' :
+                      listing.property.direction === 'WEST' ? 'Tây' :
+                      listing.property.direction}
+                  </Badge>
+                </li>
+              )}
+            </ul>
+          </CardContent>
+        </Card>
+      </Link>
+    </article>
  );
 }
--- a/apps/web/components/search/search-results.tsx
+++ b/apps/web/components/search/search-results.tsx
@@ -9,6 +9,8 @@ import type { ListingDetail, PaginatedResult } from '@/lib/listings-api';
 interface SearchResultsProps {
  result: PaginatedResult<ListingDetail> | null;
  loading: boolean;
+  error?: boolean;
+  onRetry?: () => void;
  page: number;
  sort: string;
  onPageChange: (page: number) => void;
@@ -18,6 +20,8 @@ interface SearchResultsProps {
 export function SearchResults({
  result,
  loading,
+  error,
+  onRetry,
  page,
  sort,
  onPageChange,
@@ -31,6 +35,20 @@ export function SearchResults({
    );
  }

+  if (error) {
+    return (
+      <div className="flex min-h-[400px] flex-col items-center justify-center gap-3 text-muted-foreground">
+        <p className="text-lg font-medium">Không thể tải kết quả tìm kiếm</p>
+        <p className="text-sm">Đã xảy ra lỗi. Vui lòng thử lại.</p>
+        {onRetry && (
+          <Button variant="outline" size="sm" onClick={onRetry}>
+            Thử lại
+          </Button>
+        )}
+      </div>
+    );
+  }
+
  if (!result || result.data.length === 0) {
    return (
      <div className="flex min-h-[400px] flex-col items-center justify-center text-muted-foreground">