แสดงการเขียนเข้ารหัสด้วย Angular 5 และเรียก API เพื่อให้ Java Spring boot ถอดรหัส

1. Set Password Feature
เป็นฟีเจอร์ที่จะช่วยให้ผู้ใช้ระบบสามารถเปลี่ยนรหัสผ่านได้ด้วยตนเอง
โดยไม่จาเป็นต้องร้องขอให้ผู้ดูแลระบบเปลี่ยนรหัสผ่านให้
และในเอกสารการนาเสนอฉบับนี้จะเน้นไปที่เรื่องของ
การเข้ารหัส/ถอดรหัส เพื่อการรักษาความลับของข้อมูลเท่านั้น

2. ทาความเข้าใจกันสักนิด
แสดงภาพรวมของฟีเจอร์ และแสดงความหมายของคาศัพท์ต่างๆ เพื่อให้มีความรู้ความเข้าใจในการพัฒนาหรือบารุงรักษาฟีเจอร์นี้
Created by fResult

3. นิยามศัพท์
• การเข้ารหัส (Encryption) หมายถึง การเปลี่ยนรูปแบบข้อความที่อ่านเข้าใจให้อยู่ในรูปแบบข้อความที่คนทั่วไปไม่
สามารถอ่านแล้วเข้าใจได้โดยง่าย เพื่อรักษาความลับของข้อความนั้นๆ และเพื่อให้มั่นใจได้ว่ากรณีที่ข้อมูลถูกผู้ไม่ประสงค์ดี
ดักเก็บไว้ได้ระหว่างการรับ-ส่งข้อมูลแล้ว ข้อมูลจะไม่สามารถถูกอ่านออกแล้วนาไปใช้ในทางที่มิชอบ
• การถอดรหัส (Decryption) หมายถึง การเปลี่ยนรูปแบบข้อความที่ถูกเข้ารหัสมาแล้ว ซึ่งไม่สามารถเข้าใจได้ให้
กลับมาเป็นข้อความปกติที่ทาให้มนุษย์สามารถเข้าใจได้อีกครั้ง
• กุญแจลับ (Secret Key) เป็นสิ่งสาคัญมากตัวหนึ่งในการเข้ารหัส และใช้ถอดรหัสให้กลับมาเป็นข้อความเดิม (การ
เขียนโปรแกรมเข้ารหัสและถอดรหัสในโปรเจ็กต์เราจะใช้ชื่อตัวแปรว่า Pass Phrase)
• ข้อความปกติ (Plain text) หมายถึง ข้อความที่สามารถมนุษย์สามารถอ่านแล้วเข้าใจได้
• ข้อความไซเฟอร์ (Cipher text) หมายถึง ข้อความที่เป็นผลลัพธ์จากการเข้ารหัส และไม่สามารถเข้าใจได้ง่าย
• Salt หมายถึง ข้อมูลที่ใช้สาหรับเป็น Input ในการเข้ารหัส และต้องใช้ salt เดียวกันกับที่ใช้เข้ารหัสเป็น Input
การถอดรหัสด้วย โดย salt ที่ใช้ใน Feature นี้ได้ใช้วิธีการสุ่มเลขฐานสิบหกจานวน 32 digits ซึ่งในแต่ละครั้ง
ของการเข้ารหัส salt ไม่ควรมีค่าซ้ากันเลย กล่าวคือ แต่ละ salt ต้องมีความเป็นเอกลักษณ์ (Uniqueness)
Created by fResult

