التشفير بأستخدام JavaScript!

ما هوا التشفير؟

يشير التشفير الى الخوارزمية لإجراء تشفير وفك التشفير للبيانات, يتكون من خطوات محددة لتحويل النص الأصلي إلى نص مشفر بأستخدام مفتاح لتحديد كيفية اجراء التشفير وفك التشفير.

من الممكن أن تكون خوارزمية التشفير معقدة او سهلة مثل ROT13 المختصرة من (Rotate by 13 places) ومعناها التدوير أو التحويل بمقدار 13 مكانا. وهوا عبارة عن تشفير بسيط عن طريق تبديل الحروف الأبجدية في الرسالة وأستبدالها بحرف يسبقه ب13 مكانا.

شفرة ROT13:

هذه الصورة توضح كل حرف وإلى أي حرف سيتم استبداله عند استخدام خوارزمية ROT13

يظهر المثال كيفية تشفير كلمة HELLO وكيف تم تحويلها الى URYYB

والتي تبدوا كأنها احرف عشوائية ولكن عندما نستخدم المفتاح لفك الشفرة يمكننا أعادتها الى النص الأصلي وهوا HELLO .

التشفير في JavaScript:

في JavaScript يمكننا بناء شفرتنا الخاصة لأستعمالها في تشفير البيانات وأستخدام مفتاح لأعادتها إلى النص الأصلي.

هناك اكثر من طريقة لإنشاء نص مشفر وهذه بعض الأمثلة عليها:

1. Private-Key (المفتاح الخاص): هذا النوع من التشفير يستخدم نفس المفتاح في التشفير وفك التشفير, يجب الحفاظ على خصوصية المفتاح عند استعمال هذه الطريقة
2. Public-Key (المفتاح العام): في هذا النوع يتم استخدام مفتاحان واحد لتشفير البيانات (المفتاح العام) والأخر فك تشفيرها (المفتاح الخاص).
3. Substitution method (طريقة الأستبدال): يتم استبدال الأحرف بأحرف اخرى لجعل قراءة النص صعبة او مستحيلة.
4. Transposition method (طريقة التحويل): يتم اعادة ترتيب الحروف بطريقة لا يمكن فيها قراءة البيانات.

حان الوقت لتجربة صنع نص مشفر بأستخدام JavaScript!

ROT13 بأستعمال JavaScript:

بما أننا تحدثنا عن ROT13 والذي يعتبر Substitution Method (طريقة الأستبدال) سوف نقوم بأنشاء شفرة على JavaScript بأستخدامه.

سوف نقوم فقط بتحويل الأحرف الأنجليزية الكبيرة (A-Z).

هناك شيئان مهمان يجب ان نعرفهم في JavaScript للبدء في صناعة الشفرة.

• ()charCodeAt - هذي الطريقة سوف تعطينا الUnicode للحرف المراد تحويله في النص
• ()fromCharCode - وهذه الطريقة عكس الماضية وهيا عن طريقة تحويل الUnicode إلى حرف

هذا مثال يوضح كيفية عمل كل طريقة.

let str = "Hello World!"
for (let i = 0; i < str.length; i++){
    let unicode = str.charCodeAt(i)
    let character = String.fromCharCode(unicode)
}

• لدينا النص "Hello World" محفوظ في متغير اسمه "str".
• بأستعمال لوب يمكننا المرور على كل الحروف في النص وحفظ الUnicode الخاص بكل حرف في متغير اسمه unicode.
• بعد ذلك سنقوم بتحويل قيم الUnicode مرة اخرى الى الحرف بأستعمال ()String.fromCharCode وحفظها في متغير اسمه "character".
• بأستعمال ()Console.log لعرض الUnicode لكل حرف في المتغير str وتحويلها مرة اخرى إلى النص الأصلي.

يمكننا معرفة الUnicode الخاص بكل حرف من جدول الASCII هذا:

قائمة الحروف كاملة في UTF-8

• لإنشاء شفرة ROT13 علينا البدء اولا بإنشاء فنكشن بأسم rot13 والذي يقبل النص المراد تشفيره str . بسبب ان هذه Substitution Method (طريقة الأستبدال) سوف نقوم بإستخدام نفس الفنكشن لفك التشفير.
• سوف نقوم بإنشاء متغير جديد اسمه newStr لنقوم بتخزين الرسالة المشفرة أو التي تم تفكيك شفرتها.
• الأن بإمكاننا حفظ كل حرف Unicode في str لمتغير اسمه unicode بأستخدام لوب للمرور على كل الحروف في النص.

