Фронтенд-безопасность, о которой вы должны знать

1 Обзор

Эта статья не является большим и всеобъемлющим курсом, а представляет собой распространенную проблему в нашей повседневной жизни.Поскольку сетевая безопасность является большой темой, мы только знакомим вас с тем, что должны знать и знать фронтенд-инженеры. примерно включаяXSS,CSRF,点击劫持,SQL注入,OS注入,请求劫持,DDOS, и простой防范策略.

2. XSS

XSSна английском языкеCross Site ScriptingТакже известны как атаки с использованием межсайтовых сценариев, потому что аббревиатура иCSSперекрываются, поэтому его можно назвать толькоXSS, атака с использованием межсайтовых сценариев представляет собойWebСайт работает незаконно в браузере зарегистрированного пользователяHTMLэтикетка илиJavaScriptатака.

ТакXSSКак обычно проводится атака? Предположим, естьinputилиtextareaОн используется для сбора данных, введенных пользователем. При нормальных обстоятельствах проблем не возникает. Предположим, что содержимое, введенное пользователем,<script>alert(1)</script>. Когда мы передаем этот контент, введенный пользователем, черезinnnerHTMLПри добавлении на страницу код запустится и появится всплывающее окно.alert.

document.body.innerHTML = inputValue;

Можно обнаружить, что пользовательский вводjsСкрипт может быть выполнен, что образует дыру в безопасности, и многие хакеры сначала проходятalertспособ проверить, может ли веб-сайт бытьXSS, что означает, что вы можете запуститьjsлюбой скрипт внутри. Пароль учетной записи, введенный пользователем без ведома пользователя, будет отправлен ему самим через запись хакера или черезjsПерепишите страницу, чтобы отображались незаконные изображения, скопируйте статус входа пользователя на компьютер хакера, и хакер сможет использовать личность пользователя для работы и так далее.

в общемXSSСуществует два вида методов атаки, один из которых - через вышеупомянутыйinputМетод атаки ввода называется типом хранения, то есть введенный пользователем контент будет храниться в базе данных, и он будет выполняться каждый раз при открытии страницы.urlПараметрическая атака называется типом отражения, если предположить, что наш веб-сайтurlПереносимое содержимое отображается на странице.

http://localhost:8080/index.html?name=yd

Хакер может отправить пользователю ссылку, подобную следующей, которая запустит скрипт, как только пользователь его откроет.

http://localhost:8080/index.html?name=<script>alert(123)</script>

1.`XSS`вред

Проще говоряjavascriptОн может делать все, что может.

Получить данные страницы
Получить куки
Изменить логику внешнего интерфейса
послать запрос
Получить информацию о пользователе и статус входа
обманывать пользователей

2.`XSS`охранять от

В шапке можно установить заголовок ответа X-XSS-Protection.По умолчанию XSS-атаки запрещены.При обнаружении XSS-атаки в url доступ к странице запрещен. Но его атака на тип хранилища недействительна и может перехватить только атаку инъекции в URL-адресе.

ctx.set('X-XSS-Protection', 0); // 允许XSS攻击

Существует четыре типа значений:

0: разрешить XSS-атаки

1: XSS-атака запрещена. При обнаружении атаки межсайтового скриптинга браузер очистит страницу (удалит небезопасные части)

1;mode=block включает фильтрацию XSS, при обнаружении атаки браузер не очистит страницу, а заблокирует загрузку страницы.

1report= включает фильтрацию XSS, при обнаружении атаки межсайтового скриптинга браузер очистит страницу и отправит отчет о нарушении, используя функциональность директивы CSP report-uri.

При нормальных обстоятельствах браузеры по умолчанию используют значение 1, что запрещает атаки XSS.

3. CSP

Политика безопасности контента (CSP Content Security Policy) — это дополнительный уровень безопасности, используемый для обнаружения и смягчения определенных типов атак, в том числеXSSи атаки с внедрением данных. Эти атаки могут использоваться для чего угодно: от кражи данных до саботажа веб-сайтов или распространения вредоносных программ.

CSPПо сути это установка вайтлиста.Разработчик четко говорит браузеру какие внешние ресурсы можно загружать и выполнять.Нам нужно только настроить правила.Как перехватывать реализовано самим браузером.Можно минимизировать таким образом .XSSатака.

У него есть следующие стратегии для этой стратегии:


# 只允许加载本站资源
Content-Security-Policy: default-src 'self'

# 只允许加载HTTPS协议图片
Content-Security-Policy: img-src https://*

