Şifreleme Dünyası

ŞİFRE VE ŞİFRELEME

Şifreler ve şifreleme tarih boyunca önemli bir rol oynamıştır. İnsanlar iletişimlerini korumak, gizli bilgileri paylaşmak veya verileri güvence altına almak için çeşitli şifreleme yöntemleri geliştirmişlerdir. İşte şifreler ve tarihte şifreleme hakkında bazı önemli noktalar: 

Antik Dönemlerde Şifreleme: İnsanlar, tarihin erken dönemlerinden itibaren şifreleme yöntemlerini kullanmışlardır. Örneğin, Mısırlılar ve Romalılar, belirli semboller veya harfler kullanarak metinleri şifrelemişlerdir. Bu yöntemler genellikle basit ve yerine getirilmesi kolay olsa da, dönemlerindeki iletişimlerin gizliliğini sağlamada etkili olmuşlardır. 

Şifreleme ve Ordu İletişimi: Şifreleme, askeri iletişimlerde uzun bir geçmişe sahiptir. Özellikle savaş zamanlarında, ordu birlikleri gizli bilgileri korumak ve düşmanın anlayamayacağı bir şekilde iletişim kurmak için şifreleme sistemlerini kullanmışlardır. Örneğin, II. Dünya Savaşı'nda Enigma makinesi, Almanlar tarafından kullanılan bir şifreleme cihazıdır. 

Modern Şifreleme ve Bilgisayarlar: Bilgisayar teknolojisinin gelişmesiyle birlikte, şifreleme yöntemleri de evrim geçirmiştir. Bugün, modern şifreleme algoritmaları ve protokolleri, karmaşık matematiksel işlemler kullanarak verileri korur. Örneğin, AES (Advanced Encryption Standard), RSA (Rivest-Shamir-Adleman), DES (Data Encryption Standard) gibi algoritmalar, güvenli veri iletişimi ve depolama için yaygın olarak kullanılan şifreleme yöntemleridir. 

Kriptografi: Kriptografi, şifreleme biliminin çalışma alanıdır. Kriptografi, şifreleme algoritmalarını tasarlamak, güvenlik protokolleri oluşturmak ve şifreleme sistemlerini analiz etmekle ilgilenir. Kriptografi, modern bilgi güvenliğinin temel taşlarından biridir ve özellikle internet üzerindeki veri iletişimlerini korumak için kullanılır. 

Parola Güvenliği: Şifreleme sadece verileri korumakla kalmaz, aynı zamanda parola güvenliğini de içerir. Güçlü parolalar kullanmak, hesaplarınızın veya sistemlerinizin kötü niyetli saldırılara karşı daha iyi korunmasını sağlar. Password generation (parola oluşturma) yöntemleri, güçlü, rastgele ve tahmin edilmesi zor parolaların oluşturulmasına yardımcı olur. 

Şifreler ve şifreleme, tarihte ve günümüzde gizlilik, güvenlik ve iletişimde önemli bir rol oynamaktadır. İletişimde gizlilik sağlamak, verileri korumak ve siber saldırılara karşı önlem almak için şifreleme tekniklerinin kullanılması önemlidir. 

Şimdi birlikte bir Password Generation uygulamalarına bakalım ve kendimize bir uygulama yazalım. 

Parola oluşturma, bilgisayar ve internet kullanıcıları için önemli bir güvenlik uygulamasıdır. İşte password generation (parola oluşturma) yöntemlerinin kullanım alanları ve faydaları: 

Güvenli İnternet Hesapları: Password generation, güçlü ve karmaşık parolalar oluşturmanıza yardımcı olur. Bu, online hesaplarınızın (e-posta, sosyal medya, bankacılık vb.) kötü niyetli saldırılara karşı daha güvende olmasını sağlar. 

Veri Güvenliği: Password generation, şirketlerin, kurumların veya kişisel kullanıcıların hassas verilerini korumada yardımcı olur. Özellikle veri ihlalleri ve siber saldırılar yaygın hale geldiğinde, güçlü parolalar kullanmak önemlidir. 

İnternet Bankacılığı: Banka hesaplarına çevrimiçi erişim, kullanıcı adı ve parola kombinasyonu gerektirir. Password generation, bu hesaplara daha güçlü ve güvenli erişim sağlar, dolayısıyla finansal bilgilerinizi korur. 

