admin/goodgo-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
Ho Ngoc Hai
2026-04-08 06:32:08 +07:00
parent e9889539ea
commit afa70320f5
11 changed files with 215 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/web/app/(admin)/admin/kyc/page.tsx
View File

@@ -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>