# 不允许加载任何来源框架
Content-Security-Policy: child-src 'none'

Как правило, атака заключается в том, что наш веб-сайт выполняет действия других веб-сайтов.jsскрипт, внедренный хакерскимjsкод. Предположим, что наш веб-сайт настроен так, чтобы код мог загружать только свой собственный веб-сайт, тогда внедренныйjsСкрипт не может быть выполнен.

# 设置只允许执行自己网站的js脚本，
ctx.set('Content-Security-Policy', "default-src 'self'")

# 浏览器打开连接时4000端口的外部资源不能被加载
https://127.0.0.1:3000?from=<script src="http://127.0.0.1:4000/hack.js"></script>

4. Экранирующие символы

Пользовательскому вводу никогда нельзя доверять. Наиболее распространенной практикой является перевод выходного содержимого. Для кавычек, угловых скобок и косых черт перевод пользовательского содержимого выполняется с помощью следующих функций.

function escape(str) {
    str = str.replace(/&/g, '&amp;');
    str = str.replace(/</g, '&lt;');
    str = str.replace(/>/g, '&gt;');
    str = str.replace(/"/g, '&quto;');
    str = str.replace(/'/g, '&#39;');
    str = str.replace(/`/g, '&#96;');
    str = str.replace(/\//g, '&#x2F;');
    return str;
}

escape('<script>alert(123)</script>'); // &lt;script&gt;alert(123)&lt;&#x2F;script&gt;

Этот вид перевода называется «внимание к черному списку», который предназначен для перевода небезопасных вещей, таких как\<\>, но есть ситуация, когда перевод черного списка выполнить невозможно.

Иногда нам приходится иметь дело с каким-то форматированным текстом, очевидно, что мы не можем перевести все символы вышеуказанным методом, потому что это также отфильтрует нужный формат.В этом случае мы обычно используем метод фильтрации белого списка, конечно, мы также можно использовать метод фильтрации по черному списку, но, учитывая, что слишком много тегов и атрибутов тегов необходимо отфильтровать, более рекомендуется использовать метод белого списка.

Метод белого списка позволяет пропускать некоторые безопасные символы, а все остальные символы должны быть переведены, рекомендуется использовать его здесь.xssизnpmпакет для обработки.

// 引入xss
const xss = require('xss');

let html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss")</script>');

// <h1 id="title">XSS Demo</h1>&lt;script&gt;alert("xss")&lt;/script&gt;

console.log(html);

можно увидеть здесьxssдержалh1Этикетка, потому что он был в безопасности, дляscriptЭтикетка была переведена, потому что он неполный Ann.

Как правило, данные, введенные пользователем или изurlМы не рекомендуем использовать параметры, полученные вinnnerHTMLвставляется на страницу, за исключениемxssмодули иescapeметод также может ввестиhtmlшаблоны, общиеejsшаблон.react,vue,angularОжидание, пока фреймворк поможет нам справиться с этим по умолчаниюxss.

# 转译 inputValue 内容
<%= inputValue %>

# 不转移 inputValue 内容
<%- inputValue %>

5. HttpOnly Cookie

почему пользователиcookieможно назвать, потому чтоjsдоступенcookieДа, мы можем отключитьjsдоступcookieспособ предотвратить эту атаку.

это профилактикаXSSАтака с целью кражи пользователейcookieнаиболее эффективные средства защиты,Webприложение в настройкахcookie, установите для его свойств значениеHttpOnly, вы можете избежатьcookieВредоносный со стороны клиентаjavaScriptворовать, защищать пользователейcookieИнформация. То есть сервис настраиваетсяcookieидти в ногу сHttpOnlyВот и все.

response.addHeader('Set-Cookie', 'uid=112; path/; HttpOnly')

установить вот такcookie,jsДоступ к нему невозможен.

Выше приведены некоторые основные средства защиты.XSSсредства нападения.CSP,字符转译,HttpOnly Cookie.

6.CSRF

CSRF( Cross Site Request Forgery), то есть подделка межсайтовых запросов, что являетсяwebАтака, которая использует личность вошедшего в систему пользователя, без ведома пользователя, имя пользователя для завершения незаконной операции. Проще говоря, шаг атаки прост.

Пользователь уже авторизован на сайтеA, И вAСайт записывает статус входа (cookie), вам не нужно снова входить в систему. Когда пользователь не вышел с сайтаAВ этом случае, то есть когда состояние входа в систему все еще действительно, доступ к опасным сайтам-приманкам, предоставляемым злоумышленникамиB,Bвызов сайтаAИнтерфейс сайта, например интерфейс отправки. еслиAсайт ничего не делаетCSRFобороны, будут атакованы.

Принцип также очень прост, потому чтоBсайт называетсяAИнтерфейс представления сайта, согласноcookieПринцип соответствия, интерфейс какого сайта будет нести интерфейс какого сайтаcookie, который несет информацию о присутствии пользователяAместаcookie, параметры, переданные интерфейсом отправки в это время, на самом делеBпредоставленный сайтом. Интерфейс был вызван от имени пользователя без ведома пользователя.

Многим может показаться, чтоBвызов сайтаAИнтерфейс сайта кроссдоменный, как он может работать? Это ничего, кросс-доменная — это просто утверждение. Как правило, кросс-доменная означает, что внешний интерфейс не может получить возвращаемое значение интерфейса, но это не означает, что запрос не может быть отправлен. цель атаки, пока запрос отправляется.Какое возвращаемое значение?Это не имеет значения.

защитаCSRFЕсть три средства.

Во-первых, запретить сторонним веб-сайтам размещатьCookie, но есть проблемы с совместимостью, второй способ - проверить, что запрос прошелreferrer, судя по тому, является ли законнымreferrer. На самом деле многие противоугонные сети провереныreferrerПуть.

referrerЭто адрес передней страницы, которая отправляет запрос, доступ к которому можно получить черезreferrerспособ экранирования и фильтрации, но у него тоже проблемаhttpsне отправлятьreferrerДа, так что это проблема совместимости.

В настоящее время наиболее эффективным способом является метод кода проверки или метод взаимодействия человека с компьютером.В прошлом пользователи могли быть переданы через CSRF, поскольку передача была относительно простой, но теперь базовая передача будет отправлять коды проверки, такие как проверка.

7. Кликджекинг

Clickjacking — это визуальная спуфинговая атака, при которой злоумышленник отправляет веб-сайт, который ему нужен для атаки, черезiframeВставьте его на свою веб-страницу вложенным способом и поместитеiframeУстановите прозрачность, показывая кнопку на странице, чтобы побудить пользователей щелкнуть.

Когда вы нажимаете кнопку, вы на самом деле нажимаетеiframeна кнопку вiframeФункция встраивания сайта, например, если вы хотите понравиться странице, вы можете пройти страницу черезiframeкамуфляж.

Защититься от этого на самом деле очень просто, просто установитеX-FRAME-OPTIONSЗаголовок ответа,X-FRAME-OPTIONSЯвляетсяhttpЗаголовки ответа, которые хорошо поддерживаются в современных браузерах, этоhttpЗаголовок ответа предназначен для защитыiframeВложенные кликджекинговые атаки.

Заголовок ответа имеет три необязательных значения:

DENYУказывает, что страница не может пройтиiframeспособ показать

SAMEORIGINУказывает, что страница может передаваться под тем же доменным именемiframeспособ показать

ALLOW-FROMУказывает, что страница доступна в указанном источникеiframeпоказать в

ctx.set('X-FRAME-OPTIONS', 'DENY')

Вы также можете напрямую использовать js, чтобы определить, находится ли он вiframe, но этот метод также имеет проблемы. В случае кросс-домена внутренняя страница не может работать внешний слой.locationиз.

if (self !== top) {
    top.location.href = self.location.href; // 将外层的location修改为内层的location
    document.body.innnerHTML = ''; // 清除页面内容
}

8. SQL-инъекция

SQLИнъекция — одна из наиболее распространенных сетевых атак, она не использует операционную систему.BUGДобиться атаки, но за невнимательность программиста при написании, черезSQLзаявление, чтобы не добиться входа в учетную запись и даже вмешиваться в базу данных.SQLИнъекционная атака больше тяготеет к back-end, и фронтенд-студенты могут ее понять.

Предположим, нашsqlВыглядит это так, запрашивая, есть ли имя пользователя в таблице пользователей базы данныхuserNameпеременная, парольpasswordпеременный пользователь.

const sql = 'select * from user_table where username= "'+ userName +'" and password = "' + password + '"';

Нет проблем, когда пользователь вводит правильное имя пользователя и пароль


const userName = 'yd';
const password = '123456';

const sql = 'select * from user_table where username= "'+ userName +'" and password = "' + password + '"';

// select * from user_table where username= "yd" and password = "123456"

Но если пароль, введенный хакером,1"or"1"="1Будет проблема, это правило, которое всегда можно успешно выполнитьsql.username="yd" and password= or 1=1; Хэн установилsql.


const userName = 'yd';
const password = '1"or"1"="1';

const sql = 'select * from user_table where username= "'+ userName +'" and password = "' + password + '"';

// select * from user_table where username= "yd" and password = "1" or"1"="1"

В общем, мы не допускаем сращиванияsqlДа, рекомендуется использовать параметризованный интерфейс запросов, предоставляемый базой данных, для всех операторов запросов.Параметрические операторы используют параметры вместо встраивания входных переменных пользователя вSQLВ заявлении ни прямой сплайсингSQLутверждения, такие какNode.jsсерединаmysqljsв библиотекеqueryметод.

const sql = ` SELECT * user_table WHERE username = ? AND password = ?`
res = await mysql.query(sql, [ctx.request.body.username, ctx.request.body.password]);

Кроме того, строго ограничиватьwebПолномочия эксплуатации базы данных приложения предоставляют пользователю минимальные полномочия, которые могут удовлетворить только его работу, тем самым сводя к минимуму вред инъекционных атак на базу данных.Внутренний код проверяет, соответствуют ли входные данные ожиданиям, и строго ограничивает типы переменных, например Выполнить некоторую обработку сопоставления с использованием регулярных выражений. специальные символы для входа в базу(',",\,<,>,&,*,;)и т. д., выполнить обработку перевода или преобразование кода**. В основном все языки бэкенда имеют методы для транспиляции строк, такие какlodashизlodash._escapehtmlcharбиблиотека.

9. Внедрение команд ОС

OSввод команд иSQLИнъекция почти такая же, за исключением того, чтоSQLИнъекция предназначена для базы данных, иOSВнедрение команд предназначено для операционной системы,OSАтаки с внедрением команд относятся кwebприложение, выполнять недопустимые команды операционной системы для достижения цели атаки, если оно может вызватьshellГде есть функция риска быть атакованным, если вызовshellЕсли есть пропуск, вставленная недопустимая команда может быть выполнена.

кNode.jsНапример, для добавления интерфейса требуетсяgithubЗагрузка указанных пользователем элементов

const exec = require('mz/child_process').exec;
const params = { /* 用户输入的参数 */};
exec(`git clone ${params.repo}/some/path`);

Что, если переданные параметры следующие

https://github.com/xx/xx.git && rm -rf /* &&

В это время, если разрешения пользователя слишком велики, он выполнитrm -rf /*, удалить весь контент с сервера.

10. Запросить угон

Нижеследующая концепция не является нашей концепцией интерфейса, но она очень часто используется, я также расскажу об этом здесь и разберусь с ней.

Существует два типа перехвата запросов, один из нихDNSугон, аHTTPугнать.

DNSСервер также является сервером доменных имен, который преобразует доменное имя вipЕсли адрес подделан, перенаправляемый веб-сайт не является предполагаемым веб-сайтом. Один из наших компьютеровhostфайл, то есть локальныйDNS, если встретишьDNSУгонщик может просматривать локальныеhostБыл ли файл подделан.

HTTPУгоны встречаются чаще.HTTPЭто передача открытого текста, и весьма вероятно, что ссылка в середине проекта передачи была изменена. Например, мы часто сталкиваемся с такой ситуацией, мы связываем ж/д вокзал с ж/д вокзалом.wifi, в это время, какую бы страницу мы ни открывали, мы авторизованыwifiстраница. На самом деле это вмешательство в сайт, который вы посещаете на уровне маршрутизатора, не переходя по ссылке оператора.

HTTPУгон можно только улучшитьHTTPS, потому что он сам по себе является передачей открытого текста.

11.DDOS

Вот ссылка на блог г-на Жуань Ифэна [DDOS 攻击的防范教程].

DDOSЭто не атака, а общий термин для большой категории атак, их видов десятки, и постоянно изобретаются новые методы атак, каждая ссылка в работе сайта может быть целью атаки. Пока одна связь нарушена, так что весь процесс не может работать, цель парализовать службу достигнута.

Одной из наиболее распространенных атак являетсяCCатака. Он просто и грубо отправлял большое количество обычных запросов, которые превышали максимальную мощность сервера, что приводило к простоям.

То, с чем я столкнулся, былоCCАтаки, большую часть времени по всему миру20несколькоIPАдреса делают запросы по очереди, и запросы для каждого адреса выполняются каждую секунду.200 ~ 300Когда я смотрю на лог доступа, я чувствую, что эти запросы льются потоком, в мгновение ока их очень много, через несколько минут размер лог-файла увеличится.100MB.

Честно говоря, это можно считать мелкой атакой, но мой личный сайт ничем не защищен, а сервер до сих пор используется совместно с другими людьми, такой трафик отключается, как только он приходит.

этот токDDOSМетод атаки обычно не доходит до самого вашего сервера, потому что после прихода большого количества запросов велика вероятность того, что все маршрутизаторы в машинном зале будут полностью заняты, и запросы уже не смогут дойти до уровня сервера. в этом случае оператор будет напрямую сервер находится в автономном режиме. Следовательно, уровень сервера в принципе не так прост в управлении.

Мы можем сделать резервную копию веб-сайта, то есть у вас есть резервная копия веб-сайта или хотя бы временная домашняя страница. В случае, если рабочий сервер отключится, вы можете сразу переключиться на резервный сайт, так что выхода нет.

Резервный веб-сайт не обязательно полнофункциональный. Если его можно полностью просматривать статически, он может удовлетворить потребности. Как минимум, должна быть возможность отображать объявление, сообщающее пользователям, что с сайтом возникла проблема и что она усердно работает над ее устранением. Такую временную домашнюю страницу рекомендуется размещать на веб-сайтах с большой пропускной способностью и способных противостоять атакам.

также черезHTTPПерехват запроса, если есть характеристика, то с ним очень просто бороться: напрямую его перехватывать, можно перехватывать в железе, серверах, файрволах.

HTTPПерехват исходит из того, что запрос должен иметь характеристики. Однако реальнаяDDOSАтака безликая, ее запрос выглядит так же, как обычный запрос, и исходит от другогоIPадрес, так что нет никакого способа перехватить его. поэтомуDDOSособенно трудно предотвратить.

DDOSСтоимость атаки все еще относительно высока, мы можем пройти宽带扩容 + CDNспособ увеличить стоимость атаки.

12. Рептилия

Сканеры могут сканировать содержимое веб-сайта,Nodeможно использовать вcheerioа такжеhttpsмодуль для демонстрации.

const cheerio = require('cheerio');
const https = require('https');

let html = '';

const $ = '';

https.get('url', res => {
    res.on('data', data => {
        html += data; // 保存返回的数据
    });
    res.on('finish', () => {
        $ = cheerio.load(html); // cheerio解析数据
        // $就是拿到的dom树, 想jq一样。
    })
})

cheerioиспользование похоже наjquery,httpsТы можешь отправитьhttpsпросить. существуетfinishМетод указывает, что страница полученаhtml.

Есть много способов защититься от рептилий. Например, для проверки браузераUA,referrerили проверочный код. Например, проверьте количество посещений в единицу времени и количество посещений.

Также можно спутать ключевую информацию с картинками, например, для какого-то текста мы напрямую разрешаем интерфейсу возвращать картинки для рендеринга. самSPAОдна страница — это средство защиты от сканирования, но один из ее самых больших недостатков заключается в том, что она не дружелюбна к поисковым системам. Поисковые системы используют технологию сканирования. Так это вышло позжеSSRРендеринг для решения этой проблемы.

Также есть несколько более продвинутых методов защиты, которые являются некоторыми техническими ограничениями фронтенда.

Метод нарушения порядка шрифта, сервис возвращается во внешний интерфейсhtml, текст не соответствует тому, что видит пользователь, например тому, что возвращает служба.divОбщее содержание4998, и то, что действительно показывает страница,1995, его подход также очень прост, с использованием специальной библиотеки шрифтов, потому что при рендеринге шрифта он будет искать библиотеку шрифтов и отображать ее в виде библиотеки шрифтов. В этой библиотеке шрифтов4вести переписку1,8вести переписку5, Это оно.

Вы также можете использовать важные шрифты на веб-сайте для создания изображений черезiconfontспособ рендеринга.

Существует такжеcanvasМетод защиты от отпечатков пальцев,canvasСмысл отпечатков пальцев в том, что разные аппаратные парыcanvasПоддержка разная, поэтому рисовать нужно только очень сложноеcanvas, то получаемimage, всегда есть ошибка на уровне пикселей. Учитывая, что код сканера унифицирован, даже еслиselenium,Слишкомghost, поэтому отпечатки пальцев в целом непротиворечивы, поэтому вероятность обхода очень мала. Но на самом деле это не так, отечественные компании обычноITУнифицированная установка, как программное, так и аппаратное обеспечение удивительно согласованы. такcanvasСходство отпечатков пальцев особенно велико.

Наконец-то вы можете сами узнать о безголовом браузере, это действительно артефакт.