Почему мой генератор случайных паролей генерирует больше, чем сколько символов мне нужно?

Question

Я делаю генератор случайных паролей с JavaScript, и он генерирует больше символов, чем необходимо. Поясню после показа кода:

function gen() {
  var symbol = document.getElementById("symbolsCB");
  var number = document.getElementById("numbersCB");
  var upper = document.getElementById("uppersCB");
  var length = document.getElementById("numberOfChars").value;
  var op = document.getElementById("outputBox");
  var list = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
  for (var i = 0; i < length; i++) {
    if (symbol.checked == true) {
      var symbols = ["?", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", ",", ".", "+", "=", "[", "]", "{", "}", ";", ":", "<", ">"];
      symbols.push.apply(list, symbols);
      let char = list[Math.floor(Math.random() * list.length)];
      op.value = op.value + char;
    }
    if (number.checked == true) {
      var numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
      numbers.push.apply(list, numbers);
      let char = list[Math.floor(Math.random() * list.length)];
      op.value = op.value + char;
    }
    if (upper.checked == true) {
      var uppers = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
      uppers.push.apply(list, uppers);
      let char = list[Math.floor(Math.random() * list.length)];
      op.value = op.value + char;
    }
    if (symbol.checked == false && number.checked == false && upper.checked == false) {
      let char = list[Math.floor(Math.random() * list.length)];
      op.value = op.value + char;
    }
  }
}

<input type="checkbox" name="numbers" id="numbersCB" class="cb">
<label for="numbers"> Include Numbers </label>
<br/>
<input type="checkbox" name="uppers" id="uppersCB" class="cb">
<label for="uppers"> Include Uppercase Letters </label>
<br/>
<input type="checkbox" name="symbols" id="symbolsCB" class="cb">
<label for="symbols"> Include Symbols (@, #, $, %) </label>
<br/>
<input type="text" id="numberOfChars" name="numberOfChars" placeholder="Length of password...">
<br/>
<button onclick="gen()"> Generate Random Password </button>

<input type="text" id="outputBox" name="outputBoxName" disabled="disabled">

Например, если я поставлю 7 для длины и отмечу все 3 поля, я получу 21. И, если я поставлю 10 для длины и отмечу 2 коробки появляются 20 знаков. Вы получите выкройку. Объясните, почему это происходит, и расскажите, как это исправить. Спасибо

Answer 1

Ваша проблема заключается в том, что при каждом проходе через l oop вы проверяете, установлены ли флажки, и для каждого установленного флажка вы обновляете список и добавляете символ к паролю. Вместо этого проверьте флажки перед l oop и обновите свой список на их основе; затем генерировать один символ при каждом проходе через l oop.

function gen() {
  var symbol = document.getElementById("symbolsCB");
  var number = document.getElementById("numbersCB");
  var upper = document.getElementById("uppersCB");
  var length = document.getElementById("numberOfChars").value;
  var op = document.getElementById("outputBox");
  op.value = '';
  var list = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
  if (symbol.checked == true) {
    var symbols = ["?", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", ",", ".", "+", "=", "[", "]", "{", "}", ";", ":", "<", ">"];
    symbols.push.apply(list, symbols);
  }
  if (number.checked == true) {
    var numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
    numbers.push.apply(list, numbers);
  }
  if (upper.checked == true) {
    var uppers = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
    uppers.push.apply(list, uppers);
  }
  for (var i = 0; i < length; i++) {
    let char = list[Math.floor(Math.random() * list.length)];
    op.value = op.value + char;
  }
}

<input type="checkbox" name="numbers" id="numbersCB" class="cb">
<label for="numbers"> Include Numbers </label>
<br/>
<input type="checkbox" name="uppers" id="uppersCB" class="cb">
<label for="uppers"> Include Uppercase Letters </label>
<br/>
<input type="checkbox" name="symbols" id="symbolsCB" class="cb">
<label for="symbols"> Include Symbols (@, #, $, %) </label>
<br/>
<input type="text" id="numberOfChars" name="numberOfChars" placeholder="Length of password...">
<br/>
<button onclick="gen()"> Generate Random Password </button>

<input type="text" id="outputBox" name="outputBoxName" disabled="disabled">

Answer 2

Во-первых, я предполагаю, что это упражнение чисто академическое c. Это не лучший способ генерации паролей, потому что случайный алгоритм не является криптографически безопасным .

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

Итак, в псевдокоде вы будете смотреть примерно так: полностью заполнен - ​​сделайте это за l oop, чтобы выбрать из него случайные символы, как сейчас.