ما هي أفضل طريقة للتعامل مع محتوى HTML الذي ينشئه المستخدم والذي سيشاهده الجمهور؟

Question

في تطبيق الويب الخاص بي، أسمح بنشر المحتوى الذي ينشئه المستخدم للاستهلاك العام على غرار Stackoverflow.

ما هي أفضل ممارسة لتسليم هذا؟

خطواتي الحالية للتعامل مع المحتوى الذي ينشئه المستخدم هي:

1. أنا أستعمل MarkItUp to allow users an easy way to format their html.

2. After a user has submitted thier changes I run it through an HTML Sanitizer (scroll to the bottem) that uses a white list approach.

3. If the Sanitization process has removed any user created content I do not save the content. I then Return there modified content with a warning message, "Some illegal content tags where detected and removed double check your work and try again."

4. If the content passes through the sanitization process cleanly, I save the raw html content to the database.

5. When rendering to the client I just pass the raw html out of the db to the page.

Answer 1

هذا نهج معقول تماما.بالنسبة للتطبيقات النموذجية، سيكون ذلك كافيًا تمامًا.

الجزء الأصعب من HTML الخام المدرج في القائمة البيضاء هو style السمة و embed/object.هناك أسباب مشروعة وراء رغبة شخص ما في وضع أنماط CSS في كتلة نص منسق غير موثوق بها، أو على سبيل المثال، مقطع فيديو مضمن على YouTube.تظهر هذه المشكلة بشكل شائع مع الخلاصات.لا يمكنك الوثوق بالكتلة العشوائية من النص الموجودة في إدخال الخلاصة، ولكنك لا تريد التخلص منها، على سبيل المثال، بناء الجملة الذي يسلط الضوء على CSS أو فيديو فلاش، لأن ذلك من شأنه أن يغير المحتوى بشكل أساسي وربما يربك أي شخص يقرأه.نظرًا لأن CSS يمكن أن يحتوي على أشياء خطيرة مثل السلوكيات في IE، فقد تضطر إلى تحليل CSS إذا قررت السماح بـ style صفة البقاء فيها.ومع embed/object قد تحتاج إلى إدراج أسماء المضيفين في القائمة البيضاء.

ملحق:

في أسوأ السيناريوهات، يمكن أن يؤدي تجاوز HTML لكل شيء في الأفق إلى تجربة مستخدم سيئة للغاية.من الأفضل استخدام شيء مثل أحد موزعي HTML5 لتصفح DOM مع القائمة البيضاء الخاصة بك.يعد هذا أكثر مرونة فيما يتعلق بكيفية تقديم المخرجات المنقحة للمستخدمين.يمكنك أيضًا القيام بأشياء مثل:

<div class="sanitized">
  <div class="notice">
    This was sanitized for security reasons.
  </div>
  <div class="raw"><pre>
    &lt;script&gt;alert("XSS!");&lt;/script&gt;
  </pre></div>
</div>

ثم إخفاء .raw الأشياء باستخدام CSS، واستخدم jQuery لربط معالج النقر بملف .sanitized div الذي يبدل بين .raw و .notice:

CSS:

.raw {
  display: none;
}

مسج:

$('.sanitized').click(function() {
  $(this).find('.notice').toggle();
  $(this).find('.sanitized').toggle();
});

Answer 2

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

الطريقة الأكثر أمانًا ستكون:

1. HTML ترميز كل النص.

2. قم بمطابقة مجموعة من العلامات والسمات المسموح بها وفك تشفيرها.

باستخدام التعبير العادي، يمكنك أيضًا أن تطلب أن تحتوي كل علامة فتح على علامة إغلاق، بحيث لا يمكن للعلامة غير المغلقة أن تفسد الصفحة.

يجب أن تكون قادرًا على القيام بذلك في ما يقرب من عشرة أسطر من التعليمات البرمجية، وبالتالي فإن التعليمات البرمجية التي قمت بربطها تبدو معقدة للغاية.