JavaScript を使用せずに信頼できない入力を CSS カスタム プロパティに安全に割り当てる: ガイド

Question

文字列キーと文字列値のオブジェクトがあり、それらを CSS カスタム プロパティとしてサーバー生成の HTML に書き込みたいとします。どうすれば安全にこれを行うことができますか?

セキュリティとは

• 可能であれば、カスタム プロパティの宣言によって、ブラウザーが他のスタイル宣言や HTML ドキュメントの一部を正しく解析できなくなるような CSS 構文エラーが発生しないようにする必要があります。何らかの理由でこれが不可能な場合は、キーと値のペアを省略する必要があります。
• さらに重要なのは、これによりクロスサイト スクリプティングが不可能になることです。

わかりやすくするために、[a-zA-Z0-9_-] クラスの文字のみを許可するようにキーを制限します。

CSS 仕様を読んで個人的なテストを行った結果、次の手順に従って値を取得すると、大幅に進歩できると思います。

文字列の検索
各引用符の後に同じタイプの別の (エスケープされていない) 引用符 (" または ') が続いていることを確認してください。そうでない場合は、このキーと値のペアを破棄してください。
文字列の外側のすべての左中括弧
• {([ 文字列の外側に一致する右中括弧があることを確認します。そうでない場合は、このキーと値のペアを破棄します。
• < のすべてのインスタンスをエスケープするには \3C を使用し、<> のすべてのインスタンスをエスケープするには 3E を使用します。
• \3B を使用して、; のすべてのインスタンスをエスケープします。

この CSS 構文仕様に基づいて上記の手順を思いつきました

コンテキストとして、これらのプロパティは、他の場所に挿入するユーザー定義スタイルで使用できますが、同じオブジェクトがテンプレート内のテンプレート データとしても使用されるため、コンテンツとして意図された文字列や CSS としてミックスインに期待される文字列が含まれる可能性があります。変数。上記のアルゴリズムは、CSS で役立つ可能性のあるキーと値のペアを大量に破棄するリスクを冒すことなく、非常にシンプルであるという良いバランスをとっているように感じます (CSS への将来の追加も考慮していますが、そうでないことを確認したいと考えています)何かが足りないわけではありません。

---

これは私が達成しようとしていることを示す JS コードです。

obj は問題のオブジェクトであり、preprocessPairs はオブジェクトを取得して前処理し、上記の手順で説明したように値を削除/再フォーマットする関数です。 リーリー

したがって、次のようなオブジェクトが与えられた場合

リーリー

CSS を次のようにしたい:

リーリー

--theme-title は CSS で使用すると非常に役に立たないカスタム変数ですが、CSS は理解できないプロパティを無視するため、実際にはスタイルシートを破壊しません。

Answer 1

実際には、特定の言語に依存せずに正規表現やその他のアルゴリズムを使用することもできます。それが必要なものであることを願っています。

オブジェクト キーが [a-zA-Z0-9_-] 内にあると宣言することで、何らかの方法で値を解析する必要があります。

価値モデル

そこで、カテゴリに分類して、何が見つかるかを確認します (わかりやすくするために、若干簡略化されている可能性があります):

1. '.*' (アポストロフィで囲まれた文字列、貪欲)
2. ".*" (二重引用符で囲まれた文字列、貪欲)
3. [ -]?\d (\.\d )?(%|[A-z] )? (整数と小数、オプションのパーセンテージまたは単位付き)
4. #[0-9A-f]{3,6}(カラー)
5. [A-z0-9_-] (キーワード、名前付きの色、「使いやすさ」など)
6. ([\w-] )\([^)] \) (url()、calc()> などに似た関数。 )

最初のフィルター

これらのパターンを特定する前に、何らかのフィルタリングを実行できることは想像できます。おそらく最初に値文字列をトリミングします。前述したように、<# と # は、上記のモードのように表示されないため、preprocessPairs() 関数の先頭でエスケープできます。エスケープされていないセミコロンをどこにも表示したくない場合は、セミコロンをエスケープすることもできます。

認識パターン

その後、 値 内でこれらのパターンを識別することを試みることができ、パターンごとにフィルタリングを再度実行する必要がある場合があります。これらのパターンはいくつか (または 2 つ) の空白文字で区切られることが予想されます。

エスケープされた改行である複数行文字列のサポートを含めても問題ありません。

ロケール

フィルタリングするコンテキストが少なくとも 2 つあることを認識する必要があります (HTML と CSS)。