HTML5 Security for Web Application Development #appsecapac2014

1. Webアプリケーション開発における   HTML5のセキュリティ   HTML5  Security  for  Web  Applica7on  Development   松本悦宜   Yoshinori  Matsumoto   1  
2. 本日の内容 /  Agenda •  Who  am  I     •  Introduc7on  of  the  Research  Report   •  JavaScript  API   •  HTML5  Elements  and  AHributes   •  Headers  with  Security  Features   2  
3. Who  am  I   •  松本 悦宜 ,  まつもと よしのり   Yoshinori  MATSUMOTO   •  JPCERT/CC  早期警戒グループ 情報セキュリティアナリスト   Informa7on  Security  Analyst  in  Watching  and  Warning  Group,　JPCERT   Coordina7on  Center   •  I’m  interested  in…   Analyzing  web  security,  targeted  aHacks,  CMS,  mul7-­‐byte  domains,   and  so  on.   3  
4. Introduc)on  of  the  Research  Report 4  
5. Introduc7on  of     Our  Research  Report •  2013年10月に「HTML5を利用したWebアプリケーションのセキュリティ問題 に関する調査報告書」を発行した   We  published  a  research  report  on  security  issues  of  HTML5  (Japanese   only,  English  version  will  be  coming  up  :p  )   5   JPCERT      HTML5 Search hHps://www.jpcert.or.jp/research/html5.html    
6. Introduc7on  of  Our  Report 報告書の使い方   The  Research  Report  Term  of  Use     •  技術書・ガイドラインのベース資料   •  仲間内の勉強会資料   •  セミナの参考資料   　　　　　　　　　　　などにどうぞ   Expects  to  be  u7lized  as…     •  Technical  paper,  basic  informa7on  for  guidelines     •  Material  for  study  mee7ngs     •  Reference  informa7on  for  seminars     6  
7. Introduc7on  of   Our  Research  Report 報告書の使い方   The  Research  Report  Term  of  Use     引用・転載にあたっては以下を参照してください。   JPCERT/CC  ご利用にあたってのお願い   hHps://www.jpcert.or.jp/guide.html   記載例）   引用元:  JPCERTコーディネーションセンター   「HTML5  を利用したWeb  アプリケーションのセキュリティ問題に関する調査報告書」
 hHps://www.jpcert.or.jp/research/HTML5-­‐20131030.pdf   For  ci7ng  or  reproducing  the  original  document,  please  refer  the  below  informa7on:     JPCERT/CC  Terms  of  use     hHps://www.jpcert.or.jp/guide.html  (Japanese  only)     Sample） Source:  JPCERT  Coordina7on  Center     “Technical  research  report  on  security  issue  of  web  applica7ons  u7lizing  HTML5”   hHps://www.jpcert.or.jp/research/HTML5-­‐20131030.pdf   7  
