Getting Browsers to Improve the Security of Your Webapp

Getting Browsers to Improve the Security of Your Webapp

Most web developers have some knowledge of input sanitization and encryption, but what happens when you forget an edge case or when users are connected to a rogue access point?

Through the use of technologies like strict transport security, content security policy, sub-resource integrity, and the referrer policy, web developers can instruct browsers to add a second layer of defenses against the most common attacks.

https://confoo.ca/en/yul2017/session/getting-browsers-to-help-improve-the-security-of-your-webapp

0110e86fdb31486c22dd381326d99de9?s=128

Francois Marier

March 09, 2017
Tweet

Transcript

  1. François Marier @fmarier Getting Browsers to Improve the Security of

    Your Webapp
  2. external resources user content cookies encryption

  3. external resources

  4. Subresource integrity mechanism for preventing tampering of static assets

  5. None
  6. None
  7. https://ajax.googleapis.com/ajax /libs/jquery/1.9.1/jquery.min.js

  8. what would happen if that server were compromised?

  9. None
  10. Bad Things™ steal sessions leak confidential data redirect to phishing

    sites enlist DDoS zombies
  11. simple solution

  12. instead of this: <script src=”https://ajax.googleapis.com...”> integrity=”sha256-1z4uG/+cVbhShP...” crossorigin=”anonymous”>

  13. <script src=”https://ajax.googleapis.com...”> integrity=”sha256-1z4uG/+cVbhShP...” crossorigin=”anonymous”> do this:

  14. guarantee: script won't change or it'll be blocked

  15. rel=”noopener” mechanism for disabling the window.opener object

  16. My Account • Change my address • Change my billing

    card • Reset my password • Delete my account • Watch some cute kittens!
  17. My Account • Change my address • Change my billing

    card • Reset my password • Delete my account • Watch some cute kittens! kittens!!!!!!!!
  18. <a href=”...” target=”_blank”>

  19. window.opener.location

  20. window.opener.location

  21. window.opener.location = 'http://stealmypasswd.org';

  22. My Account • Change my address • Change my billing

    card • Reset my password • Delete my account • Watch some cute kittens! kittens!!!!!!!!
  23. Session Expired Username: Password: Log back in! kittens!!!!!!!!

  24. Session Expired Username: Password: Log back in! esnowden **********

  25. My Account • Change my address • Change my billing

    card • Reset my password • Delete my account • Watch some cute kittens!
  26. solutions

  27. <a href=”...” target=”_blank”>

  28. <a href=”...” target=”_blank” rel=”noopener”>

  29. window.opener == null

  30. Referrer Policy mechanism for trimming the Referer header

  31. None
  32. http://example.com/search?q=serious+medical+condition Click here for the cheapest insurance around! Bla bla

    bla, bla bla, bla bla bla bla. Bla bla bla, bla bla, bla bla bla bla. Bla bla bla, bla bla, bla bla bla bla. Bla bla bla, bla bla, bla bla bla bla. Bla bla bla, bla bla, bla bla bla bla. Bla bla bla, bla bla, bla bla bla bla. Bla bla bla, bla bla, bla bla bla bla. Bla bla bla, bla bla, bla bla bla bla. Bla bla bla, bla bla, bla bla bla bla. Bla bla bla, bla bla, bla bla bla bla.
  33. None
  34. Referrer-Policy: no-referrer <meta name="referrer" content="origin"> <a href="http://example.com" referrer="origin">

  35. Referrer-Policy: no-referrer <meta name="referrer" content="no-referrer"> <a href="http://example.com" referrer="origin">

  36. Referrer-Policy: no-referrer <meta name="referrer" content="no-referrer"> <a href="http://example.com" referrerPolicy="no-referrer">

  37. no-referrer no-referrer-when-downgrade same-origin strict-origin strict-origin-when-cross-origin

  38. no-referrer no-referrer-when-downgrade same-origin strict-origin strict-origin-when-cross-origin

  39. no-referrer no-referrer-when-downgrade same-origin strict-origin strict-origin-when-cross-origin

  40. no-referrer no-referrer-when-downgrade same-origin strict-origin-when-cross-origin

  41. no-referrer no-referrer-when-downgrade same-origin strict-origin-when-cross-origin https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy

  42. user content

  43. Sandboxed iframes mechanism for restricting embedded documents

  44. <iframe src=”resume.html”>

  45. window.parent

  46. seriousapp.com seriousappusercontent.com

  47. <iframe src=”resume.html” sandbox=””>

  48. scripts popups forms

  49. scripts popups forms https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox

  50. X-Content-Type-Options mechanism for disabling content type sniffing

  51. PDF

  52. Review Papers • Witty-Title.pdf • Serious-Sounding-Topic.pdf • Series-of-buzzwords.pdf • Celebrity-Paper.pdf

    • Half-Ass-Paper.pdf
  53. %PDF-1.5 <html> <body> <script> ... </script> </body> </html>

  54. %PDF-1.5 <html> <body> <script> ... </script> </body> </html>

  55. <form action=”review.cgi”> <input type=”hidden” name=”paper-id” value=”42”> <input type=”hidden” name=”score” value=”100”>

    </form>
  56. X-Content-Type-Options: nosniff

  57. Content Security Policy aka CSP mechanism for preventing XSS

  58. telling the browser the content that is allowed to load

  59. Hi y'all<script> alert('p0wned'); </script>! Tweet! What's on your mind?

  60. without CSP

  61. Hi y'all! John Doe - just moments ago p0wned Ok

  62. with CSP

  63. Hi y'all! John Doe - just moments ago

  64. Content-Security-Policy: script-src 'self' https://cdn.example.com

  65. script-src object-src style-src img-src media-src font-src connect-src ...

  66. script-src object-src style-src img-src media-src font-src connect-src ... https://developer.mozilla.org/docs/Web/HTTP/CSP

  67. cookies

  68. None
  69. 1234

  70. Set-Cookie: sessionid=1234

  71. 1234

  72. 1234

  73. document.cookie

  74. Cookie options mechanism for restricting the scope of cookies

  75. Set-Cookie: sessionid=1234; httponly

  76. document.cookie == null

  77. Set-Cookie: sessionid=1234; secure

  78. 1234

  79. None
  80. good, but not great

  81. 1234

  82. Set-Cookie: sessionid=1234

  83. 1234

  84. 666

  85. 666

  86. Cookie prefixes mechanism for enforcing cookie restrictions

  87. Set-Cookie: __Secure-sessionid=1234; secure

  88. __Secure-sessionid=666

  89. None
  90. encryption

  91. HTTPS mechanism for securing information in transit

  92. if you're not using it, now is the time to

    start :)
  93. None
  94. HTTPS is not enough you need to do it properly

  95. RC4

  96. SHA-1 RC4

  97. SHA-1 1024-bit certificates RC4

  98. SHA-1 1024-bit certificates RC4 weak DH parameters

  99. None
  100. https://mozilla.github.io/server-side-tls/ssl-config-generator/

  101. https://www.ssllabs.com/ssltest/

  102. Strict Transport Security aka HSTS mechanism for preventing HTTPS to

    HTTP downgrades
  103. telling the browser that your site should never be reached

    over HTTP
  104. None
  105. GET bank.com 301 → GET https://bank.com 200 → no HSTS,

    no sslstrip
  106. GET bank.com → 200 no HSTS, with sslstrip

  107. what does HSTS look like?

  108. Strict-Transport-Security: max-age=31536000

  109. with HSTS, with sslstrip GET https://bank.com 200 →

  110. no HTTP traffic for sslstrip to tamper with

  111. https://hstspreload.org/

  112. referrer policy subresource integrity noopener cookie prefixes cookie options sandboxed

    iframes x-content-type-options content security policy https strict transport security
  113. Questions? feedback: francois@mozilla.com @fmarier mozilla.dev.security © 2017 François Marier <francois@mozilla.com>

    This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 License.
  114. photo credits: explosion: https://www.flickr.com/photos/-cavin-/2313239884/ kittens: https://www.flickr.com/photos/londonlooks/5693093073 cookie: https://www.flickr.com/photos/amagill/34754258/