SVG、あきた

662 views

Published on

svgでweb componentsする話とセキュリティの話をした話。

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
662
On SlideShare
0
From Embeds
0
Number of Embeds
76
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

SVG、あきた

  1. 1. SVG、あきた
  2. 2. 自己紹介
  3. 3. こく(cocuh) COINS-Project インフラ・鯖管理者 †闇の参謀† ArchLinux☆ミ 闇pythonista幼女クラスタ 美遊さんのジト目:+1: seccamp2013, isef2011
  4. 4. まぁ..
  5. 5. @cocu_tan :rotating_wo:
  6. 6. What is SVG. coinsLT来る人は知ってるよね。
  7. 7. 0x10秒で説明
  8. 8. グラフとか
  9. 9. アイコンで使われる
  10. 10. 拡大しても 綺麗な
  11. 11. 画像形式 <html> <img src="wo-class.svg"/> </html>
  12. 12. </説明>
  13. 13. 秘伝の LT.git によると
  14. 14. 17件中10件が SVGのLT - coinsLT #0 - mastLT 2014 - esysLT 2014 - security camp forum - etc .... 59%!!!!
  15. 15. そんなわけで
  16. 16. 飽きちゃうよね
  17. 17. なので、今日は
  18. 18. 趣向を変えて
  19. 19. SVGの話します
  20. 20. 1. web components風な使い方 2. セキュリティの話 Same Origin Policy回避するぜ 先日、業務で考えたテクニック
  21. 21. 1. web components風な使い方 先日、業務で考えたテクニック もうだれか考えてそう
  22. 22. 小さい部品ごとに分けて管理するなにか と思ってもらえればおk css jshtml component css jshtml component web componentsとは
  23. 23. <object>使って小さく管理する js<script> css <?xml-stylesheet?> SVG html SVG htmlの部品をSVGとして吐き出す。 javascriptの使い回しができる
  24. 24. <object>内部へアクセスする $object_elem.contentDocumentで <object>内部のdocument objectが取れる object.svg <script> document.func_spam = function(){...}; </script> svg内部でdocumentにインターフェイスを追加する。 $object_elem.contentDocument.func_spam()
  25. 25. <script> js css <?xml-stylesheet?> SVG html SVG javascript object javascript object conetntDocument <object>内部へアクセスする $object_elem.contentDocumentで <object>内部のdocument objectが取れる
  26. 26. svg: view(DOM tree) css: view(style) js: logic
  27. 27. 2. セキュリティの話 Same Origin Policy回避するぜ
  28. 28. 説明めんどいから DEMO
  29. 29. http://weak.example.com/index.html
  30. 30. http://weak.example.com/icon.svg
  31. 31. http://evil.example.com/evil.js
  32. 32. evil.example.comtarget.example.com 健全なサイト.html S O P の 壁 <object> icon.svg <script> evil.js evilな人が いじれる この前のgithubの DDoSみたいに
  33. 33. evil.example.comtarget.example.com 健全なサイト.html S O P の 壁 <object> icon.svg <script> evil.js <img> CSP <img>使え CSPかけろ js,SMIL使えなくなる ようじょかわいい
  34. 34. evilなようじょ「SVGのアイコン配布中だよ☆」
  35. 35. evilなようじょ「<object>で読み込んでね☆」
  36. 36. evilなようじょ「<object>で読み込んでね☆」 でんじゃらす
  37. 37. 今回のつらみ
  38. 38. まとめ
  39. 39. SVG、あきた
  40. 40. </svg>

×