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

Contenu connexe

En vedette

アメリカで宇宙ベンチャーに注目が集まる理由に迫る
アメリカで宇宙ベンチャーに注目が集まる理由に迫るアメリカで宇宙ベンチャーに注目が集まる理由に迫る
アメリカで宇宙ベンチャーに注目が集まる理由に迫るwebcampusschoo
 
TokyoWebMining#18_nukamu
TokyoWebMining#18_nukamuTokyoWebMining#18_nukamu
TokyoWebMining#18_nukamunukamu
 
ASTRAX民間宇宙ビジネスシンポジウム2014 くさまひろゆきさん発表資料
ASTRAX民間宇宙ビジネスシンポジウム2014 くさまひろゆきさん発表資料ASTRAX民間宇宙ビジネスシンポジウム2014 くさまひろゆきさん発表資料
ASTRAX民間宇宙ビジネスシンポジウム2014 くさまひろゆきさん発表資料ASTRAX_STUDIO
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium MobileNaoya Ito
 
Introduction To Moco
Introduction To MocoIntroduction To Moco
Introduction To MocoNaoya Ito
 
081108huge_data.ppt
081108huge_data.ppt081108huge_data.ppt
081108huge_data.pptNaoya Ito
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...Naoya Ito
 
Unixファイルシステムの歴史
Unixファイルシステムの歴史Unixファイルシステムの歴史
Unixファイルシステムの歴史magoroku Yamamoto
 
Scripting Layer for Android + Perl
Scripting Layer for Android + PerlScripting Layer for Android + Perl
Scripting Layer for Android + PerlNaoya Ito
 
P2Pネットワークを利用した分散ファイルシステムの開発
P2Pネットワークを利用した分散ファイルシステムの開発P2Pネットワークを利用した分散ファイルシステムの開発
P2Pネットワークを利用した分散ファイルシステムの開発shiftky
 
ファイルシステム
ファイルシステムファイルシステム
ファイルシステムYohei Tanaka
 
婚活の戦略「恋愛マスターのマインドセット」
婚活の戦略「恋愛マスターのマインドセット」婚活の戦略「恋愛マスターのマインドセット」
婚活の戦略「恋愛マスターのマインドセット」大和 金太郎
 
超高速開発の基礎概念 20141119 0
超高速開発の基礎概念 20141119 0超高速開発の基礎概念 20141119 0
超高速開発の基礎概念 20141119 0正善 大島
 
編入試験への準備と編入後の生活
編入試験への準備と編入後の生活編入試験への準備と編入後の生活
編入試験への準備と編入後の生活ShotaSatuma
 
はてなブックマークのシステムについて
はてなブックマークのシステムについてはてなブックマークのシステムについて
はてなブックマークのシステムについてNaoya Ito
 
言語処理系入門1
言語処理系入門1言語処理系入門1
言語処理系入門1Kenta Hattori
 
0章 Linuxカーネルを読む前に最低限知っておくべきこと
0章 Linuxカーネルを読む前に最低限知っておくべきこと0章 Linuxカーネルを読む前に最低限知っておくべきこと
0章 Linuxカーネルを読む前に最低限知っておくべきことmao999
 

En vedette (20)

アメリカで宇宙ベンチャーに注目が集まる理由に迫る
アメリカで宇宙ベンチャーに注目が集まる理由に迫るアメリカで宇宙ベンチャーに注目が集まる理由に迫る
アメリカで宇宙ベンチャーに注目が集まる理由に迫る
 
婚活メソッド
婚活メソッド婚活メソッド
婚活メソッド
 
宇宙開発の是非
宇宙開発の是非宇宙開発の是非
宇宙開発の是非
 
TokyoWebMining#18_nukamu
TokyoWebMining#18_nukamuTokyoWebMining#18_nukamu
TokyoWebMining#18_nukamu
 
ASTRAX民間宇宙ビジネスシンポジウム2014 くさまひろゆきさん発表資料
ASTRAX民間宇宙ビジネスシンポジウム2014 くさまひろゆきさん発表資料ASTRAX民間宇宙ビジネスシンポジウム2014 くさまひろゆきさん発表資料
ASTRAX民間宇宙ビジネスシンポジウム2014 くさまひろゆきさん発表資料
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium Mobile
 
Introduction To Moco
Introduction To MocoIntroduction To Moco
Introduction To Moco
 
081108huge_data.ppt
081108huge_data.ppt081108huge_data.ppt
081108huge_data.ppt
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
 
Unixファイルシステムの歴史
Unixファイルシステムの歴史Unixファイルシステムの歴史
Unixファイルシステムの歴史
 
Scripting Layer for Android + Perl
Scripting Layer for Android + PerlScripting Layer for Android + Perl
Scripting Layer for Android + Perl
 
P2Pネットワークを利用した分散ファイルシステムの開発
P2Pネットワークを利用した分散ファイルシステムの開発P2Pネットワークを利用した分散ファイルシステムの開発
P2Pネットワークを利用した分散ファイルシステムの開発
 
ファイルシステム
ファイルシステムファイルシステム
ファイルシステム
 
婚活の戦略「恋愛マスターのマインドセット」
婚活の戦略「恋愛マスターのマインドセット」婚活の戦略「恋愛マスターのマインドセット」
婚活の戦略「恋愛マスターのマインドセット」
 
