3

ユーザーによるDOM操作を簡単に検出することは可能ですか？

ユーザーが最新のブラウザーでコンソールを使用する場合、開発者が意図していなかった方法でDOMを操作できます。

特定の状態にあるDOMに非常に関連しているWebアプリがあり、ユーザーがコンソールを介してDOMに対して何かを行った場合は、通知を受け取りたいと思います。

答え：

  1. ブラウザに依存しない必要はありません
  2. 完璧である必要はありません。すべてではないにしても、ほとんどの方法が回避される可能性があることを完全に理解していますが、優れた一般的な解決策が必要です。
  3. あまり複雑になることはできません。コードがDOM操作を実行するときに設定されたフラグをチェックするすべてのDOMイベントにイベントハンドラーを登録することに興味がありません

編集：

これまでに受け取った回答には、多少の混乱があるようです。上記の＃2で指摘したように、すべてではないにしても、ほとんどの方法を回避できることを理解しています。

さらに、これは内部ツールであるため、VPNによって保護されています。さらに、サーバー側のチェックがあります。ただし、ユーザー（数が少ない）がいつDOMを操作したかを知りたいので、詳しく説明できない理由があります。

明確にするために、これはセキュリティ上の理由によるものではありません。ここで悪意のあるユーザーを阻止しようとはしていません。これは好奇心からだと考えてください。

4

6 に答える 6

6

そうしないでください。ユーザー入力を信頼せず、ユーザーが何をするかを気にしないようにWebサイトをコーディングします。無効な入力が送信された場合は、それを拒否します。みんなが幸せだ。

あなたがユーザーのブラウザを所有していると考えるのは簡単です。あなたはそうしない。それはあなたに仕えていますが、ユーザーの気まぐれでのみです。

DOMがいつ変更されるかを本当に知る必要があり、これは非常に壊れやすい設計のように思われる場合は、チェックサムの計算に相当することを実行してください。サイトの承認された機能の各正当なステップの後、関心のあるDOM要素をトラバースし、それらの位置、値、または関心のあるものをすべて記録します。間隔、検証時間、または次のUIインタラクションで、比較します。これは、DOMの変更を検出するための唯一の包括的なクロスブラウザー（古いブラウザーを含む）の方法です。最新のブラウザはDOMミューテーションイベントを提供しますが（詳細についてはTim Downの回答を参照）、サポートが制限されており、とにかく、さらに別の新しいものに置き換えられるようです。

最終的に、あなたがすることは、あなたの計画を打ち負かそうと決心した誰かを止めることはできません。どちらかといえば、ユーザーはFirebugを使用してブラウザーのPOSTリクエストをコピーし、それを微調整し、小さなプログラムを作成して自分の悪意のあるPOSTリクエストを送信することができます。悪意のある入力からサーバーを保護することの方が、Webページを防弾と見なすよりも重要です（防弾ではないため）。

于 2012-11-24T00:09:11.153 に答える
4

DOMミューテーションイベントは、すべての主要なブラウザーの現在のバージョンで機能し、必要な処理を実行します。以下では、ドキュメント全体での一般的なDOMの変更について説明します。

function handleDomChange(evt) {
    console.log("DOM changed via event of type " + evt.type);
}

document.addEventListener("DOMNodeInserted", handleDomChange, false);
document.addEventListener("DOMNodeRemoved", handleDomChange, false);
document.addEventListener("DOMCharacterDataModified", handleDomChange, false);

DOMミューテーションイベントは、最終的にはミューテーションオブザーバーに置き換えられます。ミューテーションオブザーバーは、最近のMozillaおよびWebKitブラウザーに実装されています。

于 2012-11-24T00:23:18.433 に答える
2

DOMへの悪意のある編集を防止または打ち消すためにスクリプトに依存することは、正しいアプローチではありません。DOMが触れられていないことに依存して、正確に何をしていますか？それ自体が巨大な赤旗のようです。

于 2012-11-24T00:01:13.090 に答える
1

これは非常に興味深い質問であり、DOMミューテーションイベントが最善の解決策になると思います。私が最初にやろうと思っていたのは、データ属性またはIDに基づいて特定のモジュールのDOMをチェックする時限関数を実行することです。JSを使用してページを完全にクライアント側でビルドする場合、モジュールごとにビルド構成オブジェクトがあります（次のようなDOM要素：

<div id='weather-widget' data-module-type='widget'>
    <h1 data-module-name='weather'>Weather</h1>
    <!-- etc etc -->
</div>

とにかく、私の構成オブジェクトには、モジュールタイプ、モジュール名などのこれらすべてが含まれます。

//Widget configuration object
var weatherWidgetConfig = {
    type: 'widget',
    name: 'weather'
}

そして、DOM要素とそのすべての子を調べて、データ属性が構成オブジェクトと一致していること、それらが存在していること、および変更されていないことを確認します。ある場合は、正しい構成でmodule.destroy（）とmodule.build（）を再度呼び出します。

于 2012-11-24T00:45:29.237 に答える
1

回答者がウェブアプリの作り方についてアドバイスをしてくれるという回答をたくさんいただきました。それは一部の読者には役立つかもしれませんが、それは質問に答えていません。しかし、一部の人は答えようとしました。私が完全な答えに最も近いのは@Keithによって与えられました。唯一の問題は、「簡単な」テストに失敗することです。

一部の人が言っているように、正解はNOのようです。ユーザーによるDOM操作を簡単に検出することはできません。

于 2012-11-25T01:42:46.707 に答える
0

私は最近、「セレクターリスナー」を発見しました。これは、CSSに依存してDOMの変更を検出する手法です。IE9では動作しません-。DOM全体に適用するのは良い考えではないように思われますが、その目的は特定のセレクターを操作することです。

詳細については、このブログ投稿をご覧ください。

于 2012-11-24T00:09:38.783 に答える