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 Content Security Policy.

1. BROWSER SERVING YOUR WEB APPLICATION SECURITY
ALL YOU NEED TO KNOW

2. ABOUT ME
HI I’M PHILIPPE
I’m a Developer Evangelist for kuzzle.io.
Long-time internet developer, author,
screen caster, podcaster and speaker. I’m
specializes in PHP, Symfony, Kuzzle,
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
WHY WE ARE TALKING ABOUT THIS?

4. PROTECT YOUR DEV SITES
• Dev/test/qa/regression servers
• If they are available via the web
• Robots.txt is not enough
• forget
• File compliance
AVOID LEEKS

5. META NAME=ROBOTS
CODE
<meta name="robots” content="noindex” />

6. PROTECT YOUR SITES
• 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
META NAME=ROBOTS

7. PROTECT YOUR SITES
• content
• all
• index
• follow
META NAME=ROBOTS

8. PROTECT YOUR SITES
• content
• none
• noindex
• noarchive
• nocache
• nofollow
META NAME=ROBOTS

9. PROTECT YOUR SITES
• content
• nosnippet
• noodp
• noydir
• notranslate
• noimageindex
• unavailable_after: [RFC-850 date/time]
META NAME=ROBOTS

10. HEADER : X-ROBOTS-TAG
APACHE EXAMPLE
#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>

11. HEADER : X-ROBOTS-TAG
PHP EXAMPLE
<?php
header(“X-Robots-Tag : noindex”, true);

12. HEADER : X-ROBOTS-TAG
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

13. IMPROVE YOUR CODE
• 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]> )
META/HEADER : X-UA-COMPATIBLE

14. META: X-UA-COMPATIBLE
CODE
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="X-UA-Compatible” content="IE=9">

15. HEADER: X-UA-COMPATIBLE
CODE PHP
<?php
header (“X-UA-Compatible : IE=Edge,chrome=1”, true);

16. HEADER: X-UA-COMPATIBLE
APACHE EXAMPLE
#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>

17. CLICKJACKING PROTECTION
• “Clickjacking” protection
• <frame>
• <iframe>
• <object>
• Value
• DENY
• SAMEORIGIN
• ALLOW-FROM uri
META/HEADER : X-FRAME-OPTIONS

18. META/HEADER : X-FRAME-OPTIONS
BROWSER SUPPORT
Android Chrome Edge Firefox Internet Explorer Opera Safari
X-Frame-Option 4+ 4+ 12+ 4+ 8+ 10.5+ 4.0+
Allow-from N/A N/A* N/A* 18+ 9+ N/A N/A*
*Use CSP frame-ancestors directive instead

19. HEADER : X-FRAME-OPTIONS
APACHE EXAMPLE
#apache
<IfModule mod_headers.c>
Header set X-Frame-Options “deny”
</IfModule>

20. HEADER : X-FRAME-OPTIONS
PHP CODE
<?php
header(“X-Frame-Options: deny”, true);

21. META : X-FRAME-OPTIONS
CODE
<meta http-equiv="X-Frame-Options” content="deny">

22. PROTECT AGAINS DRIVE-BY ATTAQUE
• Only one value: nosniff
HEADER : X-CONTENT-TYPE-OPTIONS
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 EXAMPLE
#apache
<IfModule mod_headers.c>
Header set X-Content-Type-Options “nosniff”
</IfModule>

24. HEADER : X-CONTENT-TYPE-OPTIONS
PHP CODE
<?php
header(“X-Content-Type-Options: nosniff”, true);

25. XSS PROTECTION
• Automatic protection against XSS
• mode=block
• report=<reporting-URI>
META/HEADER : X-XSS-PROTECTION
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

26. HEADER : X-XSS-PROTECTION
APACHE EXAMPLE
#apache
<IfModule mod_headers.c>
Header set X-XSS-Protection “1; mode=block”
</IfModule>

