<title>Система генерации и анализа криптостойкости — РТУ МИРЭА</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <style> :root { --primary: #004182; --bg: #f4f7f9; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg); color: #333; line-height: 1.6; padding: 20px; } .container { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .card { background: white; padding: 25px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); } h1, h2 { color: var(--primary); margin-top: 0; } .full-width { grid-column: 1 / -1; }

    /* Стили генератора */
    .result-box { display: flex; gap: 10px; margin: 20px 0; }
    .result-box input { flex-grow: 1; padding: 12px; border: 2px solid #ddd; border-radius: 8px; font-family: monospace; font-size: 1.2rem; }
    button { background: var(--primary); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; transition: 0.3s; }
    button:hover { opacity: 0.9; transform: translateY(-2px); }
    
    /* Стили визуализации */
    .metric { margin-bottom: 15px; padding: 10px; background: #f9f9f9; border-left: 4px solid var(--primary); }
    .progress-container { background: #eee; height: 12px; border-radius: 6px; overflow: hidden; margin: 10px 0; }
    .progress-bar { height: 100%; transition: 0.5s ease-out; }
    
    .theory-block { font-size: 0.9rem; color: #666; }
    code { background: #eee; padding: 2px 5px; border-radius: 4px; }
</style>

Программный комплекс оценки криптостойкости

Студент: Макаревский Д. А. | Группа: ИКБО-11-25

<section class="card">
    <h2>Настройки модели</h2>
    <div class="result-box">
        <input readonly :value="password" placeholder="Пароль появится здесь" />
        <button @click="generate">Создать</button>
    </div>

    <div class="controls">
        <label>Длина последовательности (L): <strong>{{ length }}</strong></label>
        <input type="range" v-model.number="length" min="4" max="128" style="width: 100%" />
        
        <div style="margin-top: 20px;">
            <p>Используемые наборы символов:</p>
            <label><input type="checkbox" v-model="settings.lower" /> Строчные (a-z)</label><br>
            <label><input type="checkbox" v-model="settings.upper" /> Прописные (A-Z)</label><br>
            <label><input type="checkbox" v-model="settings.nums" /> Цифры (0-9)</label><br>
            <label><input type="checkbox" v-model="settings.syms" /> Спецсимволы (!@#$)</label>
        </div>
    </div>
</section>

<section class="card">
    <h2>Математический анализ</h2>
    
    <div class="metric">
        <strong>Мощность алфавита (R):</strong> {{ charsetSize }} символов
    </div>
    
    <div class="metric">
        <strong>Информационная энтропия (H):</strong> {{ entropy }} бит
        <div class="progress-container">
            <div class="progress-bar" :style="{ width: Math.min(entropy, 100) + '%', backgroundColor: strengthColor }"></div>
        </div>
        <small>Статус: <strong>{{ strengthText }}</strong></small>
    </div>

    <div class="metric">
        <strong>Сложность перебора (N):</strong><br>
        <span style="font-size: 0.8rem;">~10^{{ Math.floor(Math.log10(combinations)) }} комбинаций</span>
    </div>

    <div class="theory-block">
        <h3>Теоретическая справка</h3>
        <p>Расчет ведется по формуле Хартли: H = n \cdot \log_2(R).</p>
        <p>Для генерации используется <code>Web Crypto API</code>, обеспечивающий высокую степень энтропии.</p>
    </div>
</section>

<footer class="full-width card">
    <h3>Описание алгоритма для учебной практики</h3>
    <p>Данное ПО визуализирует математическую модель зависимости стойкости пароля от мощности алфавита и его длины. Рост сложности является <strong>экспоненциальным</strong>, что наглядно демонстрирует показатель энтропии Шеннона.</p>
</footer>

<script> const { createApp, ref, computed } = Vue createApp({ setup() { const length = ref(16) const password = ref('') const settings = ref({ lower: true, upper: true, nums: true, syms: false }) const charsetSize = computed(() => { let size = 0 if (settings.value.lower) size += 26 if (settings.value.upper) size += 26 if (settings.value.nums) size += 10 if (settings.value.syms) size += 32 return size || 1 }) const combinations = computed(() => Math.pow(charsetSize.value, length.value)) const entropy = computed(() => { return Math.floor(length.value * Math.log2(charsetSize.value)) }) const strengthText = computed(() => { if (entropy.value < 45) return 'Критически низкая' if (entropy.value < 75) return 'Средняя (уязвимо)' if (entropy.value < 100) return 'Высокая' return 'Абсолютная (рекомендуется)' }) const strengthColor = computed(() => { if (entropy.value < 45) return '#e74c3c' if (entropy.value < 75) return '#f1c40f' if (entropy.value < 100) return '#3498db' return '#2ecc71' }) const generate = () => { let charset = "" if (settings.value.lower) charset += "abcdefghijklmnopqrstuvwxyz" if (settings.value.upper) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ" if (settings.value.nums) charset += "0123456789" if (settings.value.syms) charset += "!@#$%^&*()_+~`|}{[]:;?><,./-=" let res = "" const values = new Uint32Array(length.value) window.crypto.getRandomValues(values) for (let i = 0; i < length.value; i++) { res += charset[values[i] % charset.length] } password.value = res } return { length, password, settings, charsetSize, entropy, combinations, strengthText, strengthColor, generate } } }).mount('#app') </script>