4. นิยามศัพท์ (ต่อ)
• Input Vector (IV) ในทางเทคนิคแล้วมีลักษณะการใช้งานคล้ายกับ salt เป็นอย่างมากแต่ยังมีจุดแตกต่าง
อยู่บ้างในบริบท อย่างไรก็ตามใน Feature นี้ ผู้สร้างได้ใช้ทั้ง 2 อย่างเป็น input ในขั้นตอนวิธีเข้ารหัสและ
ถอดรหัส
• การแปลงรหัส (Encoding) หมายถึง การแปลงข้อความปกติที่สามารถอ่านได้ง่าย ให้อยู่เป็นรหัสในอีกรูปแบบ
หนึ่ง
• Hex หมายถึง รหัสข้อความที่อยู่ในรูปแบบของเลขฐานสิบหก โดยมีค่าตั้งแต่ 0-9 และ A-F รวมทั้งสิ้น 16 ตัว
• Base64 หมายถึง รหัสข้อความที่อยู่ในรูปแบบของตัวอักษรภาษาอังกฤษพิมพ์ใหญ่จานวน 26 ตัว
อักษรภาษาอังกฤษพิมพ์เล็กจานวน 26 ตัว เลข 0-9 จานวน 10 ตัว และเครื่องหมาย +, / อีก 2 ตัว
นับรวมได้ทั้งสิ้น 26+26+10+2 = 64 ตัว
Created by fResult

5. Overview
หลักการพื้นฐานของกระบวนการการเข้ารหัส
ก่อนการส่งข้อมูลจาก Frontend
ไปยัง Backend
การเข้ารหัสจะต้องนาเข้า Key และ Plain text
เข้าไปในกระบวนการเข้ารหัสผ่านฟังก์ชันแฮช
และจะได้ผลลัพธ์ออกมาเป็นข้อความที่อ่านไม่ออก
เปรียบได้กับการได้นาข้อความใส่กล่อง
แล้วล็อกแม่กุญแจเอาไว้เพื่อไม่ให้เปิดอ่านข้อความได้
ภาพแสดงการเข้ารหัสและถอดรหัส ขอบคุณภาพจาก www.javaquery.com
Created by fResult

6. Overview (ต่อ)
กระบวนการถอดรหัสหลังจาก Backend
ได้รับข้อมูลจาก Frontend เรียบร้อยแล้ว
การถอดรหัสจะต้องใส่ Key และ Cipher text
เข้าไปในกระบวนการถอดรหัสผ่านฟังก์ชันแฮชอีกครั้ง
และหากเป็น Key ที่ถูกต้อง (Key เดียวกับตอน
เข้ารหัสในกรณีที่เป็นการเข้ารหัสแบบสมมาตร) จะได้ผลลัพธ์ออกมา
เป็นข้อความที่มนุษย์สามารถเข้าใจได้ (Plain text)
เช่นเดิม เปรียบได้กับการนากล่องที่ถูกล็อกด้วยแม่กุญแจ
มาเปิดออกเพื่ออ่านข้อความนั้นอีกครั้ง
ภาพแสดงการเข้ารหัสและถอดรหัส ขอบคุณภาพจาก www.javaquery.com
Created by fResult

7. แหล่งที่มาและแหล่งข้อมูลเพิ่มเติม
• AES Encryption in Javascript and Decryption in Java, devglan.com
• Is “real salt” the same as “initialization vectors”?
• Does IV work like salt
• วิธีการเข้ารหัส และถอดรหัส Base64, mindphp.com
• เลขฐานสิบหก, wikipedia.org
• เรื่องการรักษาความปลอดภัยเครือข่ายคอมพิวเตอร์ ในวิชาการสื่อสารข้อมูลและระบบเครือข่ายคอมพิวเตอร์ เล่ม 2,
มหาวิทยาลัยสุโขทัยธรรมาธิราช
• เรื่องการจัดการความปลอดภัยซอฟต์แวร์ ในวิชาวิศวกรรมซอฟต์แวร์ เล่ม 2, มหาวิทยาลัยสุโขทัยธรรมาธิราช
Created by fResult

