One important concept in web application security is defense in depth. You protect your server, your network, your database and your application, but what about the user browser? Can it be done? Yes! Several new technologies and protocols to assist security has been added to the browsers. Several should be added, activated and configure from your web server or web page. In this presentation we will explore these technologies and learn how to use them. You’ll learn about the Robots meta tags (for crawlers indexing), Browsing Compatibility, XSS and Clickjaking Protection, SSL/TLS Control, and the new Feature Policy.

1. Browser Serving Your Web
Application Security
All you need to know

2. About me
HI I’M PHILIPPE
I’m a Senior Application Security Analyst at
Lightspeed. Long-time internet developer, author,
screen caster, podcaster and speaker. I’m specializes
in PHP, Symfony, security, code quality, performance,
real time and geolocation.
Sécurité PHP 5 et MySQL 5
OWASP Montreal
PHP Quebec
Table Top Game Developer
Pen & Paper RPG Writer

3. Purpose of the Presentation
Improve the code of your website
Protect your site against certain attacks
Protect your users from certain attacks
Protect your development sites

4. Protect Your Dev Sites
Avoid Leaks
Dev/test/qa/regression servers
If they are available via the web
Robots.txt is not enough
forget
File compliance

5. Meta name=robots
<meta name="robots" content="noindex" />

6. Meta robots names
<meta name="robots" content="noindex" />

7. Meta robots names
name
robots for all robots
specific:
Googlebot: Googlebot-News, Googlebot-Image, Googlebot-Video, Googlebot-Mobile,
Mediapartners-Google, Mediapartners, AdsBot-Google, AdsBot-Google-Mobile-Apps
slurp
msnbot, bingbot
teoma

8. Meta robots contents
<meta name="robots" content="noindex" />

9. Meta robots contents
all
index
follow

10. Meta robots contents
none
noindex
noarchive
nocache
nofollow

11. Meta robots contents
nosnippet
noodp
noydir
noyaca
notranslate
noimageindex
unavailable_after: [RFC-850 date/time]

12. Header: X-Robots-Tag
#apache
<IfModule mod_headers.c>
Header set X-Robots-Tag "noindex, nofollow, noarchive"
<FilesMatch ".(doc|pdf|png|jpe?g|gif)$">
Header set X-Robots-Tag "noindex, noarchive, nosnippet"
</FilesMatch>
<IfModule>

13. X-Robots-Tag PHP Example
<?php
header("X-Robots-Tag : noindex", true);

14. Examples
X-Robots-Tag: noarchive
X-Robots-Tag: unavailable_after: 25 Jun 2010 15:00:00 PST
X-Robots-Tag: googlebot: nofollow
X-Robots-Tag: otherbot: noindex, nofollow

15. Meta/Header: X-UA-Compatible
Normally, for IE8 +
Requests IE to use the latest render engines or a particular version.
Should use the ChromeFrame renderer (for IE6 and IE7)
Does not validate
Reduce the display speed of the site if it needs to change mode
Does not work in a conditional comment ( <!--[if lt IE 7]> )

16. Meta: X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=9">

17. Header: X-UA-Compatible
#apache
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=Edge,chrome=1"
# Mod_headers Does not use the content type,
# but we do not want to send this header
<FilesMatch ".(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|
m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|
appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>

18. Meta/Header: X-Frame-Options
“Clickjacking” protection
<frame>
<iframe>
<object>
Value
DENY
SAMEORIGIN
ALLOW-FROM uri

19. Compatibility
Android Chrome Edge Firefox Internet Explorer Opera Safari
X-Frame-Option 4+ 4+ 12+ 4+ 8+ 10.5+ 4+
Allow-from N/A N/A* N/A* 18+ 9+ N/A N/A*
CSP* 53+ 40+ 15+ 31+ N/A 27+ 10+
*Use Content-Security-Policy frame-ancestors directive instead

20. Header: X-Frame-Options
#apache
<IfModule mod_headers.c>
Header set X-Frame-Options "deny"
</IfModule>

21. Meta: X-Frame-Options
<meta http-equiv="X-Frame-Options" content="deny">

22. Header: X-Content-Type-Options
Only one value: nosniff
Android Chrome Edge Firefox Internet Explorer Opera Safari
nosniff 3+ 1.0+* 11+ 50+** 8+ 13+ N/A
* during download
** or with NoScript

23. Header: X-Content-Type-Options
#apache
<IfModule mod_headers.c>
Header set X-Content-Type-Options "nosniff"
</IfModule>

24. Meta/Header: XSS Protection
Automatic protection against XSS
mode=block
report=<reporting-URI>
Android Chrome Edge Firefox Internet Explorer Opera Safari
X-XSS-Protection (Yes) 4+ 11+ N/A* 8+ Yes 4+
report No Chromium No No No No No
* yes with NoScript

