إستخدام متغيرات قالب في JavaScript في جانغو Django

يوجد عدة طريق للقيام بهذا الأمر في Django.

الطريقة الأولى: إن كان إصدار Django لديك 2.1 أو أحدث، فستجد أن Django يوفر لك json_script لكي تمرر القواميس بشكل كود json، كالتالي:

{{ value|json_script:"hello-data" }}

وستكون النتيجة في المتصفح بالشكل التالي:

<script id="hello-data" type="application/json">{"hello": "world"}</script>

ويمكنك إستخدام هذه البيانات على النحو التالي:

const value = JSON.parse(document.getElementById('hello-data').textContent);

ملاحظة: هذه الطريقة أمنة من ثغرات XSS لأن Django يقوم بتحويل الرموز الخطيرة مثل (< , > , &) ، كالتالي:

<script id="hello-data" type="application/json">{"hello": "world\\u003C/script\\u003E\\u0026amp;"}</script>

الحل الأخر (يعمل مع جميع إصدارات Django)، وهو استخدام حقل الإدخال المخفي في القالب، كالتالي:

<input type="hidden" id="myDict" name="variable" value="{{ myDict }}">
<script>
  var myDict = document.getElementById("myDict").value;
</script>

ملاحظة: لا تحاول أبدًا أن تقوم بإسناد قيمة أي متغير إلى كود JavaScript على النحو التالي:

<script type="text/javascript"> 
   var x = "{{someDjangoVariable}}";
</script>

الكود السابق خطير للغاية لأنه سعرض الموقع لثغرة XSS مما قد يؤدي إلى تنفيذ أكود JavaScript خبيثة لدى زوار الموقع، مما يؤدي إلى سرقة بياناتهم مثل بطاقات الإئتمان والبريد الإلكتروني وكلمات السر أيضًا.

تشير المستندات الحديثة إلى إمكانية استخدام:

{{ mydata|json_script:"mydata" }}

لمنع البرمجة بالحقن "Code Injection" (أغراض تخريبية).

{{ mydata|json_script:"mydata" }}
<script>
    const mydata = JSON.parse(document.getElementById('mydata').textContent);
</script>

كما يمكنك استخدام كلاً من escapejs و JSON.parse كالتالي:

var CropOpts = JSON.parse("{{ profile.last_crop_coords|escapejs }}");

يمكنك أستخدم هذه الطريقة في Django 2.1 وهي طريقة آمنة, في جانب Django

def age(request):
    mydata = {'age':12}
    return render(request, 'test.html', context={"mydata_json": json.dumps(mydata)})

في جانب html

<script type='text/javascript'>
     const  mydata = {{ mydata_json|safe }};
	console.log(mydata)
 </script>