> 웹 프론트엔드 > JS 튜토리얼 > 나만의 보안 종자 문구 생성기 만들기

나만의 보안 종자 문구 생성기 만들기

WBOY
풀어 주다: 2024-07-30 11:50:51
원래의
935명이 탐색했습니다.

언급된 코드는 내 Github에서 확인할 수 있습니다
이전 게시물에서 저는 NodeJs Vesion of Seed Phrase Generator를 작성했습니다. 여기서는 브라우저 버전을 생성하겠습니다.

개발자로서 우리는 기본 프로그래밍 개념 이상을 생각해야 하는 문제에 자주 직면합니다. 오늘 저는 암호화폐 및 블록체인 기술 세계에서 중요한 도구인 안전한 시드 문구 생성기를 구축한 경험을 공유하고 싶습니다. 이 프로젝트를 통해 암호화, 사용자 상호 작용, 보안 애플리케이션에서 임의성의 중요성에 대한 귀중한 교훈을 얻었습니다.

진정한 무작위성의 중요성

시드 문구를 생성할 때는 무작위성의 품질이 가장 중요합니다. 오래 전에 저는 JavaScript의 Math.random()을 사용했지만 이것이 암호화 목적으로는 충분히 안전하지 않다는 것을 금방 깨달았습니다. 제가 착륙한 곳은 다음과 같습니다.

function generateCustomRandomBytes(byteLength, mouseMoves) {
    const customBytes = new Uint8Array(byteLength);
    window.crypto.getRandomValues(customBytes);

    const mouseHash = new Uint32Array(mouseMoves);
    for (let i = 0; i < byteLength; i++) {
        customBytes[i] ^= mouseHash[i % mouseHash.length] & 0xFF;
    }

    return customBytes;
}
로그인 후 복사

이 함수는 window.crypto.getRandomValues()의 암호화된 보안 임의 값과 마우스 움직임을 통해 사용자가 생성한 엔트로피를 결합합니다. XOR 연산은 두 소스가 모두 최종 무작위성에 기여하도록 보장합니다.

보안 강화를 위한 사용자 상호작용 유도

나는 임의성 생성 과정에 사용자를 참여시키기로 결정했습니다. 마우스 움직임을 추적함으로써 엔트로피를 높일 뿐만 아니라 사용자의 참여를 유도하여 보안 프로세스에 적극적으로 참여하게 합니다.

시각적 피드백 제공

Building your own Secure Seed Phrase Generator

사용자에게 지속적인 정보와 참여를 제공하기 위해 단순히 경과 시간이 아닌 실제 마우스 움직임을 반영하는 진행률 표시줄을 구현했습니다.

function updateProgressBar() {
    const progress = Math.min((mouseMoves.length / 3) / requiredMoves * 100, 100);
    document.getElementById('progressBar').style.width = progress + '%';

    if (progress >= 100 && collecting) {
        stopRandomCollection();
    } else if (collecting) {
        requestAnimationFrame(updateProgressBar);
    }
}
로그인 후 복사

이 접근 방식은 실시간 피드백을 제공하여 충분한 엔트로피가 수집될 때까지 사용자가 마우스를 움직이도록 권장합니다.

민감한 데이터 보호

한 가지 중요한 교훈은 민감한 데이터 보호의 중요성이었습니다. 처음에는 악성 스크립트가 잠재적으로 접근할 수 있는 전역 변수에 마우스 움직임 데이터를 저장했습니다. 클로저를 사용하여 이 문제를 해결했습니다.

(function() {
    let mouseMoves = [];
    // ... other variables and functions ...

    function stopRandomCollection() {
        // ... other code ...
        generateSeedPhrase(mouseMoves);
        mouseMoves = []; // Clear sensitive data after use
    }
    // ... rest of the code ...
})();
로그인 후 복사

이 접근 방식은 민감한 데이터를 캡슐화하여 전역 범위에서 액세스할 수 없도록 유지합니다.

시드 문구 생성기를 안전하게 실행하기

시드 구문 생성기 사용 시 가장 중요한 측면 중 하나는 프로세스가 완전히 오프라인이고 안전한지 확인하는 것입니다. 다음은 이 코드를 안전하게 실행하는 방법에 대한 단계별 가이드입니다.

  1. 새 텍스트 파일 만들기: 선호하는 텍스트 편집기(예: Windows의 메모장, Mac의 TextEdit)를 엽니다.
  2. 코드 복사하여 붙여넣기: 시드 구문 생성기의 전체 HTML 코드를 복사하여 이 새 텍스트 파일에 붙여넣습니다.
  3. .html 확장자로 파일을 저장하세요. "seed_phrase_generator.html"과 같은 이름으로 파일을 저장합니다. 파일 확장자를 .txt에서 .html로 변경했는지 확인하세요. 대부분의 텍스트 편집기에서는 "파일 형식" 드롭다운에서 "모든 파일"을 선택한 다음 파일 이름 끝에 .html을 추가하면 됩니다.

인터넷 연결을 끊습니다.

계속하기 전에 컴퓨터를 인터넷에서 연결 해제하세요. 이렇게 하면 시드 문구 생성 프로세스 중에 데이터가 전송되지 않습니다.
브라우저에서 파일 실행:
저장된 .html 파일을 두 번 클릭하여 기본 웹 브라우저에서 엽니다. 이제 시드 문구 생성기가 귀하의 컴퓨터에서 로컬로 실행될 것입니다.
시드 문구 생성:
화면의 지시에 따라 시드 문구를 생성하세요.
시드 문구를 안전하게 보관하세요:
생성되면 시드 문구를 종이에 적어보세요. 절대로 디지털 방식으로 저장하지 마세요.

Image description

브라우저를 닫고 파일을 삭제합니다.

시드 문구를 안전하게 기록한 후 브라우저를 닫고 .html 파일을 삭제하세요.

왜 오프라인으로 실행해야 하나요?

이 코드를 오프라인으로 실행하는 것은 여러 가지 이유로 중요합니다.

보안: 인터넷을 통해 시드 문구가 전송될 가능성을 방지합니다.
개인 정보 보호: 제3자 스크립트나 추적기가 프로세스를 방해할 수 없도록 보장합니다.
무결성: 외부 수정 없이 코드가 의도한 대로 정확하게 실행되도록 보장합니다.

기억하세요: 시드 문구는 디지털 자산의 핵심입니다. 생성하고 저장할 때 항상 보안을 우선시하세요. 이 생성기를 오프라인으로 실행하는 것은 자산을 보호하는 데 중요한 단계입니다.

보안과 사용자 경험의 균형

보안 시드 문구 생성기를 구축하는 것은 단순한 코드 작성 그 이상입니다. 암호화 원리를 이해하고, 사용자 상호 작용을 소중히 여기며, 항상 보안을 우선시하는 것이 중요합니다. 개발자로서 이러한 프로젝트는 우리가 작성하는 모든 코드 줄과 그에 따른 잠재적인 영향에 대해 비판적으로 생각하게 만듭니다.

Github 링크는 다음과 같습니다. 자유롭게 복제하세요

위 내용은 나만의 보안 종자 문구 생성기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