خطأ cross-origin resource needs a 'crossorigin' attribute to be eligible for integrity validation في VS Code

هذا ليس خطأ error بل تحذير warning من برنامج VS Code لكي تقوم بإضافة الخاصية crossorigin إلى العنصر link بالشكل التالي:

<link rel="stylesheet" href="..." crossorigin="anonymous">

وقد تم شرح هذه الخاصية وكيفية إستخدامها في هذه المقالة (قسم سياسة تعدد المصادر Crossorigin policy):

يمكنك تجاهل مصل هذه التحذيرات وسيعمل الموقع بدون مشكلة، ولكن البحث عن معناها وكيفية إصلاحها سوف يزيد من معلوماتك.

شكرا على التوضيح.

لكن عندما قمت بإضافة crossorigin="anonymous" لم يعد css يعمل

كأنني قمت فقط بملف html

بتاريخ 1 دقيقة مضت قال محمود سعداوي:

شكرا على التوضيح.

لكن عندما قمت بإضافة crossorigin="anonymous" لم يعد css يعمل

كأنني قمت فقط بملف html

لا تقم بإضافة الخاصية إلى العنصر link الذي يقوم بإستدعاء ملفات محلية مثل style.css ولكن قم بإضافته إلى العنصر link الذي يقوم بإستدعاء ملفات خارجية مثل الخاص بخطوط جوجل فقط. 

بتاريخ 3 ساعات قال سامح أشرف:

لا تقم بإضافة الخاصية إلى العنصر link الذي يقوم بإستدعاء ملفات محلية مثل style.css ولكن قم بإضافته إلى العنصر link الذي يقوم بإستدعاء ملفات خارجية مثل الخاص بخطوط جوجل فقط. 

عندما قمت بإضافة crossorigin attribute ظهرت الرسالة التالية:

Resource was requested without the 'integrity' attribute.

في الواقع لما بحثت عن integrity attribute (الخاصة بخطوط غوغل) وقمت بالدخول إلى الرابط: https://www.srihash.org/ ثم أدخلت رابط خطوط غوغل لم أصل إلى نتيجة ربما لأن الموضوع معقد أكثر مما تصورت.

على كل  شكرا جزيلا أخي الكريم على كل الإيضاحات.

بتاريخ 1 ساعة قال محمود سعداوي:

عندما قمت بإضافة crossorigin attribute ظهرت الرسالة التالية:

Resource was requested without the 'integrity' attribute.

في الواقع لما بحثت عن integrity attribute (الخاصة بخطوط غوغل) وقمت بالدخول إلى الرابط: https://www.srihash.org/ ثم أدخلت رابط خطوط غوغل لم أصل إلى نتيجة ربما لأن الموضوع معقد أكثر مما تصورت.

على كل  شكرا جزيلا أخي الكريم على كل الإيضاحات.

الخاصية integrity تقوم بالتأكد من محتوى الملف الذي تريد تحميله وأنه تم تحميله بشكل صحيح من خلال حساب هاش Hash (رمز يعبر عن محتوى الملف):

sha384-eXAS9gpSubzWBZ85sXFT30e/QtpWuMez5/IcYcBwYZIiK7Agf3sTyLvXpcP05Dzy

وكل ما عليك فعله للحصول على هذا الهاش هو وضع الرابط الخاص بخطوط جوجل في الموقع srihash.org ثم الضغط على Hash وستجد أنه تم توليد عنصر link كامل ويحتوي على الخاصية crossorigin والخاصية integrity بالشكل التالي:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=El+Messiri&display=swap" integrity="sha384-eXAS9gpSubzWBZ85sXFT30e/QtpWuMez5/IcYcBwYZIiK7Agf3sTyLvXpcP05Dzy" crossorigin="anonymous">

بتاريخ 3 دقائق مضت قال سامح أشرف:

الخاصية integrity تقوم بالتأكد من محتوى الملف الذي تريد تحميله وأنه تم تحميله بشكل صحيح من خلال حساب هاش Hash (رمز يعبر عن محتوى الملف):

sha384-eXAS9gpSubzWBZ85sXFT30e/QtpWuMez5/IcYcBwYZIiK7Agf3sTyLvXpcP05Dzy

وكل ما عليك فعله للحصول على هذا الهاش هو وضع الرابط الخاص بخطوط جوجل في الموقع srihash.org ثم الضغط على Hash وستجد أنه تم توليد عنصر link كامل ويحتوي على الخاصية crossorigin والخاصية integrity بالشكل التالي:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=El+Messiri&display=swap" integrity="sha384-eXAS9gpSubzWBZ85sXFT30e/QtpWuMez5/IcYcBwYZIiK7Agf3sTyLvXpcP05Dzy" crossorigin="anonymous">

 

للأسف أخي نفس الرسالة ظهرت مجددا

بتاريخ 10 دقائق مضت قال محمود سعداوي:

للأسف أخي نفس الرسالة ظهرت مجددا

قد لا يدعم برنامج VS Code بعض الهاشات التي تم توليدها من قِبل بعض المواقع، يمكنك أن تستخدم موقع zinoui لتوليد هاش صحيح، لكن عليك أن تضيف .css إلى نهاية الرابط لكي يعمل الموقع بشكل سليم:

https://fonts.googleapis.com/css2?family=El+Messiri&display=swap.css
//                                                              ^^^^^

وسيتم توليد كودج سليم بالشكل التالي:

<link href="https://fonts.googleapis.com/css2?family=El+Messiri&display=swap.css" rel="stylesheet" integrity="sha384-d5m239bU1uZmu/M/j2JqVS8ZbQYLFSfp3cefs1vrIB8UaXE1DTSFwhtAioI18Nck" crossorigin="anonymous">

بتاريخ 2 ساعات قال سامح أشرف:

قد لا يدعم برنامج VS Code بعض الهاشات التي تم توليدها من قِبل بعض المواقع، يمكنك أن تستخدم موقع zinoui لتوليد هاش صحيح، لكن عليك أن تضيف .css إلى نهاية الرابط لكي يعمل الموقع بشكل سليم:

https://fonts.googleapis.com/css2?family=El+Messiri&display=swap.css
//                                                              ^^^^^

وسيتم توليد كودج سليم بالشكل التالي:

<link href="https://fonts.googleapis.com/css2?family=El+Messiri&display=swap.css" rel="stylesheet" integrity="sha384-d5m239bU1uZmu/M/j2JqVS8ZbQYLFSfp3cefs1vrIB8UaXE1DTSFwhtAioI18Nck" crossorigin="anonymous">

 

للأسف أخي لم يتم الوصول لخاصية خطوط غوغل المطلوبة (عبارة عن إلغاء كلي ل:tag link)

أعتقد المشكل في vs code.

بتاريخ 22 ساعات قال محمود سعداوي:

للأسف أخي لم يتم الوصول لخاصية خطوط غوغل المطلوبة (عبارة عن إلغاء كلي ل:tag link)

أعتقد المشكل في vs code.

يوجد خطأ لديك في الصورة الأولى حيث أن مسار الخط Mochiy Pop One غير صحيح لديك، فالمسار الصحيح هو:
 

https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap

وبالتالي يمكنك أن تستخدم عنصر link التالي:

<link href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap.css" rel="stylesheet" integrity="sha384-aEek45YJgjlg2AeK2J3peZfIlD3JFyAmgM4pn3MQHzFLALgsNgtHGmX79j2/gArV" crossorigin="anonymous">

قمت بتجربة هذا العنصر في برنامج VS Code وقد تعرف عليه بدون مشكلة وقد عمل الخط أيضًا بدون مشكلة، وكما أشرت سابقًا أن هذا الخط الذي يظهره VS Code ليس خطأ بل تحذير ويمكنك تجاهله بكل بساطة.