การถอดรหัส JWT ด้วย Javascript โดยไม่ใช้ Library

JSON Web Tokens (JWT) เป็นรูปแบบของการแลกเปลี่ยนข้อมูลแบบ Stateless ระหว่าง Client และ Server โดยใช้ข้อมูลแบบ JSON ที่ถูกเข้ารหัสเป็นตัวอักษร base64url ทั้ง Header, Payload และ Signature โดย Signature จะถูกสร้างจากการเข้ารหัสแบบ HMAC หรือ RSA ขึ้นอยู่กับวิธีที่กำหนดไว้ใน Header

การถอดรหัส JWT ด้วย JavaScript สามารถทำได้โดยใช้ฟังก์ชัน atob() และ JSON.parse() เพื่อถอดรหัสและแปลงข้อมูล JSON ให้กลับมาเป็น Object ได้ดังนี้

const decodeJWT = (token) => {

  const base64Url = token.split('.')[1];

  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');

  const payload = JSON.parse(atob(base64));

  return payload;

}

ส่วนถ้าต้องการเข้าถึง Header และ Signature จะใช้วิธีเดียวกันแต่จะต้องแยกข้อมูลก่อนด้วยจุด(.) เพื่อดึงมาใช้งานดังนี้

const decodeJWT = (token) => {

  const base64Url = token.split('.');

  const header = JSON.parse(atob(base64Url[0]));

  const payload = JSON.parse(atob(base64Url[1]));

  const signature = base64Url[2];

  return { header, payload, signature };

}

ฟังก์ชั่นถอดรหัสข้างต้น อาจมีปัญหาหาก Payload เป็นภาษาไทยนะครับ เนื่องจากมันไม่สนับสนุน UTF-8 หากต้องการใช้งานกับ Payload ที่เป็นภาษาไทย หรือเป็น UTF-8 แนะนำให้ใช้ฟังก์ชั่นนี้แทน

const decodeJWT = (token) => {

  const base64Url = token.split(".")[1];

  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");

  var payload = decodeURIComponent(

    atob(base64)

    .split("")

    .map(function(c) {

      return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);

    })

    .join("")

  );

  return JSON.parse(payload);

};

ตัวอย่างการใช้งาน

const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IuC4l-C4lOC4quC4reC4miDguKDguLLguKnguLLguYTguJfguKIiLCJpYXQiOjE1MTYyMzkwMjJ9.5q3uCa4Z9w9PFyL0tiMbH-U3YKKz5rEbaQrTsPw6yP4';

console.log(decodeJWT(jwt));

ผลลัพท์
{sub: '1234567890', name: 'ทดสอบ ภาษาไทย', iat: 1516239022}