DOMPurifyを使って、kintone で安全にDOMをエスケープしよう！ – cybozu developer network

はじめに

kintoneは、カスタマイズによってレコードの表示方法を変更できるため非常に便利です。
レコードに入力されたマークアップテキストやマークダウンテキストを解析して表示することも可能です。

しかし、セキュリティ面を意識しないと、悪意を持ったユーザーからサイバー攻撃を受ける可能性があります。
今回はkintoneアプリで想定されるサイバー攻撃の例と、DOMPurifyを使った対策をご紹介します。

DOMPurifyはCybozu CDNにてサポートされているのでご利用ください。

DOMPurifyのメリット

単純に正規表現で置き換えたりしようとすると回避されてXSSを埋め込まれる可能性があり、
innerHTMLやjQueryのhtml()などで出力する前にDOMPurify.sanitize() しておくことで、
より安全にHTMLタグを許容することができます。

※ セキュアコーディングガイドラインでも、出力する全ての要素に対してエスケープ処理を施すことを推奨しています。
やむを得ずinnerHTMLを使う場合は、DOMPurifyのような対策が有効です。

サイバー攻撃の例

ここでは、セキュリティ脆弱性を含んだアプリとそのアプリへのサイバー攻撃の例をご紹介します。

セキュリティ脆弱性を含んだアプリ

サンプルとして、マークダウンフィールドの内容をコンバートして表示するアプリを用意しました。

・フォーム設定

フィールド名	フィールドタイプ	フィールドコード
マークダウン	文字列（複数行）	マークダウン
	スペース	preview

・フォーム画面

JavaScriptカスタマイズ

sample.jsとして下記のプログラムをアプリに適用します。

※JavaScriptライブラリのjQuery及びMarked.jsを利用しています。お試しの場合は、Cybozu CDNからご利用ください。

動作

詳細画面を開くと、コンバートされたマークダウンフィールドの内容がpreviewスペースに表示されます。

サイバー攻撃

上記アプリで、悪意のあるユーザーにより文字列（複数行）フィールドに下記の内容が登録されたとします。

レコードの削除権限を持った別のユーザーが、このレコードの詳細画面を開くと、

アプリ内のレコードが全件削除されてしまいました。

このようにセキュリティ脆弱性を含むアプリでは、悪意のあるユーザー自身がレコードの削除権限を持っていないとしても、
間接的にレコードを全件削除することができます。

同様に、閲覧権限の無いレコードを盗み出すことなどもできてしまいます。

注意事項

・当アプリはサイバー攻撃の一例として意図的にカスタマイズして作ったものであり、
セキュリティリスクがあるため、DOMPurifyのようなセキュリティ対策なしに使うことはお控えください。

・検証環境でのみお試しください。

万一データが損失した場合、サイボウズが責任を負うことはできません。

・cybozu developer network 利用規約

・Cybozu CDN利用規約の免責事項

対策

上記の対策としてDOMPurifyを使います。

DOMPurify.sanitize()を用いると、コード内の危険性のある個所(<script>タグ等)を除去してくれます。

DOMPurifyの利用例

HTMLを埋め込んでいる箇所に対してDOMPurify.sanitize()します。

先程のsample.jsにDOMPurify.sanitize()を実装した場合はこちらになります。

動作確認

先ほどは全てのレコードが削除されてしまいしたが、DOMPurify.sanitize()することで、
マークダウンの表示をしつつ全件削除の攻撃を防ぐようになりました。

最後に

セキュリティを意識せずに、ユーザーが入力したコードを表示するのは非常に危険です。

今回は「サイバー攻撃」という想定で書きましたが、意図しない「うっかり」でも同様の危険を含みます。

このような場合に備えてあらかじめDOMPurifyでエスケープすることで、より安全にDOMを扱うことができます。

※主要ブラウザでは、innerHTMLを用いてDOMを追加した場合には<script>タグの中身を実行しません。
しかし念のため、出力前に DOMPurify.sanitize() しておくことをお勧めします。

このTipsは、2018年6月版 kintoneで確認したものになります。