Wi-Fi Ağları: Kablosuz internet ağlarının güvenliği, güçlü bir parola kullanımına bağlıdır. Password generation, Wi-Fi ağınıza daha güvenli bir parola oluşturmanıza yardımcı olarak, ağınızdaki yetkisiz erişimi önleyebilir. 

Şirket Ağları: Kurumsal ağlara erişmek için kullanılan parolaların güvenli olması çok önemlidir. Password generation, şirketlerin çalışanlarının hesaplarını ve şirket verilerini korumasına yardımcı olur. 

Çevrimiçi Alışveriş: Çevrimiçi alışveriş yaptığınızda, genellikle bir hesap oluşturmanız ve parola belirlemeniz gerekebilir. Password generation, bu alışveriş hesaplarınızı koruyarak, kredi kartı bilgileriniz ve kişisel verilerinizin güvenliğini sağlar. 

Uygulama ve Cihaz Güvenliği: Akıllı telefonlar, tabletler ve diğer cihazlardaki uygulamaların ve sistemlerin güvenliği, güçlü parolaların kullanılmasına bağlıdır. Password generation, bu cihazlardaki güvenliği artırarak kişisel bilgilerinizin ve verilerinizin güvenliğini sağlar. 

Password generation, güvenlik bilincini artırır ve siber saldırılara karşı savunma mekanizmalarını güçlendirir. Bu sayede, kişisel ve hassas bilgilerinizi koruyabilir ve çevrimiçi varlığınızı daha güvenli hale getirebilirsiniz.

Şimdi şifre üretici programımızın kodlarını yazalım

Html:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Deli Tavşan --- Password Generator</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family
=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'>
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <h2>Password Generator</h2>
  <div class="wrapper">
    <div class="input-box">
      <input type="text" disabled>
      <span class="material-symbols-rounded">copy_all</span>
    </div>
    <div class="pass-indicator"></div>
    <div class="pass-length">
      <div class="details">
        <label class="title">Password Length</label>
        <span></span>
      </div>
      <input type="range" min="1" max="30" value="15" step="1">
    </div>
    <div class="pass-settings">
      <label class="title">Password Settings</label>
      <ul class="options">
        <li class="option">
          <input type="checkbox" id="lowercase" checked>
          <label for="lowercase">Lowercase (a-z)</label>
        </li>
        <li class="option">
          <input type="checkbox" id="uppercase">
          <label for="uppercase">Uppercase (A-Z)</label>
        </li>
        <li class="option">
          <input type="checkbox" id="numbers">
          <label for="numbers">Numbers (0-9)</label>
        </li>
        <li class="option">
          <input type="checkbox" id="symbols">
          <label for="symbols">Symbols (!-$^+)</label>
        </li>
        <li class="option">
          <input type="checkbox" id="exc-duplicate">
          <label for="exc-duplicate">Exclude Duplicate</label>
        </li>
        <li class="option">
          <input type="checkbox" id="spaces">
          <label for="spaces">Include Spaces</label>
        </li>
      </ul>
    </div>
    <button class="generate-btn">Generate Password</button>
  </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family