Ext4 filesystem(1)
Ext4 filesystem(1)Ext4 filesystem(1)
Ext4 filesystem(1)
 
超高速開発の基礎概念 20141119 0
超高速開発の基礎概念 20141119 0超高速開発の基礎概念 20141119 0
超高速開発の基礎概念 20141119 0
 
編入試験への準備と編入後の生活
編入試験への準備と編入後の生活編入試験への準備と編入後の生活
編入試験への準備と編入後の生活
 
はてなブックマークのシステムについて
はてなブックマークのシステムについてはてなブックマークのシステムについて
はてなブックマークのシステムについて
 
言語処理系入門1
言語処理系入門1言語処理系入門1
言語処理系入門1
 
0章 Linuxカーネルを読む前に最低限知っておくべきこと
0章 Linuxカーネルを読む前に最低限知っておくべきこと0章 Linuxカーネルを読む前に最低限知っておくべきこと
0章 Linuxカーネルを読む前に最低限知っておくべきこと
 

Similaire à SVG、あきた

おふとんから眺めるSVG
おふとんから眺めるSVGおふとんから眺めるSVG
おふとんから眺めるSVGcocu_628496
 
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 -  Mars vanillaSVG MANIAX Ver.2 -  Mars vanilla
SVG MANIAX Ver.2 - Mars vanillaNaoki Matsuda
 
CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現AdvancedTechNight
 
Inside of excel 方眼紙撲滅委員会 #pyfes
Inside of excel 方眼紙撲滅委員会 #pyfesInside of excel 方眼紙撲滅委員会 #pyfes
Inside of excel 方眼紙撲滅委員会 #pyfesTakeshi Komiya
 
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるインラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるKohei Kadowaki
 
Javascript で暗号化
Javascript で暗号化Javascript で暗号化
Javascript で暗号化suno88
 
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」Naoki Matsuda
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会Takuya Ueda
 
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみKohei Kadowaki
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
NodeにしましょうYuzo Hebishima
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626Taku AMANO
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」Yasunobu Ikeda
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7Naoki Matsuda
 
Vagrant+virtualboxを使ってみよう
Vagrant+virtualboxを使ってみようVagrant+virtualboxを使ってみよう
Vagrant+virtualboxを使ってみようKei IWASAKI
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたShinichi Sato
 
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas20130202 fe勉強会 canvas
20130202 fe勉強会 canvasKeisuke Aizawa
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようHiroaki Wakamatsu
 
速くなければスマフォじゃない
速くなければスマフォじゃない速くなければスマフォじゃない
速くなければスマフォじゃないKazunari Hara
 

Similaire à SVG、あきた (20)

おふとんから眺めるSVG
おふとんから眺めるSVGおふとんから眺めるSVG
おふとんから眺めるSVG
 
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 -  Mars vanillaSVG MANIAX Ver.2 -  Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
 
CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現
 
Inside of excel 方眼紙撲滅委員会 #pyfes
Inside of excel 方眼紙撲滅委員会 #pyfesInside of excel 方眼紙撲滅委員会 #pyfes
Inside of excel 方眼紙撲滅委員会 #pyfes
 
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるインラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
 
Javascript で暗号化
Javascript で暗号化Javascript で暗号化
Javascript で暗号化
 
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
 
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
Nodeにしましょう
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
 
Vagrant+virtualboxを使ってみよう
Vagrant+virtualboxを使ってみようVagrant+virtualboxを使ってみよう
Vagrant+virtualboxを使ってみよう
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
 
Canvas勉強会
Canvas勉強会Canvas勉強会
Canvas勉強会
 
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
I want Make full svg website
I want Make full svg websiteI want Make full svg website
I want Make full svg website
 
速くなければスマフォじゃない
速くなければスマフォじゃない速くなければスマフォじゃない
速くなければスマフォじゃない
 

Plus de cocu_628496

COINS-Project_2015新歓説明
COINS-Project_2015新歓説明COINS-Project_2015新歓説明
COINS-Project_2015新歓説明cocu_628496
 
pythonワンライナーのすゝめ
pythonワンライナーのすゝめpythonワンライナーのすゝめ
pythonワンライナーのすゝめcocu_628496
 
svgで遊んでみた話
svgで遊んでみた話svgで遊んでみた話
svgで遊んでみた話cocu_628496
 
後天性ACになるためのガイドブック
後天性ACになるためのガイドブック後天性ACになるためのガイドブック
後天性ACになるためのガイドブックcocu_628496
 
svgに恋をした
svgに恋をしたsvgに恋をした
svgに恋をしたcocu_628496
 

Plus de cocu_628496 (6)

COINS-Project_2015新歓説明
COINS-Project_2015新歓説明COINS-Project_2015新歓説明
COINS-Project_2015新歓説明
 
pythonワンライナーのすゝめ
pythonワンライナーのすゝめpythonワンライナーのすゝめ
pythonワンライナーのすゝめ
 
svgで遊んでみた話
svgで遊んでみた話svgで遊んでみた話
svgで遊んでみた話
 
This is Tsuru.
This is Tsuru.This is Tsuru.
This is Tsuru.
 
後天性ACになるためのガイドブック
後天性ACになるためのガイドブック後天性ACになるためのガイドブック
後天性ACになるためのガイドブック
 
svgに恋をした
svgに恋をしたsvgに恋をした
svgに恋をした
 

SVG、あきた