Firefox のフロントエンドエンジニアのためのセキュリティのベストプラクティス

このガイドは、Firefoxの開発者がセキュリティコントロールを理解し、Firefoxのフロントエンドを開発する際の一般的な落とし穴を避けるのに役立ちます。

既存のセキュリティコントロール

innerHTMLやそれに関連するものを通してDOMに入るすべての文字列をサニタイズする

Chrome 特権で実行されるコードでは、Chrome 特権文書用に作成されたすべてのHTMLフラグメントをサニタイズします。これには文字列を受け取りDOMツリーに解析するすべてのDOM APIが含まれます。

私たちは、Sanitizerに組み込まれた次のフラグを使用します。

SanitizerAllowStyle
SanitizerAllowComments
SanitizerDropForms
SanitizerLogRemovals

サニタイザはすべてのスクリプト (スクリプトタグ、イベントハンドラ) とフォーム要素 (form, input, keygen, option, optgroup, select, button, datalist) を削除します。ホワイトリストに載っている要素のリストの正式なものはソースコードです。

最後のフラグは開発者が問題を早期に発見し、提供後ではなく開発サイクル内で問題を回避できることを保証します。

非衛生的なDOMの相互作用に対するLinterの規則

Security Assuranceチームは、innerHTMLなどのDOM APIの安全でない使用を禁止する ESLint ルールを維持しています。Linterは善意の開発者を想定して、ソースコードにハードコードされた文字列リテラルを使用するコードの例外を作成します。 開発者は次のようなテンプレート文字列と組み合わせてエスケープ関数を使用することで、ルールをトリッピングすることを避けることができます。

bar.innerHTML = escapeHTML`<a href='${url}'>About</a>`;

Chrome 特権コードでは、残っているスクリプトは引き続きGoogleのサニタイザで削除されます。

付録

許可されていない DOM API の一覧

• innerHTML
• outerHTML
• insertAdjacentHTML()
• createContextualFragment()
• document.write()
• document.writeln()

Please take a look at the repository for an updated list