インタビュー-http契約のフロントエンド

その他 2019-06-13 01:46:21 訪問数: null

httpプロトコルとは何ですか

クライアントからサーバーへの完全な標準、および運用の一連の処理などのWeb利用状況と呼ばれるHTTP（ハイパーテキスト転送プロトコル、ハイパーテキスト転送プロトコル）プロトコル。契約は合意されたルールを指します。Webは、HTTPプロトコルの通信に基づいており、言うことができます。

それはhttp3.0です

TCP / IPプロトコルスイート。

HTTPは、それらのサブセットです。さまざまなレベルでは、次の4つに分けました：

  • アプリケーション層（HTTP、DNS）
  • トランスポート層（データ送信、TCPスリーウェイハンドシェイクおよび四の光波）
  • ネットワーク層（搬送経路の選択、IPプロトコル）
  • データリンク層（ハードウェア処理部）

IPプロトコル

役割は、互いに各種データパケットを送信することである（IPアドレス、MACアドレス）

TCPプロトコル

より容易に大容量のデータを転送するために、データは、データパケットの管理は、データが他の側に達しているか否かを確認することができ、セグメント単位に分割されている（スリーウェイハンドシェイクを開始します）

HTTPSは何ですか、とHTTPの違いは何ですか

HTTPプロトコルに基づいてHTTPSは、SSLまたはTLSによって提供された暗号化データを、互いのアイデンティティとデータ整合性保護を検証＆

- 内容加密：采用混合加密技术，中间者无法直接查看明文内容
- 验证身份：通过证书认证客户端访问的是自己的服务器
- 保护数据完整性：防止传输的内容被中间人冒充或者篡改  
复制代码

違い：

  • HTTPクリアテキスト通信は、HTTPSコンテンツは暗号化されます
  • HTTP通信当事者の身元を確認しない、HTTPSが認定によって検証されます
  • HTTPメッセージの整合性を証明することができない、とそこに改ざんされている可能性があり、HTTPSは、データの整合性を保護：仲買人を装っているコンテンツの送信を防止または奪うために

TCP 3ウェイハンドシェイク

クライアントからの要求は、パッケージのhttpプロトコル層、TCPプロトコルのパッケージ層、パッケージのIPプロトコル層、イーサネットレイヤを再パッケージ化、およびExpressは、カプセル化と呼ばれるプロセスと同じで作られた、優れたパッケージングを通過します後の道路（輸送による物理層）上に、配信サーバは、外部から内部へ、開き始める達します。このプロセスは誰もが、絶対的に信頼性の高いマスターデータできるよう、TCP 3ウェイハンドシェイクによってかどうか

図1は、送信者は他のパケットとデータSYN（同期）フラグを送信します。

SYN / ACK（肯定応答）マーカーは、送達確認情報を伝達することが示されていると2、受信機は、データパケットを受信するバック

ハンドシェイクの終了を表す3、戻りデータパケットのACKフラグと送信側、

いくつかのステージが不可解ハンドシェイク中に中断した場合、TCPプロトコルは、再び同じ順序で同じデータパケットを送信します

TCPの4波

クライアントまたはサーバは、波の作用を開始することができます。

（1）クライアントは、サーバBへのクライアントAを閉じるため、FINを送信データを送信します。

（2）サーバBは、FINを受信すると、ACKを返信

（3）クライアントの接続Bサーバは、クライアントがAにFINを送信閉じ

（4）クライアントはACKパケットの確認応答を送り返します。

HTTP1.Xに比べHTTP2.0と新機能

ステータスコード