27. HEADER : X-XSS-PROTECTION
PHP CODE
<?php
header(“X-XSS-Protection: 0”, true);

28. META : X-XSS-PROTECTION
EXAMPLE
<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>">

29. SUPER PROTECTION
• 3 level of specification
• Specification 1.0 Recommendation
• http://w3c.org/TR/CSP1
• Specification 2.0 Recommendation
• http://w3c.org/TR/CSP2
• Specification 3.0 Working Draft
• http://w3c.org/TR/CSP3
META/HEADER : CONTENT-SECURITY-POLICY

30. SUPER PROTECTION
META/HEADER : CONTENT-SECURITY-POLICY
Android Chrome Edge Firefox Internet Explorer Opera Safari
Recommendation 1 4.4+ 25+ 12+ 23+ 11+ 7+
X-Content-Security-Policy 12+* 4+ 10+
X-WebKit-CSP 14+ 5.1+
Recommendation 2 53+ 40+ 15+ 31+** 27+ 10+
Working Draft 3
* Limited
** Partial

31. META/HEADER : CONTENT-SECURITY-POLICY
• default-src (csp 1, 2, 3)
• child-src (csp 2, 3)
• connect-src (csp 1, 2, 3)
• font-src (csp 1, 2, 3)
• frame-src (csp 1, 3)
• img-src (csp 1, 2, 3)
• manifest-src (csp 3)
• media-src (csp 1, 2)
• object-src (csp 1, 2)
• script-src (csp 1, 2)
• style-src (csp 1, 2)
• worker-src (csp 3)
FETCH DIRECTIVES

32. META/HEADER : CONTENT-SECURITY-POLICY
• * (csp 1, 2, 3)
• 'self' (csp 1, 2, 3)
• 'none' (csp 1, 2, 3)
• uri (csp 1, 2, 3)
• media1.example.com
• *.cdn.example.com
• protocol
• https: (csp 1, 2, 3)
• http: (csp 1, 2, 3)
• data: (csp 1, 2, 3)
• mediastream: (csp 2, 3)
• blob: (csp 2, 3)
• filesystem: (csp 2, 3)
• unsafe-inline (csp 1, 2, 3)
• unsafe-eval (csp 1, 2, 3)
• 'nonce-<base64-value>' (csp 2, 3)
• <hash-source> (csp 2, 3)
• 'strict-dynamic' (csp 2, 3)
FETCH DIRECTIVES VALUES

33. META/HEADER : CONTENT-SECURITY-POLICY
• Document Directives
• base-uri (csp 2, 3)
• disown-opener (csp 3)
• plugin-types (csp 2, 3)
• sandbox (csp 1, 2, 3)
• Navigation Directives
• form-action (csp 2, 3)
• frame-ancestors (csp 2, 3)
• Directives Defined in Other
Documents
• block-all-mixed-content (csp 3)
• require-sri-for (csp 3)
• upgrade-insecure-requests (csp 3)
DIRECTIVES

34. META/HEADER: CONTENT-SECURITY-POLICY
• allow-forms
• allow-modals
• allow-orientation-lock
• allow-pointer-lock
• allow-popups
• allow-popups-to-escape-sandbox
• allow-presentation
• allow-same-origin
• allow-scripts
• allow-top-navigation
SANDBOX VALUE

35. HEADER: CONTENT-SECURITY-POLICY
APACHE EXAMPLE
#apache
<IfModule mod_headers.c>
Header set Content-Security-Policy “default-src ‘self’;”
</IfModule>

36. HEADER: CONTENT-SECURITY-POLICY
PHP CODE
<?php
header(“Content-Security-Policy: default-src ‘self’;”, true);

37. META: CONTENT-SECURITY-POLICY
CODE
<meta http-equiv="Content-Security-Policy" content="default-src https:">