=Poppins:wght@400;500;600&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f5277c;
}
.container {
  width: 450px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.container h2 {
  font-weight: 600;
  font-size: 1.31rem;
  padding: 1rem 1.75rem;
  border-bottom: 1px solid #d4dbe5;
}
.wrapper {
  margin: 1.25rem 1.75rem;
}
.wrapper .input-box {
  position: relative;
}
.input-box input {
  width: 100%;
  height: 53px;
  color: #000;
  background: none;
  font-size: 1.06rem;
  font-weight: 500;
  border-radius: 4px;
  letter-spacing: 1.4px;
  border: 1px solid #aaa;
  padding: 0 2.85rem 0 1rem;
}
.input-box span {
  position: absolute;
  right: 13px;
  cursor: pointer;
  line-height: 53px;
  color: #707070;
}
.input-box span:hover {
  color: #4285f4 !important;
}
.wrapper .pass-indicator {
  width: 100%;
  height: 4px;
  position: relative;
  background: #dfdfdf;
  margin-top: 0.75rem;
  border-radius: 25px;
}
.pass-indicator::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 50%;
  border-radius: inherit;
  transition: width 0.3s ease;
}
.pass-indicator#weak::before {
  width: 20%;
  background: #e64a4a;
}
.pass-indicator#medium::before {
  width: 50%;
  background: #f1c80b;
}
.pass-indicator#strong::before {
  width: 100%;
  background: #4285f4;
}
.wrapper .pass-length {
  margin: 1.56rem 0 1.25rem;
}
.pass-length .details {
  display: flex;
  justify-content: space-between;
}
.pass-length input {
  width: 100%;
  height: 5px;
}
.pass-settings .options {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.pass-settings .options .option {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  width: calc(100% / 2);
}
.options .option:first-child {
  pointer-events: none;
}
.options .option:first-child input {
  opacity: 0.7;
}
.options .option input {
  height: 16px;
  width: 16px;
  cursor: pointer;
}
.options .option label {
  cursor: pointer;
  color: #4f4f4f;
  padding-left: 0.63rem;
}
.wrapper .generate-btn {
  width: 100%;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  background: #4285f4;
  font-size: 1.06rem;
  padding: 0.94rem 0;
  border-radius: 5px;
  text-transform: uppercase;
  margin: 0.94rem 0 1.3rem;
}

const lengthSlider = document.querySelector(".pass-length input"),
  options = document.querySelectorAll(".option input"),
  copyIcon = document.querySelector(".input-box span"),
  passwordInput = document.querySelector(".input-box input"),
  passIndicator = document.querySelector(".pass-indicator"),
  generateBtn = document.querySelector(".generate-btn");

const characters = {
  // object of letters, numbers & symbols
  lowercase: "abcdefghijklmnopqrstuvwxyz",
  uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  numbers: "0123456789",
  symbols: "^!$%&|[](){}:;.,*+-#@<>~"
};

const generatePassword = () => {
  let staticPassword = "",
    randomPassword = "",
    excludeDuplicate = false,
    passLength = lengthSlider.value;

  options.forEach((option) => {
    // looping through each option's checkbox
    if (option.checked) {
      // if checkbox is checked
      // if checkbox id isn't exc-duplicate && spaces
      if (option.id !== "exc-duplicate" && option.id !== "spaces") {
        // adding particular key value from character object to staticPassword
        staticPassword += characters[option.id];
      } else if (option.id === "spaces") {
        // if checkbox id is spaces
        staticPassword += `  ${staticPassword}  `; // adding space at the beginning & end of staticPassword
      } else {
        // else pass true value to excludeDuplicate
        excludeDuplicate = true;
      }
    }
  });

  for (let i = 0; i < passLength; i++) {
    // getting random character from the static password
    let randomChar =
      staticPassword[Math.floor(Math.random() * staticPassword.length)];
    if (excludeDuplicate) {
      // if excludeDuplicate is true
      // if randomPassword doesn't contains the current random character or randomChar is equal
      // to space " " then add random character to randomPassword else decrement i by -1
      !randomPassword.includes(randomChar) || randomChar == " "
        ? (randomPassword += randomChar)
        : i--;
    } else {
      // else add random character to randomPassword
      randomPassword += randomChar;
    }
  }
  passwordInput.value = randomPassword; // passing randomPassword to passwordInput value
};

const upadatePassIndicator = () => {
  // if lengthSlider value is less than 8 then pass "weak" as passIndicator id else if lengthSlider
  // value is less than 16 then pass "medium" as id else pass "strong" as id
  passIndicator.id =
    lengthSlider.value <= 8
      ? "weak"
      : lengthSlider.value <= 16
      ? "medium"
      : "strong";
};

const updateSlider = () => {
  // passing slider value as counter text
  document.querySelector(".pass-length span").innerText = lengthSlider.value;
  generatePassword();
  upadatePassIndicator();
};
updateSlider();

const copyPassword = () => {
  navigator.clipboard.writeText(passwordInput.value); // copying random password
  copyIcon.innerText = "check"; // changing copy icon to tick
  copyIcon.style.color = "#4285F4";
  setTimeout(() => {
    // after 1500 ms, changing tick icon back to copy
    copyIcon.innerText = "copy_all";
    copyIcon.style.color = "#707070";
  }, 1500);
};

copyIcon.addEventListener("click", copyPassword);
lengthSlider.addEventListener("input", updateSlider);
generateBtn.addEventListener("click", generatePassword);