قم بمعاينة صورة Base64 بأمان في المتصفح

تحتوي معاينة الصورة الموثوقة على وظيفتين منفصلتين: فك تشفير تمثيل Base64 وفك تشفير تنسيق الصورة الناتج. يمكن أن تمر السلسلة بالخطوة الأولى وتفشل في الثانية لأن الملف مقطوع أو تم تصنيفه بشكل خاطئ أو غير مدعوم من قبل المتصفح. إظهار تلك الحالات بشكل منفصل.

احتفظ بخط أنابيب موجه للبايت

قم بإزالة غلاف البيانات URI الذي تم التعرف عليه من خلال محلل، والتحقق من صحة Base64، والحصول على Uint8Array. لا تقم بتوجيه وحدات بايت الصورة من خلال وحدة فك ترميز النص. إذا كنت تريد معاينة محلية بسيطة، فقم بتغليف البايتات في Blob وقم بإنشاء كائن URL. يؤدي ذلك إلى تجنب تجميع سلسلة Base64 كبيرة أخرى فقط لعرض النتيجة.

// bytes is a validated Uint8Array; type comes from checked raster metadata.
async function previewRaster(bytes, type, imageElement) {
  const allowed = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'];
  if (!allowed.includes(type)) throw new Error('Unsupported raster preview type');
  const url = URL.createObjectURL(new Blob([bytes], { type }));
  try {
    imageElement.src = url;
    await imageElement.decode();
    return { width: imageElement.naturalWidth, height: imageElement.naturalHeight,
      dispose: () => URL.revokeObjectURL(url) };
  } catch (error) {
    URL.revokeObjectURL(url);
    imageElement.removeAttribute('src');
    throw error;
  }
}

احتفظ بالكائن URL فقط طالما لزم الأمر

قم باستدعاء وظيفة التخلص التي تم إرجاعها عند استبدال المعاينة أو إزالتها. المعاينات المتكررة بدون تنظيف تحتفظ بموارد المتصفح. لا تقم بإلغاء URL قبل تحميل الصورة، ولا تعيد استخدام URL الذي تم التخلص منه لتنزيله لاحقًا. إذا كانت التنزيلات بحاجة إلى أن تظل متاحة، فقم بإدارة فترة استمرارها بشكل منفصل.

استخدم تعليقات حقيقية لوحدة فك ترميز الصور

توقيع الملف هو مجرد تلميح أولي. تتحقق خطوة فك تشفير عنصر الصورة مما إذا كان المتصفح يمكنه بالفعل تحميلها والكشف عن أبعادها. يجب أن يشير الخطأ هنا إلى فشل فك تشفير الصورة أثناء الاحتفاظ بالبايتات الأصلية للفحص أو التنزيل. لا ينبغي أن يحل محل الإدخال أو الإبلاغ عن أن الأبجدية Base64 كانت غير صالحة.

قم بتطبيق حدود البايت والأبعاد قبل العرض باهظ الثمن حيثما أمكن ذلك. يمكن لملف مضغوط صغير أن يصف صورة كبيرة جدًا. تجنب التعامل مع SVG كحمولة نقطية عادية: فهي عبارة عن ترميز منظم باعتبارات أمنية مختلفة. لا تقم مطلقًا بإدخال SVG أو HTML غير المعروف مباشرة في الصفحة لإجراء المعاينة.

وأخيرا، التمييز بين المعاينة والتحويل. عرض JPEG في عنصر الصورة لا يؤدي إلى إنشاء PNG. يتطلب التحويل رسم صورة تم فك تشفيرها على لوحة قماشية وتصدير التنسيق المختار، مع اختيارات واضحة للجودة والشفافية. تم وصف غلاف البيانات URI في MDN: عناوين URL للبيانات; يظل نجاح المعاينة بمثابة فحص لتنسيق المتصفح، وليس شهادة أمان عامة.