8. Environment สาหรับเครื่องที่ผู้พัฒนา Feature นี้ต้องมี
1. Project mass_password_setting โดย Clone project ได้ที่
https://git.matador.ais.co.th/EPC/password-setting
2. Library ของ Oracle 3 packages คือ com.oracle.crytoj,
com.oracle.wlfullclient และ com.oracle.wljmxclient ต้องนาไปวางไว้ใน Path
%UserProfile%.m2repository ของเครื่องผู้พัฒนา โดยดาวน์โหลดได้จาก Shared drive ใน Path
CMITSTORAGE-ACSS_ENTERPRISE_PRODUCT10) SoftwareJMX_libs for
m2 อ่านวิธีการติดตั้ง lib ได้ที่ไฟล์ README.txt
3. อาจต้องมี Maven CLI ในกรณีที่จาเป็นต้องติดตั้ง Library อาจเนื่องจากการทางานที่ผิดพลาดของ Library ที่มีอยู่
หรืออาจต้องติดตั้งตัวอื่นๆ เพิ่มเติม สามารถดูการพิมพ์บรรทัดคาสั่งเพื่อติดตั้ง Lib ได้ที่
https://maven.apache.org/guides/mini/guide-3rd-party-jars-local.html
และสามารถติดตั้งโปรแกรม Maven CLI ได้โดยการติดต่อ IT Support เพื่อขอลงโปรแกรม
Created by fResult

9. ขั้นตอนวิธีการเข้ารหัสและถอดรหัส อย่างละเอียด
• การเข้ารหัสและถอดรหัส ได้ถูกแบ่งเป็น 2 Phase คือ
1. การเข้ารหัส ก่อนการส่งข้อมูลจาก Frontend ไปที่ Backend (โดยต่อไปนี้จะเรียกกระบวนการดังกล่าวว่า
Encryption)
2. การถอดรหัส หลังจาก Backend ได้รับข้อมูลที่ถูกเข้ารหัสแล้ว (โดยต่อไปนี้จะเรียกกระบวนการดังกล่าวว่าการ
Decryption)
ทั้ง 2 Phase ดังกล่าวจะได้อธิบายใน Slide ต่อๆ ไป
Created by fResult

10. การเข้ารหัส (Encryption)
แสดงขั้นตอนวิธีการเข้ารหัสอย่างละเอียด มี 4 ขั้นตอน
Created by fResult

11. การเข้ารหัส (Encryption)
• มี 4 ขั้นตอน ดังนี้
1. ขั้นเตรียมการ โดยเตรียม iv, salt, key และ pass
phrase
2. เข้ารหัส (Encrypt) ผ่านฟังก์ชันแฮชขั้นต้น จะได้ผลลัพธ์ออกมา
เป็นข้อความ cipher ที่อ่านไม่ออก และไม่สามารถแปลงค่ากลับได้
(ถ้าไม่มี iv, pass phrase และ key ที่ถูกต้อง)
3. นา cipher text จากขั้นตอนที่ 2 มาแปลงเป็น base64
จากนั้นนา iv และ salt ที่เตรียมไว้ตั้งแต่ขั้นตอนที่ 1 มารวมกับ
cipher text จะได้ผลลัพธ์เป็น iv::salt::cipher text
แล้วแปลงข้อความที่ถูกรวมให้เป็น base64 อีกครั้งหนึ่ง
4. ส่งข้อความที่เป็นผลลัพธ์จากขั้นตอนที่ 3 ออกไปที่ Network
สาหรับส่งให้Backend นาไปประมวลผลเพื่อเปลี่ยนพาสเวิร์ดที่
Database ต่อไป
Created by fResult

12. 1. ขั้นเตรียมการ
1. เรียกใช้เมธอด initEncryptionProperties()
พร้อมส่ง argument 128 และ 1000
เพื่อนาไประบุ property ที่จาเป็นต่อการเข้ารหัสให้แก่ Encryption Interface
มี property เริ่มต้นที่สาคัญคือ key size / 32 = 4, iteration count = 1000,
ส่วน iv และ salt ได้มาจากการสุ่มตัวเลขฐานสิบหก (Hex) ขึ้นมา 32 หลัก (หรือประมาณ 3.438
10)
แล้วแปลงให้เป็น string เพื่อให้การส่งผ่านเมธอดได้โดยง่าย
สุดท้ายคือ pass phrase หรือกุญแจลับระบุให้เป็น “%P!a^s$s*w$o#r@d&”
2. นา property จานวน 4 จาก 5 ตัวที่เตรียมไว้ในข้อ 1 มาใช้ในการ generate key โดยใช้Input 4 ตัว คือ
salt (ที่ถูกแปลงเป็น Hex), pass phrase, key size และ iteration count
การเข้ารหัส (ต่อ)
Created by fResult

