С момента разработки внешнего интерфейса безопасность внешнего интерфейса всегда существовала и становилась все более важной, от простого вырезания страницы внешнего интерфейса до настоящего времени, чтобы взять на себя все более и более важные обязанности.
После стольких лет работы на фронтенде очень мало случаев, когда меня действительно волнуют вопросы безопасности, и меня часто преследует отдел безопасности: "хх, поторопись, есть лазейка и восполни ее "!
Сегодня мы в основном имеем соответствующее понимание основных методов атаки через части понимание-атака-защита, чтобы быть не самым острым копьем, а быть постоянно укрепляемым щитом!demos
CSRF — подделка межсайтовых запросов
А. Что такое CSRF
Примечание: csrf, как вор, чтобы одолжить ваши ключи, открыть сейф в вашем доме, если нет вторичных средств защиты, друзья игры
б. Характеристики CSRF
1) Злоумышленником является сторонний веб-сайт
2) Злоумышленник на самом деле использует информацию для авторизации, которую пользователь сохранил на атакуемом веб-сайте, например сеанс входа в систему на рисунке выше.
3) Фактический сертификат авторизации пользователя не будет украден, а только заимствован
4) Существуют различные методы атаки, пока вы можете инициировать запрос, вы можете реализовать соответствующую атаку, например форму формы, изображение и т. д.
c. Метод атаки CSRF
1) На приведенном выше рисунке HTTP-запрос инициируется формой формы, загружается изображение IMG.demo
2) Через ajax-запросы можно добавить междоменные вызовы с учетными данными, чтобы принести куки атакуемого сайта.
г. Опасность
1) Подделка данных пользователя на атакуемом сайте
2) Украсть данные о конфиденциальности пользователя
е. Защита
1) Так как атака идет с трех сторон
Можно определить реферера источника запроса, добавить в белый список реферера
Недостатки: Есть много способов пересечь реферера, и все они не могут быть эффективно перехвачены.
2) Добавьте csrf-токен, это основное решение
I. Серверная часть поддерживает токен csrf, получает последний токен при входе на страницу и проверяет его при отправке формы.
II.js поддерживает сверхкраткосрочный токен в куки, а интерфейс проверяет при получении данныхdemo
е. Добыча уязвимостей
1). Имеет ли целевая форма проверку токена
2) Есть ли проверочный код?
3) Судят ли реферера
4) Есть ли лазейки в настройках параметров, связанных с разрешением доступа?
5). Могут ли целевые данные jsonp настроить обратный вызов
2. XSS
А. Что такое XSS
Межсайтовый скриптинг, атака межсайтового скриптинга, по сравнению с csrf, его сила поднялась на уровень, потому что он может украсть информацию аутентификации пользователя, а затем выполнять операции по своему желанию
б. XSS, где
1) Атаки с использованием уязвимостей в коде
2) После атаки учетные данные пользователя могут быть украдены.
3) Сохраненный XSS повлияет на безопасность всего сайта.
c. метод атаки xss
1) Вставить нелегальный код через уязвимость парсинга параметра строки запросаdemo
Примечание: краткий адрес для помощи
2) Вводите незаконные коды через порталы пользовательского ввода, такие как комментарии и форумы.
г. Опасность
1) Установить трояна
2) Украсть пользовательские куки
3) Фишинговая атака
4) Перехват поведения пользователя
е. xss-защита
1). htmlEncode
2). javascriptEncode
3) Безопасность файлов cookie httpOnly
Механизм самодекодирования HTML и js, как показано в следующей таблице,demo
| среда кодирования/выполнения | Способ | html | javascript |
|---|---|---|---|
| символ после HTMLEncode | - | - | - |
| - | Побег со специальными символами | Могу | Не будет |
| - | Экранирование с помощью htmlnode | Могу | Не будет |
| - | Используйте экранирование юникода | Могу | Не будет |
| Символы после JavaScriptEncode | - | - | - |
| - | Используйте экранирование юникода | Не будет | Могу |
| - | Использование\экранирование | Могу | Могу |
3. Перехват операций интерфейса
А. Что такое перехват действий на странице
Атака с исправлением пользовательского интерфейса (Атака с исправлением пользовательского интерфейса, Исправление пользовательского интерфейса) — это вредоносная техника, атака с перехватом веб-сеанса, основанная на визуальном обмане.
б. Особенности
1) Фактическая атака происходит со стороннего веб-сайта.
2) Пользователя обманом заставляют щелкнуть и запустить действие, не зная об этом.
в. Метод атаки
Основной принцип технологии перехвата операций со страницами заключается в том, чтобы скрыть невидимый фрейм на видимой пользователю странице. Обычно прозрачный iframe
1). clickjacking
.click-iframe{
position: relative;
}
.click-iframe iframe {
position: absolute;
border: 0;
top:-50px;
left:0;
opacity: 0; /** 将iframe 隐藏 **/
}
<div class="click-iframe">
<button>
抽奖啦
</button>
<iframe src="http://localhost:3000/static/clickIframe.html">
</iframe>
</div>
2).DragDrop Jacking (ниже ie9, ff более низкая версия браузера)
Используйте функцию перетаскивания страницы, чтобы использовать атакуемую страницу в качестве объекта перетаскивания,demoПеретащите его в поле ввода, чтобы получить исходный код атакуемого сайта.
3). tapjacking
4) Атака с наложением изображения
а) На странице комментария или форума вставьте изображение и установите позицию как абсолютную, чтобы закрыть страницу на любую позицию, замаскировав ее под исходный код веб-сайта, чтобы побудить пользователей посетить фишинговый веб-сайт. (демо будет улучшено)
г. Опасность
1) Побуждать пользователей посещать фишинговые сайты.
2) Украсть информацию о пользователе
е. Как защищаться
1). Для перехвата кликов это можно сделать, ограничив встраивание iframe
2) Для текстовой базы данных следует фильтровать css.
е. Обнаружение уязвимостей
1). Установлены ли X-Frame-options в заголовке ответа http или есть ли js, перехватывающий встраивание iframe (неисправен)
2) Встроить проверку с помощью iframe
4. Угон авианосца
А. Перехват DNS и перехват http/https
http hijacking очень распространен, проявляется в том, что ваш сайт загружается другим контентом, рекламой или другим вредоносным кодом
Некоторые мелкие операторы или посредники изменяют исходный код во время процесса запроса и добавляют вредоносный код.Из-за нарушения политики того же источника вредоносный код получает большую часть веб-разрешений.
Перехват HTTPS, очевидно, сложнее.Например, когда мы разрабатываем широко используемый инструмент захвата пакетов charles, мы можем настроить https-прокси для получения открытого кода запроса.
б. Как защищаться
1) При нормальных обстоятельствах угнанный код будет писать другие картинки, код js, css через document.write, мы можем ограничить эту ситуацию пере-document.writedemo
var _write = document.write,
_white_list = {
'127.0.0.1:8081': 1,
},
_RE_SCRIPTS = /<(script|img|iframe).*?src\=["']?([^"'\s>]+)/ig,
_RE_DOMAIN = /(.+?)\.([^\/]+).+/;
function sendTJ() {
console.log("被攻击啦:",arguments)
}
document.write = function(str) {
try {
var s, safes = [], unknows = [];
console.log(_RE_SCRIPTS)
while(s = _RE_SCRIPTS.exec(str)) {
console.log(s)
if(_white_list[(_RE_DOMAIN.exec(s) || [])[2]]) {
safes.push(s);
} else {
unknows.push(s);
}
}
if(unknows.length > 0) {
sendTJ([unknows[0], safes[0] || ""].join("~_~"), location.href);
}
try {
_write.call(this, str);
} catch(ex) {
_write(str);
}
} catch(ex) {
sendTJ(ex.name + ":" + ex.message, location.href);
}
};
Если атака не используется таким образом, ее невозможно заблокировать.
2) Используйте MutationObserver для мониторинга узлов dom и удаляйте теги, если обнаружены теги, не внесенные в белый список.demo
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var whiteListForCSP = [
'http(s)?:\/\/(.)+.xxx.com',
'http(s)?:\/\/hm.baidu.com',
'http(s)?:\/\/res.wx.qq.com'
]
// Mutation 观察者对象能监听在某个范围内的 DOM 树变化
if(MutationObserver) {
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// 返回被添加的节点,或者为null.
var nodes = mutation.addedNodes;
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var tagName = node.tagName && node.tagName.toLowerCase()
if ((tagName === "script" || tagName === "iframe" || tagName === "img" || tagName === "link") && node.src && (node.src.indexOf(window.location.protocol+"://"+window.location.hostname) !=0 && !new RegExp("^("+whiteListForCSP.join(")|(")+")").test(node.src))) {
try {
node.parentNode.removeChild(node);
console.log('拦截非白名单文件:', node.src);
} catch (e) {}
}
}
})
})
}
// 传入目标节点和观察选项
observer.observe(document, {
subtree: true,
childList: true
});
Недостаток этой схемы тоже очевиден, то есть код, вставляемый http hijacking, часто находится в первой строке, а код, загруженный синхронно, уже был выполнен, поэтому его невозможно перехватить на 100%.
3).CSP-решение
Перехват CSP можно делать очень осторожно (demo)
| Атрибуты | стоимость | описывать |
|---|---|---|
| child-src | посмотреть список значений | Ограничено исходным адресом веб-воркеров и других встроенных фреймов содержимого браузера. |
| font-src | Ограничить файлы шрифтов | |
| frame-src | Устанавливает исходный адрес встроенного контента, который разрешено загружать с помощью таких тегов, как и | |
| img-src | Ограничить исходный адрес изображений и значков | |
| media-src | Ограничить исходный адрес медиафайлов, загружаемых с помощью тегов | |
| object-src | Ограничить исходный адрес тегов | |
| prefetch-src | Укажите допустимые исходные адреса для предварительной загрузки или предварительного рендеринга | |
| script-src | Ограничить исходный адрес JavaScript | |
| style-src | Ограничение источников файлов каскадных таблиц стилей | |
| worker-src | Ограничить работников, SharedWorker или ServiceWorker Script Script |
| стоимость | описывать | demo |
|---|---|---|
| host | Доменное имя или IP-адрес или подстановочный знак * | http://*.example.com/store.example.com |
| schema | http: или https: или данные: | |
| 'self' | Должен содержать ', ресурс должен иметь ту же схему URL и порт, что и исходный сайт. | |
| 'unsafe-inline' | Разрешить ли встроенные ресурсы, сценарий или стиль или JavaScript: введите URL-адреса | |
| 'unsafe-eval' | Можно ли использовать eval | |
| 'none' |
5. a rel=noopener
Принцип: использование метки для открытия нового окна появится с объектом window.opener, указатель на исходное окно является объектом окна
Из-за ограничения политики того же происхождения объект не может читать и управлять DOM, но объект window.opener.location может быть записан
<!-- a页面 -->
<a href="http://127.0.0.1:8081/opener2.html" target="_blank">diff origin url2</a>
<!-- b 页面 -->
<script>
alert("访问opener2")
if(window.opener) {
if(window.opener.location) {
window.opener.location = "http://127.0.0.1:8081/hack.html"
} else {
alert("没有合适的opener属性")
}
} else {
alert("没有opener对象")
}
</script>
<!-- hack -->
<h3>哈哈哈, 你被攻击啦</h3>
6. CSS-безопасность
Здесь нет подробного теста методов атаки, связанных с CSS, описываются только точки атаки, которые существовали или могут существовать в CSS.
А. CSS очень отказоустойчив, и вы можете легализовать символы CSS, добавив {}
б) Атрибут класса загрузки ресурса CSS выполняет javascript (большинство браузеров перехватили эту операцию)
body {
backgroud-image:url('javascipt:alert(1)')
}
C. Выражение под ie может выполнять код js
г. Воспользуйтесь некоторыми особыми свойствами
a:visited, история css, может отправить запрос на определенный адрес для посещенной ссылки [было исправлено браузерами]
#a1:visited{
background: url(http://xxx.com/css/dosave?data=a1)
}
селектор атрибутов
input[value^="x"] {background: url(xxx)}
7. Некоторые вопросы безопасности
a. referer
| источник | станция доступа | Это читабельно | Примечание |
|---|---|---|---|
| https | http | false | - |
| без | http/https | false | - |
| Нет/любой источник | js/css/img/ajax | true | Реферер доступа к ресурсам на сайте должен посетить сайт |
| http | http | true | - |
| https | https | true | - |
| file/data | http | false | Исходная страница представляет собой локальный файл или URL-адрес данных. |
| Referrer-Policy | Любые | true/false | Определяется атрибутом referrer-policy |
| rel=noreferrer | Любые | без |
значение политики реферера
| стоимость | имея в виду |
|---|---|
| no-referrer | Не отправлять |
| no-referrer-when-downgrade | Даунгрейд не отправляется, https не отправляется при встраивании в http |
| origin | Отправлять только схему+хост+порт |
| origin-when-cross-origin | Только перекрестный запрос включает в себя информационное происхождение |
| same-origin | отправлять только под одним и тем же источником |
| strict-origin | Он должен быть отправлен с тем же уровнем безопасности протокола, например, когда https встроен в http, он не будет отправлен. |
| unsafe-url | всегда отправлять |
б. Запомните пароль
Все основные браузеры теперь поддерживают функцию запоминания паролей, эта функция очень мощная и может помочь нам уменьшить нагрузку на запись паролей, но если вы не будете осторожны, можно обнаружить более опасные вещи.
Когда форма, содержащая элемент пароля, отображается, браузер заполняет пароль, записанный в виде открытого текста, в соответствующий элемент пароля, и мы можем использовать операцию DOM для получения открытого текста пароля.
Примечание. Атака основана на xss.
Способ защиты:
-
xss-защита
-
Минимизируйте автоматическое заполнение полей формы пароля или других полей формы личных данных
Используйте свойство автозаполнения поля ввода
autocomplete = off | new-password
c. iframe
iframe — один из самых проблемных тегов в веб-безопасности. Понимание iframe и его механизма поможет нам принять соответствующие защитные механизмы.
некоторые свойства, связанные с безопасностьюdemo
| Атрибуты | стоимость | описывать |
|---|---|---|
| csp | iframe.csp = Ссылка на свойства и значения csp | Политика безопасности контента для настройки фреймов |
| referrerpolicy | Справочная реферальная политика | Используется для указания реферера при получении ресурсов iframe |
| sandbox | Создайте среду песочницы и управляйте ею, указав соответствующие свойства |
защитные меры
-
x-frame-options устанавливает правила встраивания iframe
-
js управляет правилами встраивания iframe
d). domain
1).домен может быть установлен на текущий домен или родительский домен или корневой домен
e).integrity
Содержит встроенные метаданные, которые пользовательский агент может использовать для проверки того, что извлеченный ресурс свободен от непредвиденных действий. См. также Целостность подресурсов.
8. нсп, нпм-проверить
Пакетное тестирование безопасности, npm для популярности фронтенд-разработки, чтобы принести евангелие, но также и скрытая угроза безопасности, когда мы представили ряд инструментов для простой упаковки, нет беспокойства по поводу того, угрожает ли подключаемый модуль безопасности.
npm-check --help
9. Наконец
Организуйте две таблицы, чтобы помочь вам проверить себя
1) Неполная проверка атаки
| Категория | Типы | описывать | кейс |
|---|---|---|---|
| Поле ввода | xss | Имеет ли поле ввода, отображаемое пользователем входных данных, фильтрацию xss | В поле ввода имени пользователя был введен недопустимый код, и код неправильно выполнялся при отображении на интерфейсе |
| url | xss | Есть ли ситуация, когда содержимое URL-адреса напрямую читается и отображается в html? | vue v-html, jquery html() и т. д. |
| url | Перейти к любому URL | После входа в систему обычно есть nextUrl. Если используется обслуживание запроса, он может перейти на фишинговый веб-сайт. | - |
| cookie | csrf | Важная информация о том, следует ли использовать httpOnly | Например, сеанс входа в систему, ключ и т. д. |
| form/ajax | csrf | Проверить, есть ли токен | - |
| upload | xss | Существуют ли какие-либо ограничения на загрузку файлов? | - |
2) Справочник по методам защиты
| Типы | защита | demo |
|---|---|---|
| CSRF | csrf token | - |
| - | js token | demo |
| - | Защита от капчи | |
| XSS | htmlEncode/JavascriptEncode | utils |
| - | X-XSS-Protection | Защиты включены по умолчанию в шапке |
| - | cookie httponly | |
| - | CSP | |
| - | Ограничение длины входного содержимого | |
| захват интерфейса | X-Frame-Options | deny/sameorigin |
| - | js перехватывает iframe | |
| - | Подпишите адрес встраивания iframe |
Справочная документация
Уууу, эта лошадь plus.com/package/Web…
блоги.MSDN.Microsoft.com/IE/2008/07/…
Матиас не такой. GitHub.IO/warm-no open oh...
информация Sec.Mozilla.org/guidelines/…
woohoo.ow asp.org/index.PHP/R…
developer.Mozilla.org/this-cn/docs/…
Книга "Секреты веб-хакинга"