إعداد مشاركة الموارد عبر الأصل (CORS)

:notebook_with_decorative_cover: هذا دليل how-to سيرشدك خلال عملية إعداد مشاركة الموارد عبر الأصول (CORS) في Discourse.

CORS هي آلية تسمح بالعديد من الموارد (مثل الخطوط، JavaScript، إلخ) على صفحة ويب ليتم طلبها من مجال آخر غير المجال الذي نشأ منه المورد.

إليك كيفية إعداد CORS على موقع Discourse الخاص بك:

المتطلبات الأساسية

قبل البدء، يجب تعيين متغير البيئة DISCOURSE_ENABLE_CORS إلى true لتمكين CORS.

للمساعدة في ذلك، راجع كيفية تعيين متغيرات البيئة.

:sparkles: إذا كنت تستخدم موقع Discourse مستضافًا، فقد تم إنجاز هذه الخطوة بالفعل، ولا تحتاج إلى اتخاذ أي إجراء إضافي لتكوين ذلك.

الوصول إلى إعدادات الموقع

انتقل إلى لوحة تحكم المسؤول في Discourse. من هناك، انتقل إلى علامة التبويب “الإعدادات”.

تحديد موقع إعدادات CORS

في علامة التبويب “الإعدادات”، استخدم شريط البحث واكتب cors origin. يجب أن ترى الإعداد التالي المتعلق بـ CORS:

يسمح لك هذا الإعداد بتحديد المجالات المسموح لها بإجراء طلبات عبر الأصول إلى مثيل Discourse الخاص بك.

يجب عليك إدخال المجالات الدقيقة هنا، مفصولة بمسافة. تجنب استخدام حرف البدل (*) لأن هذا يمكن أن يشكل مخاطر أمنية.

عند إضافة مجالات متعددة هنا، يجب فصل كل عنوان URL. على سبيل المثال:

حفظ التغييرات

بعد إجراء التغييرات اللازمة، لا تنس النقر فوق الزر حفظ التغييرات في أسفل الصفحة.

ملاحظات هامة

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

  • تحديد المجالات الدقيقة: يمكن أن يسمح استخدام أحرف البدل (*) في تكوين CORS لأي مجال بالتفاعل مع خادمك، وهو خطر أمني كبير. يوصى بتحديد المجالات الدقيقة.
  • تقليل البيانات المكشوفة: يجب إعداد CORS للكشف فقط عن البيانات الضرورية من المجالات الخارجية التي تثق بها. لا يُنصح بالسماح للمواقع التي لا تتحكم فيها بالوصول عبر CORS.
  • استخدام HTTPS: عند الإمكان، تجنب السماح للمواقع غير HTTPS في تكوين CORS الخاص بك، حيث يمكن أن يكشف ذلك البيانات بتنسيق غير مشفر.
إعجابَين (2)

وإذا كانت إعلانات Google قيد الاستخدام، فربما من الأفضل عدم العبث بهذا الإعداد :wink:

CORS (و CSP) يمثل مشكلة إلى حد ما لأنه في كثير من الأحيان يجب على الموقع السماح بكل شيء فعليًا، وعندئذ يكون عديم الفائدة تقريبًا.

إعجابَين (2)

لقد أضفت DISCOURSE_ENABLE_CORS: "true" إلى قسم env في ملف app.yml الخاص بموقعي.
ثم قمت بإعادة بناء التطبيق.
ثم ذهبت إلى قسم cors_origins وأضفت عنوان URL الكامل لموقع أحاول التفاعل معه، ومع ذلك لم ينجح الأمر.
لقد أنشأت صفحة لتقديم المعلومات عندما يكون الموقع الرئيسي معطلاً.
لقد وضعت هذا الكود في الصفحة للتحقق من الموقع الرئيسي وإعادة التوجيه إليه بمجرد عودته للعمل، ولكن يبدو أنه لا يعمل.
هذا هو الكود:

    <script>
        function checkSiteStatus() {
            fetch('https://discourse.technospider.com', {
                method: 'HEAD',
                mode: 'cors', // Use CORS to get status code
                cache: 'no-store' // Avoid caching
            })
            .then(response => {
                console.log('Site check: Status', response.status);
                if (response.ok) { // 200-299 status codes
                    console.log('Site is up, redirecting to Discourse');
                    window.location.replace('https://discourse.technospider.com');
                } else {
                    console.log('Site is still down (status: ' + response.status + '), retrying in 20 seconds');
                    setTimeout(checkSiteStatus, 20000);
                }
            })
            .catch(error => {
                console.log('Site check: Error (likely down or CORS issue):', error.message);
                setTimeout(checkSiteStatus, 20000);
            });
        }
            
        // Start checking immediately
        checkSiteStatus();
    </script>

وهذا هو خطأ وحدة التحكم:

[Error] Origin https://www.technospider.com is not allowed by Access-Control-Allow-Origin. Status code: 200
[Error] Fetch API cannot load https://discourse.technospider.com/ due to access control checks.
[Error] Failed to load resource: Origin https://www.technospider.com is not allowed by Access-Control-Allow-Origin. Status code: 200 (discourse.technospider.com, line 0)
[Log] Site check: Error (likely down or CORS issue): – "Load failed" (berightback, line 78)

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

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

في انتظار انتهاء إعادة البناء للاختبار الآن. إذا كان الأمر كذلك، فسيحتاج شخص ما إلى إصلاح هذه الصفحة:

حيث تظهر أنها تضع true داخل علامتي اقتباس مزدوجتين.

انتهت إعادة البناء، لم يتغير شيء. :frowning:

حسنًا، هذا غريب… بقية متغيرات البيئة هناك لديها قيم true بدون علامات اقتباس.

هل هذا أفضل للاستخدام من CSP إذا كنت تريد استخدام JavaScript في المنشورات على سبيل المثال؟

لقد اعتمدت حاليًا على مكونات السمات أو CSP لتشغيل js،

مع أطيب التحيات
أولي

[اقتباس=“NateDhaliwal، مشاركة: 4، موضوع: 270819”]
جرّبها بدون علامتي الاقتباس المزدوجتين، وإلا يمكن تفسيرها كسلسلة نصية بدلاً من قيمة منطقية.
[/اقتباس]

هنا يتم إدخالها في متغير بيئة (environment variable)، والذي لا يمكن أن يكون إلا سلسلة نصية. لا يهم.

ولكن بشكل عام هذا شيء جيد يجب تذكره حيث يمكنك الحصول على نتائج غير متوقعة لقيم تبدو غير ضارة:

pry(main)"> YAML.load('on: yes').to_s
=> "{true=>true}"
إعجاب واحد (1)