13. การเข้ารหัส (ต่อ)
2. ขั้นการเข้ารหัสเบื้องต้น
โดยใช้เมธอด encrypt() ของ
Library CryptoJS และใส่ Input 3 ตัว คือ
• ข้อความปกติ (plain text)
• key ที่ได้จากเมธอด generateKey() ในขั้นตอนแรก
• Input Value (IV) ที่ถูกแปลงรหัส (Encode) จากรูปแบบรหัสเลขฐานสิบหก (HEX) เป็น Bytes code
เช่น โดย Enter ก็เป็นส่วนหนึ่งของอักขระแบบ Bytes code ด้วย
จะได้ผลลัพธ์เป็น Cipher text ขั้นต้นในรูปแบบเลขฐานสิบหก
จากนั้นจะนาไปแปลงรหัสต่อในขั้นตอนที่ 3
Created by fResult

14. การเข้ารหัส (ต่อ)
3. ขั้นการรวมรหัส และแปลงรหัสเป็นรูปแบบ Base64
มีการแปลงและรวมรหัสอีก 3 ขั้นตอนย่อย คือ
1. แปลงรหัสจาก cipher text ให้ไปอยู่ในรูปแบบ base64
2. นาข้อความ iv, salt และ cipher text แบบ base64 ตามลาดับมาวางต่อกัน
โดยแต่ละลาดับจะมีตัวคั่นเป็น “::” (Double colon)
3. นาข้อความที่มาจากการรวมรหัสในขั้นตอนย่อยที่ 2 มาแปลงรหัสเป็น base64 อีกครั้ง
การทาแบบนี้ก็เพื่อให้ Backend นา iv และ salt ที่ได้สุ่มขึ้นมา
ไปใช้ถอดรหัสได้อย่างถูกต้อง (เนื่องจากข้อความทั้งสองเป็นแบบสุ่มขึ้นมา
หากไม่ส่ง iv และ salt ไปด้วยแล้ว Backend จะไม่สามารถถอดรหัสกลับมาเป็นข้อความเช่นเดิมได้)
Created by fResult

15. การเข้ารหัส (ต่อ)
4. ขั้นการส่งออกข้อความที่ถูกเข้ารหัสผ่านเครือข่าย
ด้วยการใช้ API Put method (บรรทัดที่ 46)
ระบุ URI “/setpassword”
และส่ง body เป็นข้อความ JSON ที่ถูกเข้ารหัสแล้ว
สาหรับนาไปถอดรหัสและประมวลผล
เพื่ออัพเดตรหัสผ่านใหม่ลงใน Database
Created by fResult

16. การถอดรหัส (Decryption)
แสดงขั้นตอนวิธีการถอดรหัสอย่างละเอียด มี 4 ขั้นตอน
Created by fResult

17. • มี 4 ขั้นตอน ดังนี้
1. รับ body ที่เป็นข้อความ base64 จาก Frontend แล้ว
แปลงค่าจาก base64 ให้กลับเป็น iv::salt::cipherText
2. แยกรหัสก่อนเตรียมการ โดยนาค่าที่ได้จากขั้นตอนที่หนึ่ง
มาแยกค่าออกจากกัน จะได้เป็น iv, salt และ cipher text
3. ขั้นเตรียมการสาหรับการถอดรหัส โดยเตรียม iv, salt, pass
phrase เพื่อสร้าง key ที่ถูกต้อง
4. นา key ที่เตรียมไว้และ cipher text เข้ากระบวนการถอดรหัส
จะได้ผลลัพธ์ username และ password เหมือนกันกับที่
ผู้ใช้ได้ส่งมาจาก PLM Angular Application.
การถอดรหัส (Decryption)
Created by fResult

