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>

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) => (

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}