Учет понятия об информационной безопасности при создании комплексных информационных объектов в виде веб-страниц
Цели и задачи
- Цель: научиться выявлять потенциальные угрозы информационной безопасности при проектировании веб-страниц и применять базовые методы защиты данных в коде HTML/CSS.
- Образовательная задача: изучить виды уязвимостей веб-объектов (фишинг, внедрение кода) и способы их предотвращения (валидация форм, использование защищенных протоколов).
- Развивающая задача: развивать навыки критического анализа информационных объектов и умение работать в режиме многозадачности (кодинг + аудит безопасности).
- Воспитательная задача: формировать ответственное отношение к персональным данным и соблюдению законодательства РФ в области ИТ.
Планируемые результаты
Личностные
- Осознание важности соблюдения этических и правовых норм при работе с информацией в сети Интернет.
- Готовность к саморазвитию в области кибербезопасности как части профессионального самоопределения.
- Установка на безопасный и здоровый образ жизни в цифровой среде.
Метапредметные
- Познавательные: умение выделять главное в тексте, структурировать знания об угрозах, строить логические цепи рассуждений.
- Регулятивные: способность планировать этапы создания веб-объекта с учетом требований безопасности, осуществлять самоконтроль кода.
- Коммуникативные: умение эффективно взаимодействовать в паре и группе при проведении аудита безопасности.
Предметные
- Знание понятий: конфиденциальность, целостность и доступность информации в контексте веб-разработки.
- Умение различать HTTP и HTTPS, понимать роль SSL-сертификатов.
- Владение навыками создания безопасных форм ввода данных на HTML (атрибуты типа данных, обязательность заполнения).
Универсальные учебные действия (УУД)
Личностные УУД
- Смыслообразование: понимание связи между качеством кода веб-страницы и сохранностью личных финансов или репутации пользователя.
- Нравственно-этическая ориентация в вопросах использования чужого контента на своих страницах.
Регулятивные УУД
- Целеполагание как постановка учебной задачи на основе соотнесения того, что уже известно (создание страниц), и того, что еще неизвестно (защита этих страниц).
- Коррекция: внесение изменений в код страницы после обнаружения уязвимости.
Познавательные УУД
- Моделирование: создание схемы потоков данных от пользователя к серверу для выявления точек перехвата информации.
- Поиск и выделение необходимой информации из ЭОР.
Коммуникативные УУД
- Управление поведением партнера: контроль, коррекция и оценка действий напарника при парном программировании.
- Умение полно и точно выражать свои мысли в соответствии с задачами коммуникации.
Подготовка учителя к уроку
- Подготовить презентацию с примерами реальных фишинговых страниц и скриншотами предупреждений браузера о небезопасном соединении.
- Распечатать чек-листы для аудита веб-страниц (по 1 на парту, 15 шт.).
- Загрузить на рабочие столы компьютеров заготовку HTML-файла с намеренно допущенными ошибками безопасности (форма без валидации, открытые скрипты).
- Проверить работоспособность локальной сети и доступ к онлайн-редактору кода (например, CodePen или аналоги).
- Подготовить стикеры трех цветов для этапа рефлексии.
Ход урока
Этап 1. Мотивация и самоопределение (3 мин)
Цель этапа: вызвать интерес к теме через актуальный жизненный контекст и создать эмоциональный настрой.
Время | Действие учителя | Действие учеников |
|---|---|---|
3 мин | Учитель: "Ребята, представьте ситуацию: вы создали отличный интернет-магазин кроссовок для своего проекта. За ночь у вас появилось 100 заказов, но утром вы обнаружили, что база данных пуста, а ваши покупатели жалуются на списание денег с карт. Как вы думаете, что пошло не так? Мы умеем верстать красивые страницы, но умеем ли мы делать их безопасными? Сегодня мы примерим на себя роль 'белых хакеров' и специалистов по кибербезопасности." | Ученики слушают, предлагают варианты: "Сайт взломали", "Данные украли через форму оплаты", "Пароль был слишком простой". Осознают важность темы для защиты собственных будущих проектов. |
Завершение этапа: учитель подводит итог: "Верно, красота сайта ничего не стоит, если он крадет данные пользователей. Сегодня мы научимся строить цифровую крепость."
Этап 2. Актуализация знаний (5 мин)
Цель этапа: повторить базовые понятия веб-технологий и связать их с задачами ОГЭ по информатике.
Время | Действие учителя | Действие учеников |
|---|---|---|
5 мин | Учитель проводит фронтальный опрос: "Давайте вспомним, из чего состоит адрес веб-страницы. Посмотрите на экран (выводит адрес: http://school-site.ru/login.html). Какие части здесь могут быть уязвимы? Вспомните задание ОГЭ №7 на кодирование адреса. Если мы заменим протокол http на https, что изменится для пользователя? Кто помнит, какой тег отвечает за создание полей ввода на странице?" | Ученики отвечают: "Протокол, домен, файл. HTTPS шифрует данные, это безопаснее". Вспоминают тег . Один ученик у доски собирает структуру URL-адреса из предложенных фрагментов, аналогично заданию ОГЭ. |
Завершение этапа: учитель подводит итог: "Отлично, базу мы помним. Но протокол — это только входная дверь. Давайте посмотрим, какие ловушки могут ждать внутри дома."
Посмотрите план целиком
Зарегистрируйтесь — и откройте план урока по этой теме полностью: цели, ход урока и рефлексия по ФГОС.
Этап 3. Постановка проблемы и выявление затруднения (4 мин)
Цель этапа: продемонстрировать уязвимость стандартной веб-формы и сформулировать цель урока.
Время | Действие учителя | Действие учеников |
|---|---|---|
4 мин | Учитель демонстрирует на экране простую форму регистрации (Имя, Пароль, Кнопка). "Я ввожу в поле 'Имя' не текст, а кусочек вредоносного кода (скрипт). Смотрите, страница выдала ошибку и 'упала'. Почему это произошло? Мы не ограничили пользователя в том, что он может вводить. Какую цель мы поставим перед собой, чтобы наши сайты не ломались от одной строчки текста?" | Ученики наблюдают за демонстрацией, удивляются простоте 'взлома'. Формулируют цель: "Научиться защищать формы ввода и проверять данные, которые вводит пользователь, до того как они попадут в систему". |
Завершение этапа: учитель подводит итог: "Именно так. Наша цель — научиться проектировать безопасные информационные объекты."
Этап 4. Открытие нового знания (12 мин)
Цель этапа: изучить основные принципы безопасности веб-страниц через групповую работу с ЭОР.
Время | Действие учителя | Действие учеников |
|---|---|---|
12 мин | Учитель организует работу по методике 'Мозаика'. Класс делится на 3 группы экспертов. Группа 1 изучает 'Фишинг и социальную инженерию в вебе'. Группа 2 — 'Валидацию данных на стороне клиента (HTML-атрибуты)'. Группа 3 — 'Безопасность соединений (HTTPS и сертификаты)'. Учитель дает ссылки на краткие статьи в ЭОР: "Ваша задача — за 7 минут изучить свой вопрос и подготовить 3 главных совета для разработчика. Затем вы вернетесь в свои основные группы и обучите остальных." | Ученики расходятся по группам, изучают материал на планшетах/компьютерах, делают пометки. Обсуждают, какие атрибуты тега input (required, pattern, type) помогают защитить форму. Готовят краткое выступление. Затем возвращаются в исходные группы и обмениваются знаниями. |
Запись в тетрадях
- Основные принципы ИБ: Конфиденциальность, Целостность, Доступность.
- Методы защиты веб-страниц: 1. Валидация форм (required, minlength, type='email'). 2. Использование HTTPS. 3. Экранирование спецсимволов.
Завершение этапа: учитель подводит итог: "Теперь вы вооружены теорией. Пора проверить, сможете ли вы найти ошибки в чужом коде."
Этап 5. Первичное закрепление. Парная работа (7 мин)
Цель этапа: применить полученные знания для аудита безопасности готового объекта.
Время | Действие учителя | Действие учеников |
|---|---|---|
7 мин | Учитель раздает чек-листы и просит открыть файл 'audit.html' на рабочих столах. "В парах проведите аудит этой страницы. Найдите как минимум 4 нарушения безопасности. Отмечайте их в чек-листе. Обратите внимание на ссылки, формы и заголовки." | Ученики в парах изучают код и внешний вид страницы. Находят: 1) Ссылку на подозрительный сайт. 2) Форму без проверки типа данных. 3) Отсутствие протокола https. 4) Поле пароля, которое отображается обычным текстом (type='text' вместо type='password'). Заполняют чек-лист. |
Завершение этапа: учитель подводит итог: "Многие из вас нашли даже больше ошибок, чем я спрятал. Это говорит о вашей внимательности!"
Этап 6. Практическая работа с дифференциацией (10 мин)
Цель этапа: реализовать изученные методы защиты в собственном коде информационного объекта.
Время | Действие учителя | Действие учеников |
|---|---|---|
10 мин | Учитель предлагает задание на выбор: "Уровень 1 (Базовый): Добавьте в форму регистрации атрибуты обязательного заполнения и проверку длины пароля. Уровень 2 (Продвинутый): Настройте регулярное выражение (pattern) для проверки номера телефона и измените типы полей на соответствующие. Уровень 3 (Творческий): Создайте страницу-предупреждение о фишинге, которая объясняет пользователю, почему нельзя вводить данные на подозрительных ресурсах." | Ученики выбирают уровень сложности и работают в редакторах кода. Учитель консультирует индивидуально, помогая тем, у кого возникли трудности с синтаксисом регулярных выражений или тегов. |
Эталон решения (Уровень 2)
Завершение этапа: учитель подводит итог: "Ваши страницы стали гораздо устойчивее к атакам. Сохраните свои работы в портфолио."
Этап 7. Рефлексия и домашнее задание (4 мин)
Цель этапа: провести самооценку деятельности и наметить пути дальнейшего изучения темы.
Время | Действие учителя | Действие учеников |
|---|---|---|
4 мин | Учитель: "Наш урок подходит к концу. Давайте оценим, насколько мы продвинулись в понимании безопасности. Используем прием 'Светофор'. Зеленый стикер на доску — если вы теперь сами можете создать безопасную форму. Желтый — если понимаете принципы, но нужна шпаргалка. Красный — если тема защиты кода кажется слишком сложной. Также посмотрите на домашнее задание в таблице." | Ученики приклеивают стикеры, анализируют свои успехи. Записывают домашнее задание. Один-два ученика озвучивают, что для них было самым неожиданным на уроке (межпредметная связь: 'Оказывается, за плохую защиту данных можно получить штраф по закону'). |
Критерии оценивания практической работы
- "5" — Верно выполнен уровень 2 или 3, код валиден, все уязвимости из аудита устранены, форма не принимает некорректные данные.
- "4" — Выполнен уровень 1 полностью или уровень 2 с незначительными ошибками в синтаксисе регулярных выражений.
- "3" — Выполнен уровень 1, но допущены ошибки в логике работы атрибутов (например, пароль остался открытым текстом).
Рефлексия
Вопрос для ученика | Цель вопроса |
|---|---|
Какая уязвимость веб-страницы показалась вам самой опасной? | Осознание рисков и приоритизация угроз. |
Сможете ли вы теперь отличить фишинговый сайт от настоящего по его коду или адресу? | Проверка формирования навыка читательской и цифровой грамотности. |
Где в заданиях ОГЭ нам пригодятся знания о протоколах передачи данных? | Связь с утилитарной мотивацией и подготовкой к экзамену. |
Завершающее слово учителя
"Сегодня мы сделали важный шаг от простого пользователя к ответственному разработчику. Вы увидели, что информационная безопасность — это не просто набор правил, а культура создания цифровых объектов. Помните: взломать можно всё, но ваша задача как профессионалов — сделать взлом максимально дорогим и сложным для злоумышленника. На следующем уроке мы перейдем к изучению баз данных и узнаем, как защищать информацию уже на сервере. До встречи!"
Домашнее задание
Уровень | Что задать | Зачем |
|---|---|---|
Базовый | Найти в интернете 2 примера официальных сайтов государственных структур и выписать, какие меры безопасности видны обычному пользователю (замок в строке адреса, капча, требования к паролю). | Закрепление навыка визуального аудита безопасности реальных объектов. |
Средний | Подготовить чек-лист из 5 пунктов: 'Как не попасться на фишинг', используя знания об адресах и протоколах. | Развитие навыков смыслового чтения и структурирования информации. |
Продвинутый | Написать небольшой HTML-код страницы с формой обратной связи, где для каждого поля (Email, Имя, Сообщение) прописаны правила валидации через pattern. | Практическая отработка навыка безопасного кодирования. |