18. 1. ขั้นการแปลงรหัสขั้นต้น
เรียกใช้เมธอด decodeBase64ToText()
พร้อมส่ง argument base64IvSaltCipher
ซึ่งเป็น Body ที่ส่งมาพร้อมกับการเรียกใช้ API ของฝั่ง Frontend ดังนี้
การถอดรหัส (ต่อ)
Created by fResult

19. 2. ขั้นการแยกรหัส
โดยเรียกใช้เมธอด splitIvSaltCipher()
พร้อมส่ง argument ivSaltCipher ที่มีข้อความรวม iv::salt::cipherText
เพื่อแยก iv, salt, cipher text ออกจากกันสาหรับเตรียมการในขั้นต่อไป ดังนี้
การถอดรหัส (ต่อ)
Created by fResult

20. การถอดรหัส (ต่อ)
3. ขั้นเตรียมการก่อนการถอดรหัส
1. เตรียม key spec ด้วยการใช้pass phrase, salt เป็น Input
แล้วระบุ iteration count 1000 และ key size 128 bit ไปเป็น Input ด้วย
2. นา key spec ที่ได้ไปสร้าง key (ดังบรรทัดที่ 71)
Created by fResult

21. การถอดรหัส (ต่อ)
4. ขั้นการถอดรหัส
นา key, iv และ cipher text
เข้าสู่กระบวนการถอดรหัส ซึ่งผลลัพธ์ที่ได้จะอยู่ใน
รูปแบบ JSON จากนั้นนาไปแปลงเป็น Object
เป็นอันเสร็จสมบูรณ์
แล้วจึงสามารถใช้ค่าในใน Object ที่ได้มา
นาไปประมวลผลเพื่อเปลี่ยนรหัสผ่านให้ผู้ใช้ต่อไป
Created by fResult

22. ข้อเสนอแนะ
สิ่งที่ควรพัฒนาเพิ่มเติม
Created by fResult

23. ข้อเสนอแนะ
• แก้ไขหน้าจอ HTML ให้ดูดีขึ้น และเปลี่ยนการแสดงข้อความ Error หรือ Success ให้แสดงทาง Modal แทน
• เพิ่ม Log4J เพื่อให้โปรเจ็กต์สามารถแสดง Error, Warning และ Info ต่างๆ ออกทาง Console ได้
• ปัจจุบันมีการแสดง Error popup ให้User เห็นเพียงแค่สองแบบ คือ “500 Server Error” และ
“Username or Old Password is invalid” แต่ Error ในแบบที่ 2 ยังแยกได้อีกคือ
“Password must be at least 8 characters long” ดูได้ที่เมธอด
changeUserPassword() ที่อยู่ในคลาส PasswordSettingUtilService.java
• หากจาเป็นต้องนาการ Encrypt/Decrypt ของโปรเจ็กต์ MassPasswordSetting ไปใช้กับงานอื่นที่
ต้องการความปลอดภัยในระดับลับมาก ถึง ลับที่สุด ขอให้เพิ่มความซับซ้อนของการเข้ารหัส เช่น เพิ่ม Hex value ผสมเข้า
กับชุดข้อมูลที่ถูกเข้ารหัสให้มีความยาวมากขึ้น เช่นจากเดิมที่มีแค่ iv::salt::cipher อาจเพิ่มเป็น
iv::spoofingText1::salt::cipher::spoofingText2 หรือยาวกว่านั้น แล้วนาเอาแค่ iv, salt และ
cipher ออกมาใช้ในการถอดรหัสเท่านั้น เพื่อให้ผู้ไม่ประสงค์ดีที่ได้ข้อมูลไปแล้วคาดเดาการถอดรหัสได้ยากยิ่งขึ้น ที่ควรทา
เช่นนี้เพราะว่าผู้สร้าง Set Password Feature นั้น ได้ใช้ลอกเลียนขั้นตอนวิธีการเข้ารหัสและถอดรหัสจาก
อินเตอร์เน็ต ตามแผนภาพที่ได้วาดไว้ให้ดูใน Slide การอธิบายขั้นตอนวิธีการเข้ารหัส/ถอดรหัส มาเกือบ 100%
Created by fResult