ブラウザ内で安全に文字列から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 ] ); }
実際に動いているデモ画面はこちら。
詳しい話はこのあたりを参照。