クライアントの戻り結果は、サーバ・プロセスを識別するHTTPリクエストは、エラーが要求内等で発生したことを示す、正常です。

  • 受信した要求は、1XX処理されています

  • 2XXの成功（リクエストが適切に処理されたことを、このシリーズ）

    • 200 OK、正しく処理されるように、サーバー側を要求するために、クライアントから発現
    • 204は、要求が成功し、サーバがリソースを返さないことを示している（応答パケットは、エンティティ本体部分を含みません）
    • 範囲要求クライアント206は、要求が成功しています

  • 3XXは-301が恒久的に移動（特殊な処理を実行するには、showブラウザー）をリダイレクトし、恒久的なリダイレクトは、リソースは新しいURLが割り当てられていることを意味し

    • 302見つけ、一時的なリダイレクトは、リソースが一時的に新しいURLが割り当てられていることを意味し
    • 303は他の参照、別のURL資源の存在を示し、あなたがリソースを取得するには、GETメソッドを使用する必要があります（301/302/303対応のために、ほとんどすべてのブラウザが自動的にメッセージ本文と再利用GETリクエストを削除します）
    • 304、サーバリソースが変更されていない、変更されていないが、クライアントのキャッシュファイルに戻りました。
    • 307一時的なリダイレクト、および302と同様の意味は、クライアントが新しいアドレスを要求するために、同じ方法を要求し維持することが望ましいです

  • 4XXクライアントエラーは、クライアントがエラー嘘の原因であることを示し、

    • 400要求メッセージの構文エラー
    • （不正）、不正401要求は認証を必要とします。ログインが必要なページの場合、サーバーは、この応答を返すことがあります。
    • 禁じられた403は、サーバは要求を拒否します。
    • 404見つからなかったが、要求は、リソースがサーバー上に見つからなかったことを意味します

  • 5XXサーバーエラー

    • 要求の実行中に発生した500は、サーバー側のエラーを表します。
    • 501は、サーバが必要な現在の要求の機能をサポートしていないことを意味し
    • 503は、要求を処理することができ、サーバーが過負荷に一時的に、または保守のために停止していることを示しています

DNSとは何ですか

IPアドレスとドメイン名解決サービスを提供するために、アプリケーション層プロトコル

クロスドメインの問題

プロトコル、ドメイン名、ブラウザの同一生成元ポリシーの制約が異なるため、原因の問題で任意のポート

  • CORSクロスドメインリソース共有メカニズム、より多くの利用可能なIE10、単純な要求とプリフライト要求二種類があります。

    • 単純な要求、

      • リクエストメソッドは、GET、POST、ヘッド（HEAD要求が応答モードを受信しないリクエストを送信しただけさ）です
      • リクエストヘッダは、わずか数は、受け入れ、コンテンツの言語、Content-Typeの言語を受け入れます。
      • アプリケーション/ x-www-form-urlencodedで、マルチパート/フォームデータ、テキスト/平野：Content-Typeヘッダは、許可された値であります

      バックエンドの適応方式：中responesヘッダーにアクセス制御 - 許可 - 起源を追加

    • プリフライトリクエストは、フロントエンドの後端が、第一の設定方法は、DELETE、PUT CONNECT、OPTIONS範囲を許可するかどうかをチェックするためにヘッダを変更するための共通のクロスドメインの要求の前にリクエストのオプションを追加し、TRACE要求が原因のプリフライトを設定します、受け入れ言語、コンテンツ、言語などの一般的なトークンなど、いずれかの構成でのContent-Type以外のヘッダを受け入れる：単純な要求に設定され、許可、キャッシュメカニズムキャッシュcontorl Content-Typeの値が許可されていない、など一般的に使用されるようにアプリケーション/ JSON

バックエンドへのプリフライトリクエストは、より多くのresponesヘッダーを設定する必要があります

- Access-Control-Allow-Methods代表可接受methods
- Access-Control-Allow-Headers代表可接受的headers修改
- Access-Control-Max-Age代表预检的残留时间，代表预检之后可以免预检的时间
复制代码

juejin.im/post/5c35f6...

  • でスクリプトのリンクを要求するJSONP（JSONパディング付き）
function jsonp(setting){
  setting.data = setting.data || {}
  setting.key = setting.key||'callback'
  setting.callback = setting.callback||function(){} 
  setting.data[setting.key] = '__onGetData__'

  window.__onGetData__ = function(data){
    setting.callback (data);
  }

  var script = document.createElement('script')
  var query = []
  for(var key in setting.data){
    query.push( key + '='+ encodeURIComponent(setting.data[key]) )
  }
  script.src = setting.url + '?' + query.join('&')
  document.head.appendChild(script)
  document.head.removeChild(script)

}

jsonp({
  url: 'http://api.jirengu.com/weather.php',
  callback: function(ret){
    console.log(ret)
  }
})
jsonp({
  url: 'http://photo.sina.cn/aj/index',
  key: 'jsoncallback',
  data: {
    page: 1,
    cate: 'recommend'
  },
  callback: function(ret){
    console.log(ret)
  }
})
复制代码

短所：のみエラーの原因を見つけることができない、バックエンドのニーズに合わせて、要求を取得することができます

WebSocketを

サーバとクライアントのための全二重通信サーバとクライアントが接続を開始し、接続状態のままになります

  • クライアントを待たずにサーバーが要求を開始し、それがクライアントにデータを送信することができます
  • Websoket少しヘッダ情報、トラフィックを低減することができます

アップグレードのHTTPフィールド：WebSocketのは、変更したサーバの通信プロトコルを伝えます

URI、URL、URN

HTTPプロトコルは、インターネットURI上のリソースを使用します。コンセプト：

URI（ユニバーサルリソース識別子：統一資源識別子）URL（ユニバーサル・リソース・ロケータ：ユニフォームリソースロケータ）URN（ユニバーサルリソース名：ユニフォーム・リソース名）。

URIは、プロトコルプログラム（HTTP、FTP）で表さ/リソース/ロケーション識別子（理解を容易にする/句読点）です。URIのインターネットリソースを識別する文字列、およびリソース指定されたURL（インターネット上の場所）に対処。URLはURIのサブセットです

Webセキュリティ

XXS攻撃

クロスサイトスクリプティング攻撃は、スクリプトタグを使用して、スクリプトがの手段として、Webページの中に注入します

CSRF攻撃

プラスナゲッツの懸念をGETインタフェースがある場合は、次のように、idパラメータは、関係者のIDです。：

https://juejin.im?id=5cd0438c6fb9a031ec6d3ab2

私はちょうど私のページの内のimgタグを記述する必要があります。

<img src="https://juejin.im?id=5cd0438c6fb9a031ec6d3ab2" />

CSRF攻撃は、Webからの暗黙の認証メカニズムです！Web認証メカニズムは、ユーザーのブラウザからの要求が、しかし要求は、ユーザの承認によって送信されることを保証することはできませんが、ことを保証することができます。CSRFは、問題は通常、次のルールに従うことができCSRF攻撃を防ぐために、サービスの終了によって解決される攻撃します：

  • 取得要求がデータを変更するために使用されていません
  • クッキーの設定HTTPのみ
  • クロスドメインのインターフェイス設定を禁止
  • そのようなコードやトークンなどの付帯要求確認情報、

クリックジャッキング

その後、攻撃者は、ユーザーが知らないうちに透明iframe内のページをクリックしてしまう、IFRAMEを透明にすると、ページ上で動作するようにユーザーを説得するために、自分のページに埋め込まれたIFRAMEを経由してウェブサイトを攻撃する必要があります

防衛：HTTPレスポンスヘッダ-X--フレーム・オプションを使用してください。X-フレーム・オプションは、クリックジャッキング生まれを解決するために、それは3つのオプションの値を持っているということができます。

  • DENY：ブラウザは、現在のページフレームのページのいずれかをロードすることを拒否します。
  • SAMEORIGIN：ページフレームのアドレスが唯一のドメイン名の下のページに相同ことができます。
  • ALLOW-FROM起源：フレームは、ページアドレスをロードすることができます。

中間者攻撃

攻撃者は、サーバーとクライアントが接続を確立し、接続が安全であるが、実際に通信処理の全体が攻撃者によって制御され、相手をできるようにしています。攻撃者は、両者の間の情報通信を得ることができるだけでなく、交通情報を修正します。中間者攻撃の性質は、クライアントとサーバー間の認証と信頼です。

