ホームページ ウェブフロントエンド CSSチュートリアル 同一オリジンおよびクロスドメインのフロントエンド インタビューの詳細な紹介

同一オリジンおよびクロスドメインのフロントエンド インタビューの詳細な紹介

Sep 14, 2017 am 09:36 AM
導入 詳細

クロスドメインは、ブラウザーの同一オリジン ポリシーによって発生します。これは、ページによって要求された URL アドレスがブラウザー上の URL アドレスと同じドメイン (つまり、ドメイン名、ポート、およびドメイン) 内に存在する必要があることを意味します。フロントエンドインタビューに必要な同一オリジンとクロスドメインに関する関連情報を以下の記事で詳しく紹介していますので、必要な方は参考にしてください。 。

前書き

ブラウザーの同一オリジン戦略とクロスドメイン手法も、フロントエンドのインタビューで非常に一般的な問題であることはよく知られています。この記事では主に同一オリジンとクロスドメインについて説明します。フロントエンドのインタビュー中に遭遇するメソッドについては、クロスドメインの問題についてはあまり説明する必要はありません。詳細を見てみましょう。

同一生成元ポリシーとは何ですか?

同一生成元ポリシーは、あるソースからロードされたドキュメントまたはスクリプトが別のソースからのリソースと対話する方法を制限するために使用される、潜在的に悪意のあるファイルを隔離するために使用される方法です。安全機構。

同一オリジンとは何ですか?

2 つのページでプロトコル、ドメイン名、ポートが同じ場合、その 2 つのページは同じオリジンです。例: http://www.hyuhan.com/index.html この Web サイト、プロトコルは http、ドメイン名は www.hyuhan.com、ポートは 80 (デフォルト ポート)、その発信元は次のとおりです:

  • http://www.hyuhan.com/other.html:同じソース

  • http://hyuhan.com/other.html:異なるソース(異なるドメイン名)

  • https:// www.hyuhan.com /other.html: 異なるソース (異なるプロトコル)

  • http://www.hyuhan.com:81/other.html: 異なるソース (異なるポート)

同一生成元ポリシーユーザー情報のセキュリティを保護するため、同一オリジンポリシーによって制限される主な動作は以下の通りです:

  1. Cookie、LocalStorage、IndexDBを読み取れない

  2. DOMを操作できない

  3. AJAXリクエストを送信できない

クロスドメインアクセスの進め方

クロスドメインAJAXリクエストの作り方

同一生成元ポリシーの制限をバイパスしてクロスドメインAJAXを行うには、主に3つの方法があります。リクエスト。

JSONP

JSONP は、クライアントとサーバー間のクロスドメイン通信の一般的な方法です。クロスドメイン


window.onload = function() {
    var script = document.createElement('script');
    script.src = "http://example.com/callback=test";
    document.appendChild(script);
}
function test(res) {
    console.log(res);
}
ログイン後にコピー

src のコールバック パラメーターは、バックエンドが呼び出す必要があるコールバック関数の名前を設定するために使用されます。サーバーによって返されるデータは次のとおりです:


test({
    "name": "小明",
    "age": 24
    })
ログイン後にコピー

このようにして、フロントエンドはドメインを越えて端末データを読み取ることができます。ただし、jsopn は get リクエストのみを行うことができ、post リクエストを送信することはできません。

WebSocket

WebSocket は、TCP に基づく新しいネットワーク プロトコルであり、サーバーがサポートしている限り、同一生成元ポリシーを実装せず、クロスドメイン アクセスを許可します。また、WebSocket は Ajax 通信に限定されません。Ajax テクノロジーではクライアントがリクエストを開始する必要があり、WebSocket サーバーとクライアントは相互に情報をプッシュできるからです。

CORS

CORS は、W3C 標準である Access-Control-Allow-Origin (クロスドメイン リソース共有) の略称です。 CORS はブラウザとサーバーの両方でサポートされている必要があります。現在、基本的にすべてのブラウザがこの機能をサポートしています。 CORS のサーバー側のサポートは、主に Access-Control-Allow-Origin を設定することによって実行されます。ブラウザーが対応する設定を検出すると、Ajax クロスドメイン アクセスを許可できます。

document.domain

Cookieは、セキュリティ上の理由から、同じオリジンを持つWebページのみを共有できます。ただし、2 つの Web ページの第 1 レベルのドメイン名が同じでも、ヘッドフォンのドメイン名が異なる場合は、document.domain を設定することで Cookie を共有できます。

たとえば、ある Web ページのドメイン名は http://w1.example.com/a.html で、別の Web ページのドメイン名は http://w2.example.com/b.html です。同じ document.domain を設定すると、これら 2 つの Web ページは Cookie を共有できます。

postMessage API

postMessage() メソッドを使用すると、さまざまなソースからのスクリプトが制限された方法で非同期で通信できるようになり、クロスドキュメント、マルチウィンドウ、クロスドメインのメッセージングが可能になります。 postMessage() 関数を使用してメッセージを渡します。ターゲット ページはウィンドウのメッセージ イベントをリッスンしてメッセージを受信します。 postMessage を使用すると、ドメイン全体で LocalStorage、IndexDB、および DOM データを読み取ることができます。

window.name

ブラウザウィンドウには属性 window.name があり、これは、ソースが同じかどうかに関係なく、前の Web ページがウィンドウ内でこの属性を設定している限り、次の Web ページは次の Web ページを使用できることを規定しています。それを読んで。つまり、ウィンドウ (ウィンドウ) のライフサイクル内では、ウィンドウによってロードされるすべてのページが window.name を共有します。各ページには、ロードされるすべてのページの window.name に対する読み取りおよび書き込み権限が保持されます。 。明らかに、これによりクロスドメイン アクセスが実現できます。

以上が同一オリジンおよびクロスドメインのフロントエンド インタビューの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

wapiとは何かを詳しく紹介 wapiとは何かを詳しく紹介 Jan 07, 2024 pm 09:14 PM

インターネットを利用する際に「wapi」という言葉を目にしたことはあるかもしれませんが、「wapi」が何なのかよく分からないという方もいると思いますので、以下で詳しくご紹介します。 wapi とは: 回答: wapi は、無線 LAN の認証と機密性を確保するためのインフラストラクチャです。一般的にオフィスビルなどの近くでカバーされる赤外線やBluetoothなどの機能と似ています。基本的にこれらは小さな部門によって所有されているため、この機能の範囲はわずか数キロメートルです。 wapi の関連紹介: 1. Wapi は無線 LAN の伝送プロトコルです。 2. この技術により、狭帯域通信の問題を回避し、より良好な通信が可能になります。 3. 信号の送信に必要なコードは 1 つだけです

x220がWindows 11へのアップグレードをサポートしているかどうかの詳細な説明 x220がWindows 11へのアップグレードをサポートしているかどうかの詳細な説明 Dec 27, 2023 pm 11:47 PM

x220 は、約 10 年前の 2012 年に Lenovo によって発売されたラップトップです。古いモデルなので、最新の win11 システムにアップグレードできるかどうか知りたいユーザーが多いですが、実際には、このコンピューターはアップグレードできますが、Microsoft のプッシュ方式ではアップグレードできません。 x220 は win11 にアップグレードできますか: 回答: x220 は win111 にアップグレードできます。x220 は win11 にアップグレードできますが、Microsoft が提供する方法ではシステムをアップグレードできません。 2. 今回、Microsoft は win11 に対して非常に高いハードウェア構成要件を設けているため、それが満たされていない場合は、他の方法を使用してアップグレードする必要があります。 3. win11 をアップグレードしたいユーザーは、まずこのサイトから win11 ワンクリック再インストール ファイルをダウンロードできます。 4

JBLヘッドフォンの信頼性を確認する方法 JBLヘッドフォンの信頼性を確認する方法 Dec 29, 2023 pm 10:54 PM

JBL ヘッドフォンは多くの音楽鑑賞ユーザーにとって最初の選択肢であり、絶賛されていますが、誰もが依然として偽物を非常に恐れています。以下でクエリの方法を見てみましょう。 jbl ヘッドフォンの信頼性を確認する方法: 1. まず、「中国製品情報検証センター」に入ります。 2. 次に、クエリコードを入力して、それが正しいかどうかを確認し、本物かどうかを判断します。 3. ヘッドフォンからの音の明瞭さによっても区別できます。純正ヘッドホンの音は非常にクリアで音質も変わりません。偽造ヘッドフォンのサウンドには多くの異物が含まれており、音質も非常に悪いです。 4. ヘッドフォンのサウンドを最大まで上げて、調和しているかどうかを確認してください。実際のヘッドフォンのサウンドは同じです。でも偽のヘッドフォンの音は鳴ってる

win11でPUBGゲームが実行できるか詳しく解説 win11でPUBGゲームが実行できるか詳しく解説 Jan 06, 2024 pm 07:17 PM

PlayerUnknown's Battlegrounds としても知られる Pubg は、2016 年の人気以来、多くのプレイヤーを魅了してきた非常に古典的なシューティング バトル ロイヤル ゲームです。最近win11システムがリリースされた後、多くのプレイヤーがwin11でpubgをプレイしたいと考えています。編集者に従ってwin11でpubgをプレイできるかどうかを確認してみましょう。 win11 で pubg をプレイできますか? 回答: Win11 で pubg をプレイできます。 1. win11の開始当初、win11ではtpmを有効にする必要があったため、多くのプレイヤーがpubgから追放されました。 2. しかし、プレイヤーのフィードバックに基づいて、Blue Hole はこの問題を解決し、win11 で pubg を正常にプレイできるようになりました。 3.居酒屋に出会ったら

Bluetooth 5.3 には携帯電話のサポートが必要ですか?詳細はこちらをご覧ください Bluetooth 5.3 には携帯電話のサポートが必要ですか?詳細はこちらをご覧ください Jan 14, 2024 pm 04:57 PM

携帯電話を購入するとき、携帯電話のパラメータに Bluetooth サポート オプションがあることがわかります。購入した Bluetooth ヘッドセットが携帯電話と一致しない状況に遭遇することがあります。したがって、Bluetooth 5.3 をサポートする必要がありますか?携帯電話? 実際には必要ありません。 Bluetooth 5.3 には携帯電話のサポートが必要ですか? 回答: Bluetooth 5.3 には携帯電話のサポートが必要です。ただし、Bluetooth をサポートする携帯電話であれば使用できます。 1. Bluetooth には下位互換性がありますが、対応するバージョンを使用するには携帯電話のサポートが必要です。 2. たとえば、Bluetooth 5.3 を使用するワイヤレス Bluetooth ヘッドセットを購入するとします。 3. 携帯電話が Bluetooth 5.0 のみをサポートしている場合は、接続時に Bluetooth 5.0 が使用されます 4. したがって、この携帯電話を使用してヘッドフォンを接続して音楽を聴くことはできますが、速度は Bluetooth ほど良くありません。

i5プロセッサがwin11をインストールできるかどうかの詳細な紹介 i5プロセッサがwin11をインストールできるかどうかの詳細な紹介 Dec 27, 2023 pm 05:03 PM

i5 は Intel が所有するプロセッサのシリーズで、第 11 世代 i5 にはさまざまなバージョンがあり、世代ごとに性能が異なります。したがって、i5 プロセッサーが win11 をインストールできるかどうかは、プロセッサーの世代によって異なりますので、エディターに従って個別に学習しましょう。 i5 プロセッサーは win11 にインストールできますか: 回答: i5 プロセッサーは win11 にインストールできます。 1. 第 8 世代以降の i51、第 8 世代以降の i5 プロセッサは、Microsoft の最小構成要件を満たすことができます。 2. したがって、Microsoft Web サイトにアクセスして「Win11 インストール アシスタント」をダウンロードするだけで済みます。 3. ダウンロードが完了したら、インストール アシスタントを実行し、プロンプトに従って Win11 をインストールします。 2. i51 8世代以前と8世代以降

サイバーパンク 2077 に関するよくある質問の分析 サイバーパンク 2077 に関するよくある質問の分析 Jan 05, 2024 pm 06:05 PM

最近、超人気ゲーム「サイバーパンク 2077」がオンラインで公開されました。多くのユーザーが急いでダウンロードして体験しています。しかし、その過程ではまだ多くの問題があります。今日は、サイバーパンク 2077 のプレイに関するよくある質問をいくつか紹介します。何か欲しいことがあれば。サイバーパンク 2077 のプレイに関するよくある質問: 1. 価格の詳細: 1. Steam ゲーム プラットフォームでの購入価格は: 298 元です。 2. 壮大なゲーム プラットフォームの購入価格は、43 米ドル = 282 元です。 3. ps4ゲーム端末の購入価格は400元+香港ドル、箱入りは380元+人民元です。 4. ロシア地域でのロシアの購入価格は 172 元です。 2. 構成の詳細: 1. 最小構成 (1080P): GT

マインカードを購入できないのはなぜですか? 詳細 マインカードを購入できないのはなぜですか? 詳細 Dec 27, 2023 am 10:42 AM

グラフィックカードを購入する際はマイニングカードを購入しないように注意する必要があると言われていますが、なぜマイニングカードを購入できないのか理解していないユーザーがほとんどだと思います。実はここには多くのタブーがあります。見て。マイニング カードを購入できないのはなぜですか? 回答: マイニング カードには保証がなく、長期間高負荷がかかるため寿命が大幅に短くなるため、購入できません。つまり、マイニングカードを購入すると、一度破損すると修復できず、破損しやすいのです。マイニングカードの中には有効期限の上限に達しているものもあり、購入後使用する前に上限に達してしまう場合もあります。購入できないマイニングカードの関連紹介: 1. マイニングカードはビットコインのマイニングに使用されるため、グラフィックカードに非常に豪華であり、損失も特に大きくなります。 2. これらのグラフィックス カードは長期間にわたって高負荷にさらされており、3 か月使用すると通常よりも消耗する可能性があります。

See all articles