25. Header: X-XSS-Protection
#apache
<IfModule mod_headers.c>
Header set X-XSS-Protection "1; mode=block"
</IfModule>

26. Meta: X-XSS-Protection
<meta http-equiv="X-XSS-Protection" content="1">
<meta http-equiv="X-XSS-Protection" content="1; mode=block">
<meta http-equiv="X-XSS-Protection" content="0">
<!-- Chromium only -->
<meta http-equiv="X-XSS-Protection" content="1; report=<url>">

27. Cross-Origin Resource Sharing
Access-Control-Allow-Credentials
Access-Control-Allow-Headers
Access-Control-Allow-Methods
Access-Control-Allow-Origin
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Request-Headers
Access-Control-Request-Method

28. Compatibility
Android Chrome Edge Firefox Internet Explorer Opera Safari
Access-Control-* 2.1+ 4+ 12+ 3.5+ 10+ 12+ 4+

29. Meta: Access-Control-*
<meta http-equiv="Access-Control-Allow-Origin” content="*">
<meta http-equiv="Access-Control-Allow-Origin” content="http://lightspeedhq.com">
<meta http-equiv="Access-Control-Allow-Credentials” content="true">
<meta http-equiv="Access-Control-Allow-Headers” content="Content-Length, X-Powered-By">
<meta http-equiv="Access-Control-Allow-Methods” content="POST, GET, OPTIONS">
<meta http-equiv="Access-Control-Expose-Headers” content="Content-Length, X-Powered-By">
<meta http-equiv="Access-Control-Max-Age” content="600">
<meta http-equiv="Access-Control-Request-Headers” content="Content-Length, X-Powered-By">
<meta http-equiv="Access-Control-Request-Methods” content="POST">

30. Header: Access-Control-*
#apache
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin “http://kuzzle.io”
Header set Access-Control-Allow-Credentials “true”
Header set Access-Control-Allow-Headers “Content-Length, X-Powered-By”
Header set Access-Control-Allow-Methods “POST, GET, OPTIONS”
Header set Access-Control-Expose-Headers “Content-Length, X-Powered-By”
Header set Access-Control-Max-Age “60”
Header set Access-Control-Request-Headers “Content-Length, X-Powered-By”
Header set Access-Control-Request-Methods “POST”
</IfModule>

31. Protect your sessions
Stealing session (session cookie) is quite simple.
Use HTTPS on your server if you use sessions.
But it is not enough...

32. PHP Configuration
session.use_cookies "1"
session.use_only_cookies "1"
session.cookie_secure "1"
session.cookie_httponly "1" // 7.2+

33. Protect your COOKIES
Secure
HttpOnly
SameSite
Android Chrome Edge Firefox Internet Explorer Opera Safari
Secure 1+ 1+ 10+ 3+ 9+ 11+ 5+
HttpOnly 1+ 1+ 10+ 3+ 9+ 11+ 5+
SameSite 51+ 51+ 17+ 61+ 11+ Partial 39+ 12+

34. PHP Code
// 7.0+
bool setcookie ( string $name [, string $value = "" [, int $expire = 0 [, string $path = "" [, string
$domain = "" [, bool $secure = false]]]]] );
// 7.2
bool setcookie ( string $name [, string $value = "" [, int $expire = 0 [, string $path = "" [, string
$domain = "" [, bool $secure = false [, bool $httponly = false ]]]]]] );
// 7.3
bool setcookie ( string $name [, string $value = "" [, int $expire = 0 [, string $path = "" [, string
$domain = "" [, bool $secure = false [, bool $httponly = false [, bool $siteonly = false ]]]]]]] );
bool setcookie ( string $name [, string $value = "" [, int $expire = 0 [, array $options ]]] );

35. HTTP Strict Transport Security
Require the browser to use a site in SSL (and retains the information)
Android Chrome Edge Firefox Internet Explorer Opera Safari
Strict-Transport-Security 4.4+ 4+ 12+ 4+ 11+ 12+ 7+

36. HTTP Strict Transport Security
Strict-Transport-Security: max-age=<expire-time>
Strict-Transport-Security: max-age=<expire-time>; includeSubDomains
Strict-Transport-Security: max-age=<expire-time>; preload
Strict-Transport-Security: max-age=<expire-time>; includeSubDomains; preload

37. Apache Example
#apache
<VirtualHost *:80>
ServerAlias *
RewriteEngine On
RewriteRule ^(.*)$ https://%{HTTP_HOST}$1 [redirect=301]
</VirtualHost>
<VirtualHost *:443>
ServerAlias *
...
<IfModule mod_headers.c>
Header set Strict-Transport-Security "max-age=16070400; preload"
</IfModule>
</VirtualHost>

