Hatena::ブログ(Diary)

葉っぱ日記 このページをアンテナに追加

2014-09-12

[][] ブラウザ内で安全に文字列からDOMを組み立てるためのRickDOMというライブラリを書いた  ブラウザ内で安全に文字列からDOMを組み立てるためのRickDOMというライブラリを書いたを含むブックマーク

RickDOM - ricking DOM elements safety from string
https://github.com/hasegawayosuke/rickdom

ブラウザ内のDOMParserあるいはcreatHTMLDocument APIを使って不活性なDOMを組み立てたのちに、必要な要素と属性、スタイルだけを切り出して複製しているので、原理的にDOM based XSSの発生を抑えることができます。

使いかたも簡単。

var rickdom = new RickDOM();
var container = document.getElementById( "container" );
var elements;
var i;

// read allowings property to show default rule 
// div.textContent = JSON.stringify( rickdom.allowings, undefined, 2 );

// write allowings property if you want to customize rule.
// rickdom.allowings = { a : { href : { pattern : "^https?:\\/\\/", flag : "i" }, title : "" } };

// build method returns array of HTMLElement.
elements = rickdom.build( '<img src=# onerror=alert(1)><a href="http://example.jp/">example.jp</a><br><a href="javascript:alert(1)">javascript</a>' );
for( i = 0; i < elements.length; i++ ){ 
    container.appendChild( elements[ i ] );
}

実際に動いているデモ画面はこちら。

詳しい話はこのあたりを参照。

トラックバック - http://d.hatena.ne.jp/hasegawayosuke/20140912/p1