セキュリティインシデントを起こす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.