Html Metaform дмитрий котеров

1. MetaForm: неизбыточная работа с метаданными HTML- форм Метаданные формы, защита от подделки, валидация Дмитрий Котеров, архитектор и главный разработчик MoiKrug.ru компания Яндекс [email_address]

2. Что такое метаданные? <ul><li>Данные </li></ul><ul><ul><li>то, что ввели </li></ul></ul><ul><li>array( "lastname" => " Пупкин ", "gender" => "m" ) </li></ul><ul><li>Метаданные </li></ul><ul><ul><li>"данные о структуре данных" </li></ul></ul><ul><li>array( "lastname" => array( "type" => "text", "caption" => " Фамилия ", "dbfield" => "p_lastname" ), "gender" => array( "type" => "single" , "dbfield" => "p_gender" , "elements" => array( "m" = > " Муж ", "f" => " Жен ", ) ) ) </li></ul>Фамилия: <input type="text" name="lastname" /> Пол: <input type="radio" name="gender" value="m" /> Муж <input type="radio" name="gender" value="f" /> Жен

3. Типы полей с точки зрения метаданных <ul><li>Текст </li></ul><ul><ul><li><input type="text">, <input type="hidden">, <textarea> </li></ul></ul><ul><li>Файл (закачка) </li></ul><ul><ul><li><input type="file"> </li></ul></ul><ul><li>Единичный выбор </li></ul><ul><ul><li><select></select> </li></ul></ul><ul><ul><li><input type="radio">… </li></ul></ul><ul><li>Множественный выбор (аналогично) </li></ul><ul><ul><li><select multiple></select> </li></ul></ul><ul><ul><li><input type="checkbox">… </li></ul></ul><ul><li>Действие </li></ul><ul><ul><li><input type="submit">, <input type="image"> </li></ul></ul>

4. Web- или G UI- приложение <ul><li>Web- приложение </li></ul><ul><ul><li>"Размазанность" </li></ul></ul><ul><ul><li>Двойная валидация ( PHP, JS) </li></ul></ul><ul><ul><li>Нет доверия метаданным ( неявная структура POST) </li></ul></ul><ul><ul><li>Дублирование метаданных в дизайне и обработчике </li></ul></ul><ul><ul><li>Косвенный вызов обработчиков </li></ul></ul><ul><li>GUI- приложение </li></ul><ul><ul><li>Централизованная обработка </li></ul></ul><ul><ul><li>Непосредственная валидация </li></ul></ul><ul><ul><li>"Доверие" метаданным (все в рамках одной оконной формы) </li></ul></ul><ul><ul><li>Форма "рисуется" и обрабатывается в едином месте </li></ul></ul><ul><ul><li>Мгновенные обработчики кнопок </li></ul></ul>Рисовальщик формы Пользователь GUI- приложение: форма + обработчики событий Пользователь HTML POST errors Обработчик формы

5. "Размазанность" : неявные зависимости от метаданных <ul><li>Различные компоненты системы </li></ul><ul><ul><li>Структура БД </li></ul></ul><ul><ul><li>HTML- представление формы </li></ul></ul><ul><ul><li>Рисовальщик (код начального заполнения формы) </li></ul></ul><ul><ul><li>Обработчик (код приема данных и записи в БД) </li></ul></ul><ul><ul><li>Серверный валидатор ( PHP) </li></ul></ul><ul><ul><li>Клиентский валидатор (JS) </li></ul></ul><ul><li>Как их объединяют, чтобы обойти проблему </li></ul><ul><ul><li>Структура БД </li></ul></ul><ul><ul><li>HTML- представление формы + клиентский валидатор </li></ul></ul><ul><ul><li>Рисовальщик + обработчик + серверный валидатор </li></ul></ul>

6. Централизация метаданных <ul><li>Репозиторий метаданных </li></ul><ul><li>Подход MetaForm – похож на GUI -формы </li></ul>HTML + JS Рисовальщик + обработчик + валидатор Metadata HTML + Metadata <ul><li>Генератор по явно выделенным метаданным </li></ul><ul><ul><ul><li>сложность доработки </li></ul></ul></ul><ul><ul><ul><li>неуниверсальность </li></ul></ul></ul>Рисовальщик + модификатор + обработчик + валидатор БД БД

7. MetaForm: шаблон + метаданные <ul><li>Метаданные объединены с представлением (как в GUI) </li></ul><ul><li>Автоматическое извлечение метаданных </li></ul><ul><li>Использование возможностей HTML для привязки заглавия </li></ul><ul><li>Назначение валидаторов (серверных + клиентских) </li></ul><ul><li>Назначение произвольных мета-атрибутов </li></ul><ul><li>Отправка формы "на себя" </li></ul><ul><li>Обработка HTML "на лету": </li></ul><ul><ul><li>Легкость адаптации старых проектов </li></ul></ul><ul><ul><li>Совместимость с любыми имеющимися framework- ами </li></ul></ul><ul><ul><li>Неизбыточность ("а добавим-ка новое поле") </li></ul></ul><label for="l"> Фамилия </label> : <input type="text" name="lastname" id="l" meta:dbfield="p_lastname" meta:validator="filled" /> Пол: <label for="m"> Муж </label> <input type="radio" name="gender" value="m" id="m" meta:dbfield="p_gender" /> <label for="f"> Жен </label> <input type="radio" name="gender" value="f" id="f"/>

8. MetaForm : традиционная обработка <ul><li>Обработка формы: </li></ul><ul><ul><li>распаковка метаданных </li></ul></ul><ul><ul><li>проверка цифровой подписи </li></ul></ul><ul><ul><li>валидация </li></ul></ul><ul><ul><li>сохранение сообщений об ошибках </li></ul></ul><ul><ul><li>сохранение сообщений в сессии </li></ul></ul><ul><ul><li>"редирект на себя" </li></ul></ul><ul><li>Подготовка метаданных </li></ul><ul><ul><li>извлечение метаданных из HTML формы, "чистка" формы </li></ul></ul><ul><ul><li>упаковка и цифровое подписывание метаданных </li></ul></ul><ul><ul><li>вставка метаданных в hidden- поле </li></ul></ul><ul><li>Отрисовка формы: </li></ul><ul><ul><li>вставка данных из $_POST ( FormPersister) </li></ul></ul><ul><ul><li>назначение клиентских валидаторов </li></ul></ul><ul><ul><li>привязка сообщений об ошибках к полям </li></ul></ul>switch ($m->process()) { // Простой показ формы. case "INIT" : $_POST = < достать из БД >; break; // Нажата кнопка. case " имя_кнопки " : $meta = $m->getMetadata(); < записать в БД >; < запомнить сообщ. успеха >; < редирект на себя >; break; // Произошла ошибка валидации } < показать ошибки и сообщения >; < заполнить поля из $_POST>; < подготовить метаданные >; < отрисовать форму >;

9. MetaForm : событийная обработка <ul><li>switch-case хорошо подходит при переводе старой системы на MetaForm </li></ul><ul><li>событийная модель удобна для построения CMF </li></ul>// Контроллер Page class Page { function init() { // Простой показ формы. $_POST = < достать из БД >; } function имя_кнопки() { // Нажата кнопка. $meta = $m->getMetadata(); < записать в БД >; < запомнить сообщ. успеха >; < редирект на себя >; } }  < показать ошибки и сообщения >; < заполнить поля из $_POST>; < подготовить метаданные >; < показать форму >;

10. Цифровая подпись метаданных <ul><li>Пусть metadata – упакованные метаданные: </li></ul><ul><ul><li>сервер хранит секретный ключ key </li></ul></ul><ul><ul><li>signed = metadata + "-" + md5( metadata + key ) </li></ul></ul><ul><ul><li>в hidden- поле записывается signed </li></ul></ul><ul><ul><li>проверка: md5(left(signed) + key ) == right(signed) </li></ul></ul><ul><li>Необходимо хранить key в секрете! </li></ul>

11. Защита от подделки форм <ul><li>Принудительная валидация: </li></ul><ul><ul><li>hidden- поля должны быть константными: <input type="hidden" name="a" value="b"> => $_POST['a'] = 'b' </li></ul></ul><ul><ul><li>выбранный элемент из single или multiple должен содержаться в списке: <select name="s"><option value="v"> текст </select> => $_POST['s'] = 'v' </li></ul></ul><ul><ul><li>форма послана именно тому скрипту, который указан в ее атрибуте action : <form action="script"> => REQUEST_URI ~ "script" </li></ul></ul><ul><ul><li>DB constraints никто не отменял! </li></ul></ul><ul><li>Отмена принудительной валидации </li></ul><ul><ul><li><input type="hidden" meta:dynamic> => поле можно заполнять на JavaScript </li></ul></ul>

12. Защита: "лишние" поля формы <ul><li>Провоцирование неявной зависимости от метаданных </li></ul><ul><ul><li>Имеем форму: <input type="text" name="person[firstname]" /> <input type="text" name="person[lastname]" /> </li></ul></ul><ul><ul><li>Хакер добавляет "лишнее" поле: <input type="text" name="person[firstname]" /> <input type="text" name="person[lastname]" /> <input type="hidden" name="person[is_admin]" value="1" /> </li></ul></ul><ul><ul><li>Результат: изменение неожиданного поля </li></ul></ul><ul><li>MetaForm: неизвестные поля считаются подделкой </li></ul>

13. Неизбыточная валидация <ul><li>Привязка валидаторов <input meta:validator="filled email"> </li></ul><ul><li>В полю привязано имя валидатора : </li></ul><ul><ul><li>вызов валидатора на стороне сервера ( PHP) function validator_ название ($value, $metadata) </li></ul></ul><ul><ul><li>автопривязка валидатора на стороне клиента ( JavaScript) validator_ название = function(value, metadata) </li></ul></ul><ul><li>Привязка нескольких валидаторов <input meta:validator="filled email"> </li></ul><ul><li>Валидаторы должны быть ортогональными </li></ul><ul><li>Передача параметров валидаторам Пароль: <input type="password" name="pass" meta:validator="password_match" meta:match_field="confirm" /> Еще раз : <input type="password" name="confirm" /> </li></ul>

14. Привязка сообщений об ошибках <ul><li>Ошибка валидации привязана к полю формы </li></ul><ul><ul><li>Метаданные содержат ID (координаты) всех полей </li></ul></ul><ul><ul><li>Привязка ошибки к элементу на JavaScript ("модель светофора") </li></ul></ul><ul><ul><li>Фокус на ошибочном элементе </li></ul></ul><ul><li>Извлечение текста ошибки по имени валидатора (языковые константы ) </li></ul><ul><ul><li>'validator_email' => ' Поле "%s" должно содержать корректный E-mail!' </li></ul></ul><ul><ul><li>Подстановка имен полей ( sprintf) </li></ul></ul>

15. Резюме <ul><li>Плюсы подхода MetaForm: </li></ul><ul><ul><li>Родство с GUI- программированием </li></ul></ul><ul><ul><li>Неизбыточность </li></ul></ul><ul><ul><li>Прозрачность для любого framework- а </li></ul></ul><ul><ul><li>Легкость адаптации существующих проектов </li></ul></ul><ul><ul><li>Прозрачность для HTML- верстальщика </li></ul></ul><ul><li>Минусы: </li></ul><ul><ul><li>Смешение логики метаданных и логики представления ( характерно и для GUI) </li></ul></ul>

16. Приходите к нам работать! <ul><li>МойКруг.ру теперь – сервис Яндекса </li></ul><ul><li>Мы расширяем свою команду! </li></ul><ul><li>Открыты вакансии для: </li></ul><ul><ul><li>верстальщиков со знанием Smarty </li></ul></ul><ul><ul><li>отличных PHP- программистов </li></ul></ul><ul><ul><li>опытных БД-разработчиков ( PostgreSQL, Oracle) </li></ul></ul><ul><ul><li>JavaScript- программистов </li></ul></ul>Ждем Ваши резюме на http://moikrug.ru/hire/

Html Metaform дмитрий котеров

Media Gorod

Html Metaform дмитрий котеров