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/app/(admin)/admin/kyc/page.tsx
+++ b/apps/web/app/(admin)/admin/kyc/page.tsx
@@ -1,6 +1,7 @@
 'use client';

 import { useEffect, useState, useCallback } from 'react';
+import Image from 'next/image';
 import {
  CheckCircle,
  XCircle,
@@ -97,11 +98,13 @@ function KycDetailView({ item, onApprove, onReject }: {
            {kycData.frontImageUrl && (
              <div className="space-y-1">
                <div className="text-xs text-muted-foreground">Mặt trước</div>
-                <div className="aspect-video overflow-hidden rounded-md border bg-muted">
-                  <img
+                <div className="relative aspect-video overflow-hidden rounded-md border bg-muted">
+                  <Image
                    src={kycData.frontImageUrl}
                    alt="Mặt trước giấy tờ"
-                    className="h-full w-full object-contain"
+                    fill
+                    sizes="(max-width: 768px) 100vw, 400px"
+                    className="object-contain"
                  />
                </div>
              </div>
@@ -109,11 +112,13 @@ function KycDetailView({ item, onApprove, onReject }: {
            {kycData.backImageUrl && (
              <div className="space-y-1">
                <div className="text-xs text-muted-foreground">Mặt sau</div>
-                <div className="aspect-video overflow-hidden rounded-md border bg-muted">
-                  <img
+                <div className="relative aspect-video overflow-hidden rounded-md border bg-muted">
+                  <Image
                    src={kycData.backImageUrl}
                    alt="Mặt sau giấy tờ"
-                    className="h-full w-full object-contain"
+                    fill
+                    sizes="(max-width: 768px) 100vw, 400px"
+                    className="object-contain"
                  />
                </div>
              </div>
@@ -121,11 +126,13 @@ function KycDetailView({ item, onApprove, onReject }: {
            {kycData.selfieUrl && (
              <div className="space-y-1">
                <div className="text-xs text-muted-foreground">Ảnh selfie</div>
-                <div className="aspect-video overflow-hidden rounded-md border bg-muted">
-                  <img
+                <div className="relative aspect-video overflow-hidden rounded-md border bg-muted">
+                  <Image
                    src={kycData.selfieUrl}
                    alt="Selfie"
-                    className="h-full w-full object-contain"
+                    fill
+                    sizes="(max-width: 768px) 100vw, 400px"
+                    className="object-contain"
                  />
                </div>
              </div>
--- a/apps/web/app/(auth)/login/page.tsx
+++ b/apps/web/app/(auth)/login/page.tsx
@@ -22,12 +22,16 @@ export default function LoginPage() {
  const [showPassword, setShowPassword] = useState(false);

  const oauthError = searchParams.get('error');
-  const oauthErrorMessage =
-    oauthError === 'oauth_failed'
-      ? 'Đăng nhập bằng mạng xã hội thất bại. Vui lòng thử lại.'
-      : oauthError
-        ? decodeURIComponent(oauthError)
-        : null;
+  const OAUTH_ERROR_MESSAGES: Record<string, string> = {
+    oauth_failed: 'Đăng nhập bằng mạng xã hội thất bại. Vui lòng thử lại.',
+    access_denied: 'Bạn đã từ chối quyền truy cập. Vui lòng thử lại.',
+    invalid_request: 'Yêu cầu đăng nhập không hợp lệ. Vui lòng thử lại.',
+    server_error: 'Lỗi máy chủ. Vui lòng thử lại sau.',
+    temporarily_unavailable: 'Dịch vụ tạm thời không khả dụng. Vui lòng thử lại sau.',
+  };
+  const oauthErrorMessage = oauthError
+    ? OAUTH_ERROR_MESSAGES[oauthError] ?? 'Đã xảy ra lỗi khi đăng nhập. Vui lòng thử lại.'
+    : null;

  const {
    register,
--- a/apps/web/app/(dashboard)/dashboard/page.tsx
+++ b/apps/web/app/(dashboard)/dashboard/page.tsx
@@ -1,6 +1,7 @@
 'use client';

 import { useEffect, useState } from 'react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -282,12 +283,14 @@ export default function DashboardPage() {
                  href={`/listings/${listing.id}`}
                  className="flex items-center gap-4 rounded-lg border p-3 transition-colors hover:bg-accent"
                >
-                  <div className="h-12 w-16 flex-shrink-0 overflow-hidden rounded bg-muted">
+                  <div className="relative h-12 w-16 flex-shrink-0 overflow-hidden rounded bg-muted">
                    {listing.property.media.length > 0 ? (
-                      <img
-                        src={listing.property.media[0]?.url}
-                        alt=""
-                        className="h-full w-full object-cover"
+                      <Image
+                        src={listing.property.media[0]?.url ?? ''}
+                        alt={listing.property.title}
+                        fill
+                        sizes="64px"
+                        className="object-cover"
                      />
                    ) : (
                      <div className="flex h-full items-center justify-center text-xs text-muted-foreground">
--- a/apps/web/app/(dashboard)/listings/page.tsx
+++ b/apps/web/app/(dashboard)/listings/page.tsx
@@ -1,6 +1,7 @@
 'use client';

 import * as React from 'react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -203,14 +204,16 @@ export default function ListingsPage() {
              <Card className="h-full overflow-hidden transition-shadow hover:shadow-md">
                <div className="relative aspect-[4/3] bg-muted">
                  {listing.property.media.length > 0 ? (
-                    <img
-                      src={listing.property.media[0]?.url}
+                    <Image
+                      src={listing.property.media[0]?.url ?? ''}
                      alt={listing.property.title}
-                      className="h-full w-full object-cover"
+                      fill
+                      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                      className="object-cover"
                    />
                  ) : (
                    <div className="flex h-full items-center justify-center text-muted-foreground">
-                      Chua co anh
+                      Chưa có ảnh
                    </div>
                  )}
                  <div className="absolute left-2 top-2">
@@ -279,12 +282,14 @@ export default function ListingsPage() {
                          href={`/listings/${listing.id}`}
                          className="group flex items-center gap-3"
                        >
-                          <div className="h-10 w-14 flex-shrink-0 overflow-hidden rounded bg-muted">
+                          <div className="relative h-10 w-14 flex-shrink-0 overflow-hidden rounded bg-muted">
                            {listing.property.media.length > 0 ? (
-                              <img
-                                src={listing.property.media[0]?.url}
-                                alt=""
-                                className="h-full w-full object-cover"
+                              <Image
+                                src={listing.property.media[0]?.url ?? ''}
+                                alt={listing.property.title}
+                                fill
+                                sizes="56px"
+                                className="object-cover"
                              />
                            ) : (
                              <div className="flex h-full items-center justify-center text-xs text-muted-foreground">
--- a/apps/web/app/(public)/page.tsx
+++ b/apps/web/app/(public)/page.tsx
@@ -37,15 +37,22 @@ export default function LandingPage() {
  const [propertyType, setPropertyType] = React.useState('');
  const [featuredListings, setFeaturedListings] = React.useState<ListingDetail[]>([]);
  const [loadingFeatured, setLoadingFeatured] = React.useState(true);
+  const [featuredError, setFeaturedError] = React.useState(false);

-  React.useEffect(() => {
+  const fetchFeatured = React.useCallback(() => {
+    setLoadingFeatured(true);
+    setFeaturedError(false);
    listingsApi
      .search({ status: 'ACTIVE', limit: 6 })
      .then((res) => setFeaturedListings(res.data))
-      .catch(() => {})
+      .catch(() => setFeaturedError(true))
      .finally(() => setLoadingFeatured(false));
  }, []);

+  React.useEffect(() => {
+    fetchFeatured();
+  }, [fetchFeatured]);
+
  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const params = new URLSearchParams();
@@ -147,6 +154,13 @@ export default function LandingPage() {
            <div className="mt-8 flex min-h-[300px] items-center justify-center">
              <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
            </div>
+          ) : featuredError ? (
+            <div className="mt-8 flex min-h-[200px] flex-col items-center justify-center gap-3 text-muted-foreground">
+              <p>Không thể tải tin đăng. Vui lòng thử lại.</p>
+              <Button variant="outline" size="sm" onClick={fetchFeatured}>
+                Thử lại
+              </Button>
+            </div>
          ) : featuredListings.length > 0 ? (
            <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {featuredListings.map((listing) => (
--- a/apps/web/app/(public)/search/page.tsx
+++ b/apps/web/app/(public)/search/page.tsx
@@ -42,6 +42,7 @@ function SearchContent() {
  const [page, setPage] = React.useState(Number(searchParams.get('page')) || 1);
  const [result, setResult] = React.useState<PaginatedResult<ListingDetail> | null>(null);
  const [loading, setLoading] = React.useState(true);
+  const [searchError, setSearchError] = React.useState(false);
  const [viewMode, setViewMode] = React.useState<ViewMode>('list');
  const [showMobileFilters, setShowMobileFilters] = React.useState(false);
  const [selectedListingId, setSelectedListingId] = React.useState<string | undefined>();
@@ -67,10 +68,14 @@ function SearchContent() {
    if (filters.maxArea) params['maxArea'] = Number(filters.maxArea);
    if (filters.bedrooms) params['bedrooms'] = Number(filters.bedrooms);

+    setSearchError(false);
    listingsApi
      .search(params)
      .then(setResult)
-      .catch(() => setResult(null))
+      .catch(() => {
+        setResult(null);
+        setSearchError(true);
+      })
      .finally(() => setLoading(false));
  }, [filters, page]);

@@ -214,6 +219,8 @@ function SearchContent() {
            <SearchResults
              result={result}
              loading={loading}
+              error={searchError}
+              onRetry={fetchListings}
              page={page}
              sort={filters.sort}
              onPageChange={setPage}
@@ -236,6 +243,8 @@ function SearchContent() {
                <SearchResults
                  result={result}
                  loading={loading}
+                  error={searchError}
+                  onRetry={fetchListings}
                  page={page}
                  sort={filters.sort}
                  onPageChange={setPage}
--- a/apps/web/app/error.tsx
+++ b/apps/web/app/error.tsx
@@ -10,7 +10,13 @@ export default function GlobalError({
  reset: () => void;
 }) {
  useEffect(() => {
-    console.error('Unhandled error:', error);
+    // Report to error tracking service in production; log digest only
+    if (process.env.NODE_ENV === 'production') {
+      // TODO: integrate with Sentry/Datadog when available
+      // errorReporter.captureException(error);
+    } else {
+      console.error('Unhandled error:', error);
+    }
  }, [error]);

  return (