38. META/HEADER: CONTENT-SECURITY-POLICY
EXAMPLES
default-src 'self';
script-src 'self';
script-src 'self' www.google-analytics.com ajax.googleapis.com;
default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';
default-src 'self'; img-src *; object-src media1.example.com media2.example.com
*.cdn.example.com; script-src trustedscripts.example.com
default-src https: 'unsafe-inline' 'unsafe-eval'
default-src *; script-src https://example.com/js/;”
default-src *; sandbox allow-scripts

39. META/HEADER: CONTENT-SECURITY-POLICY
EXAMPLES
default-src 'self'; frame-ancestors 'none'
base-uri 'self'
object-src 'none'
plugin-types application/x-shockwave-flash
plugin-types application/x-java-applet
form-action 'none'
default-src 'self'; require-sri-for script style
block-all-mixed-content
upgrade-insecure-requests; default-src https:

40. META/HEADER : CONTENT-SECURITY-POLICY
• Reporting Directives
• report-uri (CSP 1, 2, 3)
• report-to (CSP 3)
• Meta/Header
• Content-Security-Policy-Report-Only
REPORT

41. HEADER : CONTENT-SECURITY-POLICY
APACHE EXAMPLE REPORT
Content-Security-Policy “default-src ‘self’; report-uri http://example.org/csp-report.php”
http://evil.example.com/image.png

42. META/HEADER : CONTENT-SECURITY-POLICY
RESPONSE
{
“csp-report”: {
“document-uri”: “http://example.org/page.html",
“referrer”: “http://evil.example.com/haxor.html",
“blocked-uri”: “http://evil.example.com/image.png",
“violated-directive”: “default-src ‘self’”,
“original-policy”: “default-src ‘self’; report-uri http://example.org/csp-report.cgi”
}
}

43. 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
META/HEADER: ACCESS-CONTROL-*

44. CROSS-ORIGIN RESOURCE SHARING
META/HEADER: ACCESS-CONTROL-*
Android Chrome Edge Firefox Internet Explorer Opera Safari
Access-Control-* 2.1+ 4+ 12+ 3.5+ 10+ 12+ 4+

45. META: ACCESS-CONTROL-*
CODE
<meta http-equiv="Access-Control-Allow-Origin” content="*">
<meta http-equiv="Access-Control-Allow-Origin” content="http://kuzzle.io">
<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">

46. HEADER: ACCESS-CONTROL-*
APACHE EXAMPLE
#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>

47. HEADER: ACCESS-CONTROL-*
PHP CODE
<?php
header(“Access-Control-Allow-Origin: http://kuzzle.io”, true);
header(“Access-Control-Allow-Credentials: true”, true);
header(“Access-Control-Allow-Headers: Content-Length, X-Powered-By”, true);
header(“Access-Control-Allow-Methods: POST, GET, OPTIONS”, true);
header(“Access-Control-Expose-Headers: Content-Length, X-Powered-By”, true);
header(“Access-Control-Max-Age: 60”, true);
header(“Access-Control-Request-Headers: Content-Length, X-Powered-By”, true);
header(“Access-Control-Request-Methods: POST”, true);

48. PROTECT YOUR SESSIONS
• Stealing session (session cookie) is quite simple.
• Use HTTPS on your server if you use sessions.
• But it is not enough...
PHP CONFIGURATION

49. PROTECT YOUR SESSIONS
PHP CONFIGURATION
session.use_cookies “1”
session.use_only_cookies “1”
session.cookie_secure “1”
session.cookie_httponly “1”

50. PROTECT YOUR COOKIES
• Secure
• HttpOnly
• SameSite
SETCOOKIE
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+ N/A N/A N/A 39+ N/A

51. PROTECT YOUR COOKIES
PHP CODE
bool setcookie ( string $name [, string $value = "" [, int $expire = 0 [, string $path = ""
[, string $domain = "" [, bool $secure = false [, bool $httponly = false ]]]]]] )

52. PROTECT IN TRANSIT DATA
• Require the browser to use a site in SSL (and retains the information)
HTTP STRICT TRANSPORT SECURITY
Android Chrome Edge Firefox Internet Explorer Opera Safari
Strict-Transport-
Security
4.4+ 4+ 12+ 4+ 11+ 12+ 7+

53. HTTP STRICT TRANSPORT SECURITY
EXAMPLES
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

54. HTTP STRICT TRANSPORT SECURITY
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>

55. HTTP STRICT TRANSPORT SECURITY
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;
}

