5

Google アナリティクスと機能的に似た Web サイトを構築しています。私は分析を行っていませんが、他の Web サイトに機能を追加する 1 行の JavaScript または 1 行の iframe を提供しようとしています。

具体的には、埋め込みコンテンツは、新しいウィンドウをポップアップし、ユーザーがいくつかのアクションを実行できるようにするボタンになります。最終的にユーザーは終了し、ウィンドウが閉じます。その時点で、ユーザーがフローを完了したことを反映してボタンが新しい要素に更新されます。

ポップアップ ウィンドウは私のサイトからコンテンツを読み込みますが、私の質問は JavaScript の埋め込み行 (または iframe) に関するものです。これを行うためのベストプラクティスの方法は何ですか? Google アナリティクスと最適化された JavaScript を使用して、ホスト ページを変更します。明らかに、iFrame も機能します。

私が抱えているセキュリティ上の懸念は、誰かが埋め込みコードをあるサイトからコピーして、別のサイトに置くことです。私のスクリプト/iframe を実装する各ページ/サイトの組み合わせには、サイトの開発者が私のサイトの認証済みアカウントから生成する一意の ID があります。次に、適切な埋め込みコードを提供します。

私の最初の考えは、ページ/サイトの組み合わせに固有の url パラメータを使用して、サイトからページをロードする iframe を使用することでした。そのルートに行く場合、ページが特定のドメインまたは URL プレフィックスに埋め込まれた iframe からのみ読み込まれることを確認する方法はありますか? 同様のことをJavaScriptで実現できますか?

この投稿は非常に役に立ちましたが、ユーザーが対話するコンテンツを実際にポップアップ表示するため、私の使用例は少し異なります。心配なのは、私の埋め込みをホストしているサイトの敵が、自分のユーザーを偽ってウィジェットを使用するように誘惑することです。これらのユーザーは、敵のサイトに代わって私のサイトと対話していると信じていますが、実際には友好的なサイトに代わって対話しています.

4

2 に答える 2

11

シンプルなクライアント側のみのウィジェットとして維持したい場合、簡単な答えは、あなたが説明したとおりにそれを行うことはできないということです.

これに対して思いつく 2 つの解決策は次のとおりです。1 つ目は妥協ですが単純であり、2 つ目はもう少し複雑です (あなたとウィジェットのユーザーの両方にとって)。

リファラーチェック

リファラー HTTP ヘッダーを検証して、ドメインが特定のサイト ID に期待されるものと一致することを確認できますが、すべてのブラウザーがこれを送信するわけではなく (参照ページが HTTPS の場合はほとんど送信しない)、一部のブラウザーのプライバシーに注意してください。プラグインはそれを差し控えるように構成できます。その場合、ウィジェットが機能しないか、ユーザー エクスペリエンスに追加の不格好な手順が必要になります。

  1. ウェブサイトwww.foo.comは、たとえば埋め込みスクリプトを使用してウィジェットを埋め込みます<script src="//example.com/widget.js?siteId=1234&pageId=456"></script>
  2. ウィジェットは、サーバー側のコードを使用して .js ファイルを動的に生成します (たとえば、.js ファイルの要求は、サーバーの書き換え規則に従って PHP / ASPX にマップすることができます)。
  3. サーバー側のコードは、refererHTTP ヘッダーをチェックして、データベース内の期待値と一致するかどうかを確認します。
  4. 一致すると、ウィジェットは通常どおり実行されます。
  5. 不一致の場合、またはリファラーが空白/欠落している場合、ウィジェットは引き続き実行されますが、ウィジェットにアクセスしたことをユーザーに確認する追加の手順があります。www.foo.com
  6. クリックジャッキングから確認を安全にするために、ポップアップ ウィンドウで確認ステップを開く必要があります。

サーバーチェック

あなたの目的に対して少し過剰に設計されている可能性があり、ウィジェットを埋め込みたいクライアントにとって複雑になりすぎるリスクがあります-あなたが決めます.

  1. ウェブサイトwww.foo.comは、ユーザーから受け取っている現在のページ リクエストにウィジェットを埋め込む必要があります。
  2. サーバーは、www.foo.comホストする API に API 要求 (秘密鍵を渡す) を行い、ページ ID 456 のワンタイム キーを要求します。
  3. API は秘密鍵を検証し、安全なワンタイム キーを生成し、データベースにリクエストを記録しながら値を返します。
  4. www.foo.com次のようにスクリプトを埋め込みます<script src="//example.com/widget.js?siteId=1234&oneTimeKey=231231232132197"></script>
  5. ウィジェットはサーバー側のコードを使用して js ファイルを動的に生成します (たとえば、.js はサーバーの書き換え規則に従って PHP / ASPX にマップできます)。
  6. サーバー側のコードは、oneTimeKeyandのsiteId組み合わせが有効であることを確認し、有効である場合はウィジェット コードを生成し、データベース レコードを削除します。
  7. ユーザーがページをリロードすると、上記の手順が繰り返され、新しいワンタイム キーが生成されます。evil.comこれにより、埋め込みコードとパラメーターのページスクレイピングを防ぐことができます。
于 2013-08-21T08:23:07.450 に答える