Как поместить хэш SHA256 в элемент ввода HTML (<input type text="text"></input>

Мне интересно, как поместить хэш SHA256 во входной элемент HTML. Также отметим, что я использую отдельную функцию JS для получения значения, которое будет хэшировано в SHA256.

Я использую эту функцию SHA256:

function sha256(ascii) {
    function rightRotate(value, amount) {
        return (value>>>amount) | (value<<(32 - amount));
    };
    
    var mathPow = Math.pow;
    var maxWord = mathPow(2, 32);
    var lengthProperty = 'length'
    var i, j;
    var result = ''
  
    var words = [];
    var asciiBitLength = ascii[lengthProperty]*8;
    
    var hash = sha256.h = sha256.h || [];
    var k = sha256.k = sha256.k || [];
    var primeCounter = k[lengthProperty];
  
    var isComposite = {};
    for (var candidate = 2; primeCounter < 64; candidate++) {
        if (!isComposite[candidate]) {
            for (i = 0; i < 313; i += candidate) {
                isComposite[i] = candidate;
            }
            hash[primeCounter] = (mathPow(candidate, .5)*maxWord)|0;
            k[primeCounter++] = (mathPow(candidate, 1/3)*maxWord)|0;
        }
    }
    
    ascii += '\x80'
    while (ascii[lengthProperty]%64 - 56) ascii += '\x00' 
    for (i = 0; i < ascii[lengthProperty]; i++) {
        j = ascii.charCodeAt(i);
        if (j>>8) return; 
        words[i>>2] |= j << ((3 - i)%4)*8;
    }
    words[words[lengthProperty]] = ((asciiBitLength/maxWord)|0);
    words[words[lengthProperty]] = (asciiBitLength)
    
    for (j = 0; j < words[lengthProperty];) {
        var w = words.slice(j, j += 16); 
        var oldHash = hash;
        hash = hash.slice(0, 8);
        
        for (i = 0; i < 64; i++) {
            var i2 = i + j;
            var w15 = w[i - 15], w2 = w[i - 2];
            var a = hash[0], e = hash[4];
            var temp1 = hash[7]
                + (rightRotate(e, 6) ^ rightRotate(e, 11) ^ rightRotate(e, 25)) // S1
                + ((e&hash[5])^((~e)&hash[6])) // ch
                + k[i]
                + (w[i] = (i < 16) ? w[i] : (
                        w[i - 16]
                        + (rightRotate(w15, 7) ^ rightRotate(w15, 18) ^ (w15>>>3)) // s0
                        + w[i - 7]
                        + (rightRotate(w2, 17) ^ rightRotate(w2, 19) ^ (w2>>>10)) // s1
                    )|0
                );
            var temp2 = (rightRotate(a, 2) ^ rightRotate(a, 13) ^ rightRotate(a, 22)) // S0
                + ((a&hash[1])^(a&hash[2])^(hash[1]&hash[2])); // maj
            
            hash = [(temp1 + temp2)|0].concat(hash);
            hash[4] = (hash[4] + temp1)|0;
        }
        
        for (i = 0; i < 8; i++) {
            hash[i] = (hash[i] + oldHash[i])|0;
        }
    }
    
    for (i = 0; i < 8; i++) {
        for (j = 3; j + 1; j--) {
            var b = (hash[i]>>(j*8))&255;
            result += ((b < 16) ? 0 : '') + b.toString(16);
        }
    }
    return result;
  };
  document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('teststring').value = sha256(maketeststring(20));
    const saveHash = sha256(maketeststring(20));
    console.info(saveHash);
  });

Это моя отдельная функция JS для получения переменной maketeststring:

function maketeststring(length) {
    let result = '';
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const charactersLength = characters.length;
    let counter = 0;
    while (counter < length) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
      counter += 1;
    }
    return result;
}
console.info(maketeststring(20));

А это мой входной код HTML-элемента:

<input class = "test_string" id = "teststring" type = "text" readonly></input>

Я хочу, чтобы переменная maketeststring отображалась в консоли и помещала хэш SHA256 от maketeststring в качестве входного значения, поэтому, когда я хочу проверить хешированные и нехешированные значения, они совпадают. (то же значение maketeststring должно использоваться для получения хэша SHA256 и отображаться в консоли отладки.) Заранее спасибо!

Каждый вызов maketeststring() создает другую строку. Таким образом, saveHash не будет совпадать с хэшем во входных данных teststring.

Barmar 31.05.2024 00:34

вам следует вызвать sha256(maketeststring(20)) только один раз и поставить его в обоих местах.

Barmar 31.05.2024 00:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
61
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам следует просто создать одну случайную строку, а не две разные.

document.addEventListener('DOMContentLoaded', () => {
  const saveHash = sha256(maketeststring(20));
  document.getElementById('teststring').value = saveHash;
  console.info(saveHash);
});

function maketeststring(length) {
  let result = '';
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const charactersLength = characters.length;
  let counter = 0;
  while (counter < length) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
    counter += 1;
  }
  return result;
}