38. PHP Example
<?php
// IIS defines the HTTPS protocol to be "off" for non-SSL requests
if (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') {
header(’Strict-Transport-Security: max-age=16070400’);
} else {
header('Location: https://’.$_SERVER[’HTTP_HOST'] .
$_SERVER['REQUEST_URI'], true, 301);
exit;
}

39. Header: Referrer-Policy
Allows you to specify when the browser will define a Referer header
Referer is actually a misspelling of the word "referrer".
The Referrer-Policy header does not share this misspelling.

40. Header: Referrer-Policy
Policy Document Navigation to Referrer
no-referrer
https://example.com/
page.html
any domain or path no referrer
no-referrer-when-
downgrade
https://example.com/
page.html
https://example.com/
page2.html
https://example.com/
page.html
no-referrer-when-
downgrade
https://example.com/
page.html
https://
lightspeed.com
https://example.com/
page.html
no-referrer-when-
downgrade
https://example.com/
page.html
http://example.com no referrer
origin
https://example.com/
page.html
any domain or path https://example.com

41. Header: Referrer-Policy
Policy Document Navigation to Referrer
origin-when-cross-
origin
https://example.com/
page.html
https://example.com/
page2.html
https://example.com/
page.html
origin-when-cross-
origin
https://example.com/
page.html
https://
lightspeed.com
https://example.com/
origin-when-cross-
origin
https://example.com/
page.html
http://example.com/
page.html
https://example.com/
same-origin
https://example.com/
page.html
https://example.com/
page2.html
https://example.com/
page.html
same-origin
https://example.com/
page.html
https://
lightspeed.com
no referrer

42. Header: Referrer-Policy
Policy Document Navigation to Referrer
strict-origin
https://example.com/
page.html
https://
lightspeed.com
https://example.com/
strict-origin
https://example.com/
page.html
http://example.com no referrer
strict-origin
http://example.com/
page.html
any domain or path http://example.com/

43. Header: Referrer-Policy
Policy Document Navigation to Referrer
strict-origin-when-
cross-origin
https://example.com/
page.html
https://example.com/
page2.html
https://example.com/
page.html
strict-origin-when-
cross-origin
https://example.com/
page.html
https://
lightspeed.com
https://example.com/
strict-origin-when-
cross-origin
https://example.com/
page.html
http://example.com/ no referrer
unsafe-url
https://example.com/
page.html?q=123
any domain or path
https://example.com/
page.html?q=123

44. Compatibility
Android Chrome Edge Firefox Internet Explorer Opera Safari
Referrer-Policy 56+ 56+ 17+ Partial 50+ 11+ Partial 43+ 11.1+
same-origin 63+ 63+ N/A 52+ N/A N/A 11.1+
strict-origin 63+ 63+ N/A 52+ N/A N/A 11.1+
strict-origin-
when-cross-
origin
63+ 63+ N/A 52+ N/A N/A 11.1+

45. Feature-Policy
The HTTP Feature-Policy header provides a mechanism to explicitly declare what
functionality is allowed on a website.
Android Chrome Edge Firefox Internet Explorer Opera Safari
Feature-Policy 60+ 60+ N/A N/A N/A 48+ N/A

46. Logic Structure
Feature-Policy: <directive> <allowlist>; [<directive> <allowlist>;[...]]

47. Directives
Feature-Policy: <directive> <allowlist>; [<directive> <allowlist>;[...]]

48. Directives
accelerometer
accelerometer
animations
autoplay
camera
encrypted-media
fullscreen
geolocation
gyroscope
legacy-image-formats
magnetometer
maximum-downscaling-image

49. Directives
microphone
midi
notifications
payment
picture-in-picture
push
speaker
sync-xhr
usb
vibrate
vr

50. Allow List
Feature-Policy: <directive> <allowlist>; [<directive> <allowlist>;[...]]

51. Allow List
*
'self'
'none'
<origin(s)>

52. THANK YOU
This presentation was created using Keynote. The
iconography is provided by Keynote and Font Awesome.
Unless otherwise noted, all photographs are used by
permission under a Creative Commons license. Please refer
to the Photo Credits slide for more information.
Browser Serving Your Web Application Security
Copyright © 2014-2018 Philippe Gamache
This work is licensed under Creative Commons Attribution-
ShareAlike 4.0 International. For uses not covered under this
license, please contact the author.
If you want to talk more, feel free to contact me.
pres.header@ph-il.ca
@philoupedia
philippegamache
Philippe Gamache