HTTPS仲介攻撃、信頼証明書をクライアントとサーバーの問題に対処するためのメカニズムの導入を防止する究極の手段として、これより効果的に中間者攻撃を防ぎます。

HTTP1.Xに比べHTTP2.0と新機能

  • 新しいバイナリフォーマット：HTTP / 1.xの解像度はテキストベースです。自然の欠陥の存在に基づいて契約のテキストを解析、多様性は、テキストの形であり、シーン総合的に勘案の多くを行うためにバインドされています。バイナリは、0と1の組み合わせの識別のみ異なっています。便利で強力なバイナリフォーマットを解析し、この対価のHTTP / 2.0プロトコルに基づいて。
  • マルチプレクサ：アップグレード版へのHTTP / 1.1の永続的な接続であるHTTP / 2.0のサポート多重化、。多重化は、フローが複数存在してもよいTCP接続である、すなわち、要求/応答の複数を送信してもよいです。同時多重の複数の開始することを要求、要求に対するそれぞれの応答を可能にし、ラインのブロッキング問題の頭部を避けるために、他の要求または応答を待つ必要はありません。このような要求時間のかかる作業真剣に、それが大幅に伝送性能を向上させ、他の接続の通常の実行には影響しません。
  • ヘッダ圧縮：エンコーダを使用して、ヘッドのサイズを小さくするための要求と応答、大量の情報を有するヘッダHTTP / 1.1、繰り返し各要求を送信し、HTTP / 2.0送信される必要がある、最初のキャッシュそれぞれの通信フィールド・テーブル・ユニット、ヘッドの重複伝送を回避するために、両方だけでなく、送信されるサイズを減少させます。
  • プッシュサーバー：プッシュサーバーは、クライアントへの送信に伴うクライアントに必要なCSS / JS / IMG index.htmlのリソースにある、クライアントの再送要求を除去するステップは、（キャッシュからフェッチ）。

HTTP / 3.0

  • パッケージをブロックしないでください：問題が発生した場合、TCP接続上のデータ伝送は、複数のデータパケットは、それが他のデータパケットの送信を継続するためには、TCPパケット再送を待つ必要があります。しかしQUIC UDPパケットが問題に再送する必要がある場合、UDPに基づいて、他のデータパケットの伝送プロトコルには影響しません、ので。
  • クイックセッションを再起動：一般的なTCPベースの接続を構築するためにIPとポートとプロトコルの両端に基づいています。シナリオスイッチングネットワークにおいて、移動端末は、4Gネットワークを使用して、無線ネットワークを切り替えるようなTCP接続を再作成する必要がありもたらす、IP自体を変更します。ネットワーク環境が変化し、限り同じUUIDは、あなたが手を振ると、データを送信するために継続する必要がないことができたときにQUICプロトコルは、あなたが接続するたびにマークするユニークなUUIDを使用しています。

HTTPパケット

HTTPプロトコルの相互作用のための情報は、HTTPパケットとして知られています。クライアントのHTTPパケット呼要求パケットは、サーバのHTTP応答パケットは、メッセージと呼ばれます。

要求ライン（要求方法、プロトコルバージョン）、リクエストヘッダ（URI要求は、クライアント情報、等）及びコンテンツ・エンティティによる要求パケットの構成（ユーザ情報とリソース情報等は、空にすることができます）。

応答メッセージは、ステータスライン（プロトコルバージョン、ステータスコード）、応答ヘッダ（サーバ名、リソースの識別、等）及び（サーバリソース情報から返された）コンテンツ実体構成です。

リクエストメソッド

  • この方法は、一般的にサーバリソースを取得するために使用されます：GET
  • POST：一般的に、トランスポートエンティティボディに使用POSTメソッド
  • PUT：一般的にファイルを転送するために使用される方法を置きます
  • DELETE：ファイルを削除する方法を削除
  • HEAD：メッセージヘッダを取得するためのヘッド方法は、メッセージ本体が返されていません
  • OPTIONS：リクエストURIをサポートするためのリソースのためのオプションの方法の問い合わせ方法

ヘッダフィールド

  • Cache-Control

