Когда я подростком начал заниматься программированием и веб-разработкой, я не совсем понимал, как работает весь этот браузер, сервер, TCP, HTTP, заголовки, файлы cookie. Поэтому я постараюсь постепенно вводить эти вещи и все больше и больше углубляться в аспекты безопасности. Я постараюсь, чтобы эта серия была немного более высокоуровневой, но в какой-то момент я, безусловно, углублюсь в более низкоуровневые сетевые части.
Локальная машина или компьютер
На данный момент мы останемся на нашей локальной машине и не будем подключаться к серверу. Начнем с отображения или рендеринга веб-сайтов в браузере. Так. Вы уже знаете, что браузеры могут отображать HTML-файлы.
Итак, начнем с создания простого. Первая строка — тип документа. В предыдущих версиях HTML это было более важно, поскольку включало важную информацию о рендеринге для различных режимов браузеров в прошлом.
Скелет HTML
Но в наше время это в основном неактуально. Затем идет стандартный скелет HTML.
HTML-тег. Включая голову и тело. Да, и если это не совсем понятно, HTML иерархичен. Тег HTML всегда открывается и снова закрывается. И внутри вы можете иметь больше тегов.
Таким образом, вы всегда должны читать HTML в одинаковых парах тегов. И подумайте об этом в иерархическом порядке. В этом помогает отступ. Добавим заголовок с h1. И какой-то текст в абзацах с п. Давайте также добавим изображение с тегом IMG. А пока мы на нем ссылка на другой сайт. Существует множество различных тегов HTML, которые обеспечивают различные функции пользовательского интерфейса. Некоторые из них предназначены для стилизации текстовых материалов, таких как заголовки или изображения. Другие предоставляют элементы ввода для формул, простое текстовое поле и кнопку отправки. Обычно синтаксис тегов такой. Знак «меньше» (-), за которым следует имя тега без пробела.
После этого у вас может быть несколько пар ключей и значений, разделенных пробелами. Они называются атрибутами тега HTML. Значения должны быть заключены в кавычки, но это не обязательно. Еще одна маленькая вещь, которая полезна для определенных видов атак. Теперь мы можем открыть этот файл в браузере.
Дисплей браузера
Браузер анализирует HTML-код и начинает рисовать элементы на экране. Когда вы щелкаете правой кнопкой мыши где-нибудь, вы можете выбрать «проверить элемент». Что открывает инструменты разработчика Chrome. Другие современные браузеры предлагают аналогичные инструменты. На первой вкладке под названием «элементы» вы можете увидеть все элементы HTML-документа.
Он имеет красивый иерархический вид, где вы можете открывать и сворачивать теги. Вы также можете зайти туда и изменить HTML. Это, очевидно, просто меняет то, что в данный момент отображает браузер, и когда вы обновляете, вы, очевидно, снова видите исходный файл. Вы не изменяете реальный файл на жестком диске. В зависимости от вашего юмора этого может быть уже достаточно, чтобы развлечься, подделав содержимое веб-сайта, сделать скриншот и опубликовать его в Facebook, утверждая, что это было правдой.
Браузеры также очень хороши в чем-то другом. Html похож на язык программирования. Но когда вы пишете какой-то странный HTML-код, страница не ломается, как это сделали бы программы на Python или C.
Браузеры очень хорошо «исправляют» плохой HTML-код, который мы пишем. Исправление, возможно, неправильное слово.
- допустим, они очень либеральны в том, что они принимают. Здесь вы видите несколько примеров. Мы помещаем форму внутрь тега p абзаца, что является нарушением стандарта. Но в представлении проверки вы можете увидеть, как браузер исправил это, создав тег p до и после формы.
Или им все равно, если вы забудете закрыть свои теги. Он не жалуется, если вы используете странные символы в странных местах. Он не жалуется на то, что идентификаторы, которые должны быть уникальными, используются несколько раз. Вы можете себе представить, что это может помочь в эксплуатации, если вы можете изменить (или вообще внедрить новый HTML-код в) HTML-код сайта. Вы можете использовать это, чтобы обойти определенные ограничения. Например, если по какой-то причине вы не можете использовать косую черту, то просто не закрывайте тег.
В любом случае, помимо HTML, есть несколько других очень распространенных технологий.
Во-вторых, CSS
CSS — это еще один тип языка, который позволяет вам стилизовать HTML-страницу. Например, изменение цвета. У вас есть несколько вариантов сделать это.
Вы можете присвоить каждому элементу HTML атрибут стиля. Вы можете использовать тег стиля или ссылаться на отдельный файл CSS. Синтаксис CSS также очень прост. Вы начинаете с идентификатора, называемого селектором. Итак, сначала вам нужно решить, какие HTML-теги вы хотите стилизовать. Вы можете определить стили для всех тегов определенного типа. Или все теги с определенным классом, использующие точку перед именем класса.
Или только тег с этим идентификатором, используя решетку. Вы также можете комбинировать их. Имя входного класса DOT ссылается на все входные элементы, которые имеют это имя класса.
Или разделите запятую, если вы хотите, чтобы разные селекторы имели одинаковый стиль. Или иерархический, только стилизуйте этот абзац, если он находится внутри div. Внутри фигурных скобок вы снова определяете ключ и значения, на этот раз разделенные точкой с запятой. Существует множество различных стилистических особенностей. Например, цвета текста, шрифты, поля и отступы.
И опять же, вы можете поиграться с этими вещами в инструментах разработчика браузера. Просто нажмите на элемент, и справа вы можете внести изменения.
Это потрясающе. Вы можете сразу увидеть результаты. Действительно круто для обучения... Теперь давайте добавим этому ужасный фоновый цвет.
Javascript в качестве третьего
Третьей важной технологией является javascript. Опять же, вы можете написать javascript внутри атрибутов, использовать тег скрипта или ссылаться на внешний файл javascript. Javascript — это настоящий полноценный язык программирования, позволяющий вам определять функции, циклы, операторы if и все такое прочее. Типичным примером и доказательством выполнения javascript является использование чего-то вроде alert() или prompt(), которые вызовут небольшое всплывающее окно с предупреждением. Таким образом, мы можем, например, определить бесполезную функцию, которая вызывает alert().
Есть два основных способа взаимодействия javascript с HTML. Один — события. Они могут инициировать выполнение javascript. Так, например, мы можем добавить обработчик события клика в HTML-тег, и если пользователь нажмет на этот тег, он выполнит функцию javascript. Другой обращается к HTML из javascript. Вы можете получить доступ к элементам HTML через иерархическую объектную модель, называемую DOM. Javascript знает объекты. Как и другие языки программирования. DOM — это просто объектное представление HTML-страницы, так что javascript может получить к нему хороший доступ. Вы можете снова использовать инструменты разработчика, чтобы поиграть с javascript на текущем сайте.
Так, например, вы можете взять документ, затем его тело HTML и его дочерние элементы. А затем получить доступ и изменить текст. Опять же, все, что вы делаете здесь, находится в браузере. Открытие веб-сайта в браузере похоже на открытие изображения в фотошопе. Photoshop визуализирует изображение, но также предлагает вам инструменты для работы с этим изображением.
И браузер тоже открывает и рендерит файл. И предоставляет инструменты для игры с отображаемыми страницами. Теперь этот ресурс загружен из локальной файловой системы, вы можете видеть, что у него есть файл схемы URL, двоеточие, косая черта, косая черта. Сопровождается своим путем. Обычно сайты загружаются с удаленного сервера по протоколу HTTP.
