لماذا يطرح Canvas.toDataURL() استثناءًا أمنيًا؟

عند العمل باستخدام لوحات HTML، قد تواجه استثناءًا أمنيًا محيرًا أثناء محاولة استرداد عنوان URL لبيانات base64 للوحة القماشية باستخدام طريقة toDataURL(). دعنا نستكشف السبب وراء هذا الخطأ ونجد حلاً.

تسمح لك طريقة toDataURL() بتحويل محتوى اللوحة إلى سلسلة مشفرة base64، والتي يمكن أن تكون مفيدة لحفظ الصورة أو مشاركتها. ومع ذلك، فمن الضروري أن نفهم أن هذه الطريقة تثير استثناءًا أمنيًا إذا كان عنصر اللوحة القماشية يعتبر "أصل غير نظيف".

وفقًا لمواصفات HTML، يعتبر عنصر اللوحة القماشية غير نظيف الأصل إذا كان يحتوي على صور تم تحميلها من خادم مختلف عن صفحة الويب نفسها. في مقتطف التعليمات البرمجية الخاص بك، يتم تحميل الصورة من "www.ansearch.com"، وهو أصل مختلف عن صفحة الويب.

تم وضع قيود الأمان هذه لمنع تلوث المحتوى عبر الأصل، حيث يمكن لموقع ويب ضار الوصول إلى الصور من موقع ويب آخر وتعديلها، مما يشكل خطرًا أمنيًا. لذلك، عند محاولة تحويل لوحة أصلية غير نظيفة إلى سلسلة base64 باستخدام toDataURL()، سيؤدي ذلك إلى استثناء SECURITY_ERR.

للتغلب على هذه المشكلة، يمكنك التأكد من أن الصورة المستخدمة على اللوحة القماشية يتم تحميله من نفس مصدر صفحة الويب. وهذا يعني استضافة الصورة على الخادم الخاص بك أو استخدام CDN الذي يخدم الصورة من نفس المصدر. بمجرد تحميل الصورة من أصل مطابق، يجب أن تعمل طريقة toDataURL() دون أي أخطاء.