- 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 ] ); }
実際に動いているデモ画面はこちら。
詳しい話はこのあたりを参照。