56. PROTECT IN TRANSIT DATA
• Tells a Web client to associate a specific public cryptographic public key
to a Web server to reduce the risk of MITM attacks with falsified
certificates.
HTTP PUBLIC KEY PINNING (HPKP)
Android Chrome Edge Firefox Internet Explorer Opera Safari
Public-Key-Pins 38+ 38+ N/A 35+ N/A 25+ N/A
Report-uri 46+ 46+ N/A N/A N/A 33+ N/A

57. HTTP PUBLIC KEY PINNING (HPKP)
EXAMPLES
Public-Key-Pins: pin-sha256=<base64==>; max-age=<expireTime>;
Public-Key-Pins: pin-sha256=<base64==>; max-age=<expireTime>; includeSubDomains
Public-Key-Pins: pin-sha256=<base64==>; max-age=<expireTime>; report-uri=<reportURI>
Public-Key-Pins-Report-Only: pin-sha256=<base64==>; max-age=<expireTime>; report-
uri=<reportURI>

58. PROTECT IMPORTED FILES INTEGRITIES
• Verify extracted files are delivered without unexpected manipulation.
• Uses a cryptographic hash.
• <script>, <link>
• Base64 of
• sha256
• sha384
• sha512
SUBRESOURCE INTEGRITY

59. SUBRESOURCE INTEGRITY
EXAMPLES
<script src="https://example.com/example-framework.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
crossorigin="anonymous"></script>
<link rel="stylesheet” href="https://site53.example.net/style.css"
integrity="sha384-+/M6kredJcxdsqkczBUjMLvqyHb1K/JThDXWsBVxMEeZHEaMKEOEct339VItX1zB"
crossorigin="anonymous">
cat example-framework.js | openssl dgst -sha384 -binary | openssl enc -base64 -A

60. PROTECT YOUR
• Allows you to specify when the browser will define a Referer header.no-
referrer
• no-referrer
• no-referrer-when-downgrade
• origin
• origin-when-cross-origin
• same-origin
• strict-origin
• strict-origin-when-cross-origin
• unsafe-url
HEADER: REFERRER-POLICY

61. HEADER: REFERRER-POLICY
COMPATIBILITY
Android Chrome Edge Firefox Internet Explorer Opera Safari
Referrer-Policy 56+ 56+ N/A 50+ N/A 43+ N/A
same-origin N/A N/A N/A 52+ N/A N/A N/A
strict-origin N/A N/A N/A 52+ N/A N/A N/A
strict-origin-
when-cross-
origin
N/A N/A N/A 52+ N/A N/A N/A

62. ANY QUESTIONS?
THANK YOU!
If you want to talk more,
feel free to contact me.
http://kuzzle.io
This presentation was created using Keynote. The text
is set in Oswald and Ubuntu. The source code is set in
Ubuntu Mono. The iconography is provided by Keynote,
kuzzle.io 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.
Copyright ©
This work is licensed under Creative Commons
Attribution-ShareAlike 4.0 International. For uses not
covered under this license, please contact the author.
hello@kuzzle.io
@kuzzleio
Kuzzle
kuzzleio
http://kuzzle.io
Browser Serving Your Web Application Security
2014-2017 Philippe Gamache
GAMACHE, Philippe. “Browser Serving Your Web
Application Security” NorthEast PHP Conference.
August 10, 2017. Conference presentation.
pgamache@kuzzle.io
@philoupedia
philippegamache
joind.in/talk/c5998
Please visit us at: