yubikey-nfc-id-calculator.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>YubiKey NFC-ID Calculator</title>
  7. <style>
  8. body {
  9. font-family: Arial, sans-serif;
  10. max-width: 600px;
  11. margin: 50px auto;
  12. padding: 20px;
  13. }
  14. .container {
  15. border: 1px solid #ccc;
  16. padding: 20px;
  17. border-radius: 5px;
  18. }
  19. label {
  20. display: block;
  21. margin-bottom: 10px;
  22. font-weight: bold;
  23. }
  24. input {
  25. width: 100%;
  26. padding: 8px;
  27. margin-bottom: 15px;
  28. box-sizing: border-box;
  29. font-size: 14px;
  30. }
  31. button {
  32. padding: 10px 20px;
  33. background-color: #007bff;
  34. color: white;
  35. border: none;
  36. border-radius: 4px;
  37. cursor: pointer;
  38. font-size: 14px;
  39. }
  40. button:hover {
  41. background-color: #0056b3;
  42. }
  43. .output {
  44. margin-top: 20px;
  45. padding: 15px;
  46. background-color: #f5f5f5;
  47. border-radius: 4px;
  48. font-family: monospace;
  49. }
  50. .output-label {
  51. font-weight: bold;
  52. margin-bottom: 5px;
  53. }
  54. .output-value {
  55. font-size: 16px;
  56. word-break: break-all;
  57. }
  58. .error {
  59. color: red;
  60. margin-top: 10px;
  61. }
  62. </style>
  63. </head>
  64. <body>
  65. <div class="container">
  66. <h1>YubiKey NFC-ID Calculator</h1>
  67. <p>Enter a YubiKey serial number (decimal) to calculate its NFC-ID (v5.3.0+ format).</p>
  68. <label for="serialNumber">Serial Number (Decimal):</label>
  69. <input type="number" id="serialNumber" placeholder="e.g., 23852733" min="0" step="1">
  70. <button onclick="calculateNFCID()">Calculate NFC-ID</button>
  71. <div id="output"></div>
  72. <div id="error" class="error"></div>
  73. </div>
  74. <script>
  75. function calculateNFCID() {
  76. const serialInput = document.getElementById('serialNumber').value;
  77. const errorDiv = document.getElementById('error');
  78. const outputDiv = document.getElementById('output');
  79. // Clear previous output
  80. errorDiv.textContent = '';
  81. outputDiv.innerHTML = '';
  82. // Validate input
  83. if (!serialInput || serialInput.trim() === '') {
  84. errorDiv.textContent = 'Please enter a serial number.';
  85. return;
  86. }
  87. const serialNumber = parseInt(serialInput, 10);
  88. if (isNaN(serialNumber) || serialNumber < 0) {
  89. errorDiv.textContent = 'Please enter a valid positive number.';
  90. return;
  91. }
  92. // Convert to hex and pad to 8 characters (4 bytes)
  93. let hexString = serialNumber.toString(16).toLowerCase();
  94. hexString = hexString.padStart(8, '0');
  95. // Extract the 4 bytes
  96. // serial_0 is most significant (leftmost), serial_3 is least significant (rightmost)
  97. const serial_0 = hexString.substring(0, 2);
  98. const serial_1 = hexString.substring(2, 4);
  99. const serial_2 = hexString.substring(4, 6);
  100. const serial_3 = hexString.substring(6, 8);
  101. // Calculate NFC-ID according to formula:
  102. // 0x88 0x27 serial_3 serial_2 serial_1 serial_0 serial_2 serial_3
  103. // Based on user example, they want: 27 serial_3 serial_2 serial_1 serial_0 serial_2 serial_3
  104. const nfcId = '27' + serial_3 + serial_2 + serial_1 + serial_0 + serial_2 + serial_3;
  105. // Display results
  106. outputDiv.innerHTML = `
  107. <div class="output">
  108. <div class="output-label">Serial Number (Hex):</div>
  109. <div class="output-value">${hexString}</div>
  110. </div>
  111. <div class="output">
  112. <div class="output-label">NFC-ID:</div>
  113. <div class="output-value">${nfcId}</div>
  114. </div>
  115. `;
  116. }
  117. // Allow Enter key to trigger calculation
  118. document.getElementById('serialNumber').addEventListener('keypress', function(e) {
  119. if (e.key === 'Enter') {
  120. calculateNFCID();
  121. }
  122. });
  123. </script>
  124. </body>
  125. </html>