function sha256(ascii) {
  function rightRotate(value, amount) {
    return (value >>> amount) | (value << (32 - amount));
  };

  var mathPow = Math.pow;
  var maxWord = mathPow(2, 32);
  var lengthProperty = 'length'
  var i, j;
  var result = ''

  var words = [];
  var asciiBitLength = ascii[lengthProperty] * 8;

  var hash = sha256.h = sha256.h || [];
  var k = sha256.k = sha256.k || [];
  var primeCounter = k[lengthProperty];

  var isComposite = {};
  for (var candidate = 2; primeCounter < 64; candidate++) {
    if (!isComposite[candidate]) {
      for (i = 0; i < 313; i += candidate) {
        isComposite[i] = candidate;
      }
      hash[primeCounter] = (mathPow(candidate, .5) * maxWord) | 0;
      k[primeCounter++] = (mathPow(candidate, 1 / 3) * maxWord) | 0;
    }
  }

  ascii += '\x80'
  while (ascii[lengthProperty] % 64 - 56) ascii += '\x00'
  for (i = 0; i < ascii[lengthProperty]; i++) {
    j = ascii.charCodeAt(i);
    if (j >> 8) return;
    words[i >> 2] |= j << ((3 - i) % 4) * 8;
  }
  words[words[lengthProperty]] = ((asciiBitLength / maxWord) | 0);
  words[words[lengthProperty]] = (asciiBitLength)

  for (j = 0; j < words[lengthProperty];) {
    var w = words.slice(j, j += 16);
    var oldHash = hash;
    hash = hash.slice(0, 8);

    for (i = 0; i < 64; i++) {
      var i2 = i + j;
      var w15 = w[i - 15],
        w2 = w[i - 2];
      var a = hash[0],
        e = hash[4];
      var temp1 = hash[7] +
        (rightRotate(e, 6) ^ rightRotate(e, 11) ^ rightRotate(e, 25)) // S1
        +
        ((e & hash[5]) ^ ((~e) & hash[6])) // ch
        +
        k[i] +
        (w[i] = (i < 16) ? w[i] : (
          w[i - 16] +
          (rightRotate(w15, 7) ^ rightRotate(w15, 18) ^ (w15 >>> 3)) // s0
          +
          w[i - 7] +
          (rightRotate(w2, 17) ^ rightRotate(w2, 19) ^ (w2 >>> 10)) // s1
        ) | 0);
      var temp2 = (rightRotate(a, 2) ^ rightRotate(a, 13) ^ rightRotate(a, 22)) // S0
        +
        ((a & hash[1]) ^ (a & hash[2]) ^ (hash[1] & hash[2])); // maj

      hash = [(temp1 + temp2) | 0].concat(hash);
      hash[4] = (hash[4] + temp1) | 0;
    }

    for (i = 0; i < 8; i++) {
      hash[i] = (hash[i] + oldHash[i]) | 0;
    }
  }

  for (i = 0; i < 8; i++) {
    for (j = 3; j + 1; j--) {
      var b = (hash[i] >> (j * 8)) & 255;
      result += ((b < 16) ? 0 : '') + b.toString(16);
    }
  }
  return result;
};
<input class = "test_string" id = "teststring" type = "text" readonly></input>

Итак, вы предлагаете мне изменить это в моей функции SHA256 JS, и это должно работать?

jordimetil 31.05.2024 00:39

вам не нужно вносить какие-либо изменения в функцию sha256(). Это вызов функции.

Barmar 31.05.2024 00:39

К sha256() это вообще не имеет никакого отношения. Проблема в том, что вы вызываете maketeststring() несколько раз, и каждый раз получается новая случайная строка. Таким образом, вы получаете разные хеши.

Barmar 31.05.2024 00:40

Да, когда я пытаюсь проверить как хешированные, так и нехешированные значения, они не совпадают, потому что одна строка используется для хеширования, а другая строка используется для отображения в консоли. Можете ли вы помочь мне решить эту проблему, так как я новичок в этом?

jordimetil 31.05.2024 00:44

Мой ответ должен был решить эту проблему. Есть только одно хешированное значение, и оно помещается в значение и в консоль.

Barmar 31.05.2024 00:45

У меня это не работает, хэш SHA256 отображается как значение в элементе ввода и в консоли. Но когда я пытаюсь проверить хешированное и нехешированное значение, оно не совпадает. «ba1858e293dff0fad09067eaa2da1d11256c40ec14701f604327d54b1cc‌​52887» — это мой хеш SHA256, отображаемый в консоли и отображаемый как входное значение, а это результат моей переменной «gt5Hi9LDHntgniIY9Vim» «maketeststring». Вы можете убедиться, что это значение хэша maketeststring не совпадает с моим хешем SHA256, отображаемым в качестве входного значения. На самом деле это моя проблема.

jordimetil 31.05.2024 00:53

Откуда вы берете нехешированное значение? Если вы позвоните maketeststring() еще раз, вы получите другое нехешированное значение.

Barmar 31.05.2024 01:01

Возможно, вам следует изменить maketeststring(), чтобы он не был случайным и вы получали одно и то же значение каждый раз, когда вызываете его.

Barmar 31.05.2024 01:02

Я хочу получать новый результат maketeststring всякий раз, когда обновляю свой веб-сайт, поэтому входное значение будет автоматически меняться при обновлении веб-сайта, поскольку maketeststring — это строка, которая используется для хеширования. Можете ли вы помочь мне сохранить неизменность maketeststring в одном сеансе (чтобы одна и та же строка отображалась на консоли и использовалась для хэша)?

jordimetil 31.05.2024 01:11

Похоже, вам нужно сохранить это в глобальной переменной и использовать в остальной части кода.

Barmar 31.05.2024 01:14

Да, но как я могу это сделать? Сохранить одну строку только для этого сеанса?

jordimetil 31.05.2024 01:18

Знаете ли вы, как использовать глобальные переменные? Если вы хотите, чтобы это было на нескольких страницах в сеансе, используйте sessionStorage

Barmar 31.05.2024 01:19

Зачем вообще вы хэшируете в клиенте? Если это пароль, его следует хешировать на сервере, а не на клиенте.

Barmar 31.05.2024 01:20

Спасибо за помощь, очень ценю это, и я специально хеширую это на клиенте, это не пароль :D

jordimetil 31.05.2024 01:26

Другие вопросы по теме