8. Introduc7on  of   Our  Research  Report •  JavaScript  API   •  HTML新要素・属性                    HTML5  Elements  And  AHributes   •  セキュリティ機能   Headers  with  Security  Features   8   !  Cross  Document  Messaging   !  Web  Storage   !  WebSocket   !  Offline  Web  Applica7on   !  Web  Workers   !  XMLH9pRequest   !  a   !  buHon   !  iframe   !  meta   !  video   !  audio   !  canvas   !  input   !  source   !  X-­‐XSS-­‐Protec7on   !  X-­‐Content-­‐Type-­‐Op7ons   !  X-­‐Frame-­‐Optoins   !  Content-­‐Security-­‐Policy   !  Content-­‐Disposi7on   !  Strict-­‐Transport-­‐Security  
9. 9   JavaScript  API
10. Javascript  API •  レポートでは以下の項目を解説しています          Our  report  covers  the  following  topics  :   •  Cross  Document  Messaging   •  Web  Storage   •  WebSocket   •  Offline  Web  Applica7on   •  Web  Workers   •  XMLHHpRequest   –  今日は XMLHHpRequestについて話します            Today,  I  will  explain  about  XMLHHpRequest.   10  
11. XMLHHpRequest •  XMLHHpRequest(XHR)   — JavaScriptでHTTP通信を行うためのAPI   An  API  to  communicate  with  HTTP  using  JavaScript     — 非同期通信によりインタラクティブな表現が可能   Enables  interac7ve  web  contents  by  asynchronous  communica7on     — AJAXの普及に伴い使用される機会が増加   Widely  used  due  to  the  diffusion  of  AJAX     — HTML5以前からある機能だが、HTML5で新しくなった   A  func7on  from  previous  HTML  and  has  been  renewed  in  HTML5     11   Java   Script Java   Script
12. XMLHHpRequest •  XMLHHpRequest  Level2   –  クロスオリジン通信をサポート          Supports  cross-­‐origin  communica7on.     12   example2.com   Java   Script example.com   オリジン   ホスト・ポート・スキームの組み合わせ   Origin   Combina7on  of  Host,  Port,  and  Scheme   RFC  6454  -­‐  The  Web  Origin  Concept  
13. XMLHHpRequest •  XMLHHpRequest  Level2   –  クロスオリジンで通信するためには、サーバの合意が必要   Needs  permission  from  the  server  to  communicate  with  cross-­‐origin.     –  クライアントはサーバからのレスポンスを見てアクセスの可否を判断するため、 サーバ側で許可していない場合でも、リクエストは送られる   The  client  browser  checks  the  response  from  the  server  and  evaluates    the   accessibility.  (Even  though  the  server  is  not  allowing  ,  request  can  be  sent.  )   13   example2.com   Java   Script example.com   Access-­‐Control-­‐Allow-­‐Origin Origin
14. XMLHHpRequest •  Sample   hHp://html5.example.com/  →  hHp://html5.example2.com/ 14   var  url  =  “hHp://html5.example2.com/”;   var  xhr  =  new  XMLHHpRequest(); xhr.open(  "GET",  url,  true  );   xhr.onreadystatechange  =  func7on(){        if(  xhr.readyState  ==  4  &&  xhr.status  ==  200  ){ var  resp  =  xhr.responseText;                  …        }  }; xhr.send(  null  );
15. XMLHHpRequest 15   HTTP/1.1  200  OK   Date:  Tue,  1  Jan  2013  09:00:00  GMT   Content-­‐Length:  1512   Content-­‐Type:  text/plain;  charset=ur-­‐8   Access-­‐Control-­‐Allow-­‐Origin:  *   ... GET  /  HTTP/1.1   Host:  html5.example2.com   Origin:  h9p://html5.example.com   User-­‐Agent:  Mozilla/5.0(Windows  NT  6.0;  rv:18.0)   Connec7on:  keep-­‐alive REQUEST   RESPONSE   DEMO
16. XMLHHpRequest 脆弱となるサイトの事例   Case  studies  on  vulnerable  websites   •  CASE  #1   –  XHRでコンテンツを表示する   Loads  contents  with  XHR   •  CASE  #2   –  CSRFの脆弱性があるアップローダ   A  file  uploader  vulnerable  to  CSRF   16  
17. XMLHHpRequest •  CASE  #1   – XHRでコンテンツを表示する   Loads  contents  with  XHR   17  
18. CASE  #1 •  XHRでコンテンツを表示する   –  Loads  contents  with  XHR     18   MENU B A B C D E hHp://example.com/#/b.html 1.  “コンテンツB”  へのリンクを hHp://example.com/#/b.html  に設定   Sevng  a  link  to  “content  B”  in   hHp://example.com/#/b.html     2.  ユーザがクリックするとJavaScriptでURLからアクセス先を 取得する   Parse  URL  with  JavaScript  when  a  user  clicks  it.   3.  XHRでコンテンツを取得   Load  contents  with  XHR   4.  コンテンツを表示する   Display  contents  
19. CASE  #1 19   var  url  =  loca7on.hash.substring(1); var  xhr  =  new  XMLHHpRequest(); xhr.open(  "GET",  url,  true  );   xhr.onreadystatechange  =  func7on(){        if(  xhr.readyState  ==  4  &&  xhr.status  ==  200  ){ div.innerHTML  =  xhr.responseText;        } }; xhr.send(  null  ); Sample…  
20. CASE  #1 •  XHR  Level  2  をサポートしているブラウザであれば、悪意のあるサイトが表 示される可能性がある    If  the  client  browser  supports  XHR  Level  2,  it  may  redirect  to  malicious   website.   •  XSS  攻撃が可能になる    It  enables  XSS  aHacks.   20   evil.com   MENU evil.com/evil.php A B C D E hHp://example.com/#//evil.com/evil.php   DEMO
21. CASE  #1 解決策   Solu7on   •  通信先をリストとして用意しておく   Prepare  a  specified  list  of  requests.   21   var  pages  =  [  "/",  "/a.html",  "/b.html",  "/c.html”,  ”/d.html”,  ”/e.html  ];   var  index  =  loca7on.hash.substring(1)  |  0;   var  url  =  pages[  index  ]  ||  ‘/’;   var  xhr  =  new  XMLHHpRequest();   xhr.open(  "GET",  url,  true  );   ....   MENU B A B C D E hHp://example.com/#2
22. CASE  #1 •  アクセスできるオリジンを指定する場合   In  case  of  specifying  accessible  origin.   •  サイト内にオープンリダイレクトが存在すると、任意のサイトとの通信が可能    If  an  open  redirect  vulnerability  exists  in  the  website,  it  may  communicate   with  arbitrary  website.   •  loca7on.hash  を利用した場合、サーバ側にデータが残らない    In  case  “loca7on.hash”  is  used,  the  request  logs  do  not  remain  in  the  server.   22   var  url  =  loca7on.hash.substring(1); if(  url.indexOf(  "hHp://example2.jp/"  )  ==  0  ||          url.indexOf(  "hHp://example3.jp/"  )  ==  0  ){          //  example2.jp  または example3.jp  のときのみ通信 var  xhr  =  new  XMLHHpRequest();          xhr.open(  "GET",  url,  true  );          ....   }
23. XMLHHpRequest •  CASE  #2   – CSRFの脆弱性があるアップローダ   A  file  uploader  vulnerable  to  CSRF   23  
24. CASE  #2 •  CSRFの脆弱性があるアップローダ   A  File  uploader  vulnerable  to  CSRF UPLOAD  !!   SUBMIT Select test.jpg <form  method="POST"  ac7on="upload"            enctype="mul7part/form-­‐data">        <input  type="file"  name="file">        <input  type="submit"> </form> 24  
25. UPLOAD  !!   SUBMIT Select test.jpg CASE  #2 •  CSRF攻撃の概要   Overview  of  the  CSRF  aHack 25   SERVER   攻撃者ページ    The  aHacker’s  website   アップローダのページ   Uploader  Page   User   Upload   Load  malicious  JavaScript   View  aHacker’s  website  
26. CASE  #2 •  この攻撃コードだとファイルの内容、ファイル名ともに空のまま 送信され、攻撃は失敗する   With  the  POC  code  below,  the  aHack  fails  due  to  the  blank  file   content  and  file  name.   <body  onload="document.forms[0].submit();">   <form  method="POST"  ac7on="hHp://target.example.jp/upload"          enctype="mul7part/form-­‐data">          <input  type="file"  name="file">          <input  type="submit">   </form>   </body>   攻撃例   Sample   26  
27. CASE  #2 var  xhr  =  new  XMLHHpRequest();   var  boundary  =  '-­‐-­‐-­‐-­‐boundary';   var  file="abcd";     var  request;   xhr.open(  'POST',  'hHp://target.example.jp/upload',  'true'  );   xhr.setRequestHeader(  'Content-­‐Type',     'mul7part/form-­‐data;  boundary='  +  boundary  );   xhr.withCreden7als  =  true;              //  Cookieを付与 xhr.onreadystatechange  =  func7on(){};   request  =  '-­‐-­‐'  +  boundary  +  '\r\n'  +     'Content-­‐Disposi7on:  form-­‐data;  name="file";  '  +   '  filename="filename.txt"\r\n'  +   'Content-­‐Type:  applica7on/octet-­‐stream\r\n\r\n'  +   file  +   '\r\n'  +  '-­‐-­‐'  +  boundary  +  '-­‐-­‐';   xhr.send(  request  );   ファイルの内容   Contents    of    the  File XHR  Level  2　を使用すると攻撃は成功する   This  aHack  will  succeed  by  using  XHR  Level  2   27   DEMO
28. CASE  #2 •  問題点   – 被害ユーザが使用するブラウザが XHR  Level  2  を サポートしていれば発生する   This  security  issue  occurs  if  the  vic7m  user  uses  a   browser  which  supports  XHR  Level2.   – WebサイトがHTML5を使用していなくても影響が ある   Furthermore,  even  if    the  website  is  not  using   HTML5,  this  security  issue  will  take  place.   28  
29. CASE  #2 •  対策   Solu7on   <body> <form  method="POST"  ac7on="hHp://target.example.jp/upload"  enctype="mul7part/form-­‐data"> <input  type="file"  name="file"> <input  type="hidden"  name="token"   value="9CF89BC43B1B6FEA399A..."> <input  type="submit"> </form> </body> 29  
30. 30   Elements  and  A9ributes
31. Elements  and  AHributes •  HTML5において、いくつかの要素・属性が追加された   Some  elements  and  aHributes  are  added  to  HTML5.   •  報告書ではこれらの中からいくつかセキュリティ上のポイン トを紹介している   Our  research  report  explains  several  security  topics  on   these.   •  今回は以下の機能について説明する   Today,  I  will  explain  following  topics.   –  <input  type=“email”>   –  <iframe  sandbox>   canvas video autofocus 31  
32. <input  type=“email”> <input  type=“email”>   入力値をメールアドレスのみに限定できる   Browser  checks  if  the  input  value  is  an  email  address.   32   検索、電話、ＵＲＬ、日時、色なども可能   Available  searching  term:  Tel,  URL  ,  Date  7me,   Color,  and  so  on   <SCRIPT> Browser Not  EMAIL  !! Good  Sani7zing…
33. <SCRIPT> Browser <input  type=“email”> •  ＨＴＭＬを書き換えたり、直接リクエストを送ることで回 避が可能   This  func7on  can  be  bypassed  by  edi7ng  HTML  or   sending  a  request  directly.   •  この機能をセキュリティ対策として使用してはいけない   Do  not  use  this  func7on  as  a  security  measure.   F12 POST  HTTP… DEMO 33  
34. <iframe  sandbox> •  IFRAME  sandbox 34   evil.php   allow-­‐scripts スクリプトの実行を許可する allow-­‐forms フォームの送信を許可する allow-­‐top-­‐naviga7on トップレベルウィンドウの操作を許可する Op7ons   <iframe>で読み込み   Load  in  <iframe>   index.html csrf.php   csrf.php example.jp  
35. <iframe  sandbox> •  攻撃者が直接アクセスすることにより、JavaScript が実行されるためXSS攻撃の対策にはならない   This  cannot  be  taken  as  a  countermeasure  since   JavaScript  may  execute  due  to  the  direct  access   from  an  aHacker.   35   example.jp   index.html xss_bbs.cgi <iframe  sandbox  src=“hHp://example.jp/xss_bbs.cgi”> evil.com   index.html <iframe      src=“hHp://example.jp/xss_bbs.cgi”> xss_bbs.cgi Java   Script
36. 36   Headers  with  Security  Features
37. Headers  with  Security  Features   •  X-­‐XSS-­‐Protec7on     –  XSS攻撃からの保護   Protects  from  XSS  aHack •  X-­‐Content-­‐Type-­‐Op7ons   –  Content-­‐Typeヘッダに従ったコンテンツの取り扱い          Manage  contents  based  on  configura7on  in  Content-­‐ Type  header   •  X-­‐Frame-­‐Op7ons   –  フレームへの埋め込みを制限   Restricts  embedding  into  a  frame  such  as  iframe     37  
38. Headers  with  Security  Features   •  Content-­‐Security-­‐Policy   – コンテンツの読み込み元を制限          Restricts  the  contents  loaded  origin   •  Content-­‐Disposi7on   – ファイルのダウンロードダイアログの制御          Controls  download  dialog  of  an  file   •  Strict-­‐Transport-­‐Security   – HTTPSの強制          Enforces  the  use  of  secure  HTTPS  connec7ons   38  
39. Content-­‐Security-­‐Policy   •  Content-­‐Security-­‐Policy   – 特定のキーワードをレスポンスヘッダに指定する ことで機能を制限   Restricts  the  sources  of  contents  to  be  loaded   – XSS攻撃の可能性を低減          Mi7gates  XSS  aHacks. 39  
40. Content-­‐Security-­‐Policy   •  制限の対象となるもの    Subjected  Restricted  Things 40   •  <script>や<img>、<iframe>といった要素など   Elements  such  as  <script>,  <img>,  and  <iframe>   •  <div  onmouseover="alert(1)">や<script>alert(1)</script>といったインラインでの JavaScriptの実行   Execu7ng  inline  JavaScript  such  as  <div  onmouseover="alert(1)">  and   <script>alert(1)</script>   •  JavaScript内でのeval関数やFunc7onコンストラクタといった、文字列からのコード の実行   Execu7ng  strings  as  a  func7on  such  as  eval  func7on  and  Func7on  constructors.   •  javascript  スキームやdata  スキーム   javascript  scheme  and  data  scheme
41. Content-­‐Security-­‐Policy •  Content-­‐Security-­‐Policy 41   Content-­‐Security-­‐Policy:  default-­‐src  'self';  img-­‐src  img.example.jp 使い方   How  to  use ディレクティブ   Direc7ve ディレクティブソース   Direc7ve  source
42. Content-­‐Security-­‐Policy •  Content-­‐Security-­‐Policy 42   Content-­‐Security-­‐Policy:  default-­‐src  'self';  img-­‐src  img.example.jp CSP  policy  direc7ves   hHps://developer.mozilla.org/en/docs/Security/CSP/CSP_policy_direc7ves default-­‐src ディレクティブを指定していない場合のディレクティブソースを列挙する   Defines  the  security  policy  for  all  types  of  content  which  are  not  expressly  called   out  by  more  specific  direc7ves script-­‐src スクリプトとして許可するディレクティブソースを列挙する   Specifies  valid  sources  for  JavaScript style-­‐src スタイルシートとして許可するディレクティブソースを列挙する   Specifies  sources  from  which  stylesheets  may  be  loaded img-­‐src 画像の読込み元として許可するディレクティブソースを列挙する   Specifies  what  sources  may  be  used  for  loading  images  and  favicons frame-­‐src フレームとして表示可能なディレクティブソースを列挙する   Specifies   valid   sources   for   frame   content   loaded   using   the   <frame>   and   <iframe>  elements
43. Content-­‐Security-­‐Policy •  Content-­‐Security-­‐Policy 43   Content-­‐Security-­‐Policy:  default-­‐src  'self';  img-­‐src  img.example.jp DEMO 'self' ドキュメント自身と同一オリジンの場合にのみ許可する   Refers   to   the   host   from   which   the   protected   document   is   being   served,   including  the  same  URL  scheme  and  port  number 'none' どのオリジンも許可しない   Refers  to  the  empty  set;  that  is,  no  URLs  match.  The  single  quotes  are  required. 'unsafe-­‐inline' script-­‐src、style-­‐srcにおいてインラインでのスクリプト記述、スタイル記述を許 可する   Allows  the  use  of  inline  resources,  such  as  inline  <script>  elements,  javascript:   URLs,  inline  event  handlers,  and  inline  <style>  elements.  You  must  include  the   single  quotes. 'unsafe-­‐eval' JavaScript内でのeval、Func7on、setTimeout、setIntervalといった文字列から コードを生成する機能を許可する   Allows  the  use  of  inline  resources,  such  as  inline  <script>  elements,  javascript:   URLs,  inline  event  handlers,  and  inline  <style>  elements.  You  must  include  the   single  quotes.
44. Content-­‐Security-­‐Policy •  Content-­‐Security-­‐Policyをサポートしていないブラウザ や、ブラウザによって実装の差もあり、従来通りの対 策も必要   Please  take  proper  measures,  since  there  are  browsers   which  do  not  support  Content-­‐Security-­‐Policy  and  the   way  they  perform  differs  among  them.   •  設定内容によっては正規のJavaScriptが動作しない場 合もあるため、導入には注意が必要   Please  test  before  implementa7on  since  JavaScript  may   not  operate  due  to  the  improper  configura7on.   44  
45. 45   Conclusion
46. CONCLUSION •  HTML5や関連技術を利用するときにはセキュリ ティにも気をつける必要がある   You  need  to  carefully  understand  about  HTML5   security  issues  upon  using  them.   •  「HTML5を利用したWebアプリケーションのセ キュリティ問題に関する調査報告書」をセキュア なWebアプリケーションの開発に役立ててくださ い   We  hope  that  our  research  report  is  useful  to   you!   46  
47. Thank  you! ご清聴ありがとうございました。   Thank  you  for  your  aHen7on.   Contacts  -­‐>  JPCERT/CC   hHps://www.jpcert.or.jp   ww-­‐info@jpcert.or.jp 47