function rot13(str){
    let newStr = [];
    for (let i = 0; i < str.length; i++){
        let unicode = str.charCodeAt(i) //Each Character Unicode in UTF-8
    }
}

• بعد حفظ الUnicode لكل حرف سوف نستعمل حالة شرطية (if statment) للتأكد اذا الUnicode يساوي 32 او أكثر و يساوي 64 أو اقل. (هذه تمثل الأرقام والرموز وعلامات التنصيص).
• اذا كان الحرف عبارة عن رقم أو رمز أو علامة تنصيص لن نقوم بعمل اي شي وسوف نخزن نفس الحرف ونحفظه في (newStr).

if (unicode >= 32 && unicode <= 64) {
  let newUnicode = String.fromCharCode(unicode)
  newStr.push(newUnicode)
}

• اذا كان الحرف الذي نحاول أن نبدله سيتعدى الحرف الأخير (Z) في جدول الASCII سوف نتأكد أن النص المشفر سيكون بين الحروف (A-Z) عن طريق اخذ الUnicode زائد 13 لتبديله بمكان الحرف الثاني ومن ثم نأخذ 26 منه وهوا عدد الحروف الأنجليزية.
• وفي النهاية سنحفظ النص المشفر في (newStr).

// Here we will check if we shift the character by 13 places and it exceeds the Last letter (Z).
// then we make sure that the ciphertext will be in the range of (A-Z) by taking the (Unicode + 13-26) so that the new character will be in the range of (A-I).
else if (unicode + 13 > 90) {
    let newUnicode = String.fromCharCode(unicode + 13 - 26)
    newStr.push(newUnicode)
}

• اذا كنا سنزيد 13 على الحرف ولن يتعدى حرف الZ اذا لن نقوم بعمل اي شي وسنحفظ القيمة التي نتوقف عليها بعد الزيادة ونحفظها في (newStr).
• الفنكشن في النهاية سيعيد الnewstr بعد ان يضم جميع الحروف سوية بأستخدام (" ")join.

//Shifting the character by 13 places.
else {
  let newUnicode = String.fromCharCode(unicode + 13)
  newStr.push(newUnicode)
 }
}

//Joining the ciphertext together
return newStr.join('')

الكود كامل:

function rot13(str){
    let newStr = [];
    for (let i = 0; i < str.length; i++){
        let unicode = str.charCodeAt(i) //Each Character Unicode in UTF-8

        //The first if statement will check if the character is a Number, Sign, or Punctuation.
        // It will then push the same character to the newStr.
        if (unicode >= 32 && unicode <= 64) {
          let newUnicode = String.fromCharCode(unicode)
          newStr.push(newUnicode)
        }

        // Here we will check if we shift the character by 13 places and it exceeds the Last letter (Z).
        // then we make sure that the ciphertext will be in the range of (A-Z) by taking the (Unicode + 13-26) so that the new character will be in the range of (A-I).
        else if (unicode + 13 > 90) {
        let newUnicode = String.fromCharCode(unicode + 13 - 26)
        newStr.push(newUnicode)
        }
        
        //Shifting the character by 13 places.
        else {
            let newUnicode = String.fromCharCode(unicode + 13)
            newStr.push(newUnicode)
        }
    }   
        //Joining the ciphertext together
        return newStr.join('')
}

النتائج:

الأن يمكننا استدعاء الفنكشن وكتابة هذا المثال "!I LOVE PROGRAMMING"

let result = rot13('I LOVE PROGRAMMING!')
console.log(result) // V YBIR CEBTENZZVAT!

النتائج اظهرت لنا النص "!V YBIR CEBTENZZVAT" لكن هذه المرة سنقوم بإستدعاء الفنكشن ونستخدم النص المشفر لإعادته للكلمة الأصلية.

let result = rot13('V YBIR CEBTENZZVAT!')
console.log(result) // I LOVE PROGRAMMING!

المصادر:

• https://en.wikipedia.org/wiki/ROT13
• https://www.conceptatech.com/blog/difference-front-end-back-end-development
• https://blog.cloudboost.io/create-your-own-cipher-using-javascript-cac216d3d2c
• https://blog.cloudboost.io/create-your-own-cipher-using-javascript-cac216d3d2c