（秒単位でキャッシュ可能なリソースの最大時間）キャッシュなし（サーバーへの再検証必須）、無店舗（任意のキャッシュなし）、最大エージング= 111111、パブリック（クライアント、プロキシサーバを使用することができます。コントロールキャッシュ動作キャッシュ）、プライベート（キャッシュプロキシサーバーが使用できません）

  • 受け入れます

正しく受信されたメディアタイプ：アプリケーション/ JSONテキスト/平野

  • マッチした場合、ETagの値と一致し、サーバは要求を処理します
  • ローカルリソースので変性-IF（比較時間）未修飾304戻ります
  • もし-なし - 一致した場合 - なし - マッチとETagの値矛盾処理要求
  • Set-Cookieは一般的に、ユーザーの身元を識別するために使用される、クライアント情報の存在を必要とします
  • コンテンツ、ローカル修正有効期限有効期限
  • 最終更新日LAST_MODIFIEDコンテンツ
  • ETagのリソース識別子は、サーバによって割り当てられ、リソースが変更する場合が変更されます識別する
  • 結果は、解析によって返されたものをブラウザに伝えるために使用されるContent-Typeの

HHTPキャッシュ

意思決定への応答のヘッダの内容に基づいて、強力な交渉のキャッシュとキャッシュ、

強力なキャッシュ：

これは、要求を開始しません。

キャッシュ制御（バッファ制御）：（秒）最大エージング=番号、有効期限、HTTP1.1仕様を指定します。

有効期限（有効期限）、それは、GMT時間に古い仕様の文字列の時間です。

交渉のキャッシュ：

これは、要求を起動します。

このパートナーグループが変更した場合-ので（すなわち、テープヘッダフィールド（最終変性またはたEtag）に応答して、第1の要求は、要求のフィールドに対応する後続の要求をもたらす、対になっている、または応答ヘッダーのEtagまたはLast-Modifiedのフィールドが存在しない場合場合 - なし - マッチ）、そのフィールドは、対応するリクエストヘッダを持っていないでしょう。

ETagを、それは「二次元コード」でマークされるリソース

クライアントはIf-None-MatchヘッダフィールドのETagの値を送信します。

If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

二つの値が一致する（すなわち、リソースが変更されていない）、サーバは、任意のコンテンツ304なしで返された場合、そのETagを現在のリソースのバージョンと比較される（IF-なしマッチ一緒にフィールド値として送信）サーバクライアントのETagはありませんクライアントキャッシュのバージョンが（新鮮な）が利用可能である言って、ステータスを変更します。

Last-Modifiedのは、変更を行うために、日付と時刻リソースによって特定されたソースサーバーを含むレスポンスヘッダーです。通常、受信または保存されたリソースが互い。要求ヘッダーと一致するかどうかを決定するためにバリデータとして使用し、もし修飾-ので、（もしあれば）と比較不変リターン304れます

（サーバがサポートしている場合）変更 - 開始一緒に使用する、もし-なしマッチ高い優先順位

どのくらい強いそれがキャッシュをクリア？

この単純では、単に追加するURIのクエリフィールドの後ろに、私たちはバージョン番号と呼んでいます。

手書きAJAXリクエスト

function callBack () {
  console.log(this.responseText)
}

let xhr = new XMLHttpRequest()
xhr.onload = callBack
xhr.open(method, url, true)
xhr.send()
复制代码

HTTPSハンドシェイク、証明書の有効性を検証する方法をクライアント

  • クライアントが信頼する認証局かどうかを確認してください。
  • CRLまたはOCSPを失効させるかどうかをチェックするところで。
  • システム時刻を比較すると、校正証明書は、有効期間内です。
  • 証明書があるかどうか、秘密鍵チェックして、他には、証明書は、ドメイン名が発行された証明書と一致しているかどうかを判断します

参考：juejin.im/post/5cd043 ... github.com/Advanced-Fr ...

ます。https：//juejin.im/post/5cee3229e51d455a68490af3で再現

おすすめ

転載: blog.csdn.net/weixin_34259159/article/details/91454749
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com