React Armor - DOM構造を変化させてクロスサイトスクリプティングを防ぐ
セキュリティインシデントを起こすWebサービスの多くがサーバや入力に対するチェックが甘く、クロスサイトスクリプティングによってDOMを操作されてしまい、情報漏洩を起こします。 セキュリティホールがないのがベストですが、万一起きた時のために使えるかも知れないのがReact Armorです。
React Armorの使い方
React ArmorをCSSに対して適用します。例えばコードは次のようになります。
import { obfuscateClassNames } from 'react-armor';
postcss([obfuscateClassNames.createPostCSSPlugin({ seed: 'foobar '})]).process(`
.Foo .Bar[attr='val'].Bar--module:hover {
background-color: 'red';
}
ul li .Bar--module.Bar:visited {
background-color: 'green';
}
`);
その結果のCSSはこちら。よく分からないクラスが差し込まれます。
.11f5b410 .34ac2cc1[attr='val'].6faed2d1:hover {
background-color: 'red';
}
ul li .6faed2d1.34ac2cc1:visited {
background-color: 'green';
}
さらにHTMLの場合。これはシンプルなものですが、
React.render(<div className='bar'>
<obfuscator seed={'fizzbuzz'}
>
<div className='foo'>{'foo'}</div>
</obfuscator>
</div>);
レンダリング結果は次のようになります。DOM構造がランダムで変わるのがポイントです。
<div class="bar">
<span>
<div>
<div>
<span>
<span>
<span>
<div>
<div>
<div>
<span>
<div class="foo">foo</div>
</span>
</div>
</div>
</div>
</span>
</span>
</span>
</div>
</div>
</span>
</div>
React Armorを使うとDOM構造が変化するために、インジェクションが容易ではなくなるというのがポイントです。もちろんセキュリティホールがないに越したことはありませんが、こうやって構造をダミーに置き換えてしまうのはユニークです。スクレイピング対策にも使えるかも知れませんね。
React ArmorはReact用、JavaScript製のオープンソース・ソフトウェア(MIT License)です。
elierotenberg/react-armor: Protect your DOM from third-party tampering.