アリの面接の質問の整理（パート2）

http2と1の違い

• ブラウザとサーバーの通信プロセス

  • TCP接続：ブラウザとサーバーが3回握手して、TCP接続を確立します
  • クライアント要求：TCP接続が確立された後、クライアントはサーバーにHTTP要求メッセージを送信します（HTMLリソースの要求など、当面はこれを「HTML要求」と呼びます）。
  • サーバーの応答：サーバーは要求を受信した後に要求を処理し、HTTP応答メッセージを送り返します

• HTTP / 1

  • TCP接続にはRTT（ラウンドトリップ時間、ラウンドトリップ時間）があり、リソースの各要求にはRTTが必要であるため、要求と応答が完了するたびに、TCP接続は切断されます。必要なすべてのリソースロードするものが多すぎて、Webサイトを開くのが遅くなります。

• HTTP / 1.X

  • TCPは永続的に接続できます。同じドメイン名でのすべてのリソース要求/対応する接続​​が完了するまでTCP接続は切断されないため、要求時間を節約できます。
  • HTTP1.xを使用すると、ヘッダーで伝送されるコンテンツが大きすぎるため、送信コストが増加し、モバイル端末でのユーザートラフィックが増加します。

• HTTP / 2

  • HTTP / 2は、テキスト形式ではなくバイナリ形式を使用します
  • HTTP / 2は完全に多重化されており、順序付けられておらず、ブロックされていません。並列処理を実現するために必要な接続は1つだけです。
  • ヘッダー圧縮を使用して、HTTP / 2はオーバーヘッドを削減します
  • HTTP / 2を使用すると、サーバーはクライアントキャッシュへの応答をアクティブに「プッシュ」できます。

• HTTPSとHTTPのいくつかの違い

  • HTTPSプロトコルでは、CAが証明書を申請する必要があります。通常、無料の証明書はほとんどなく、料金が必要です。
  • HTTPプロトコルはTCPで実行され、送信されるすべてのコンテンツはプレーンテキストであり、HTTPSはSSL / TLSで実行され、SSL / TLSはTCPで実行され、送信されるすべてのコンテンツは暗号化されます。
  • HTTPとHTTPSは完全に異なる接続方法を使用し、異なるポートを使用します。前者は80で、後者は443です。
  • HTTPSは、オペレーターのハイジャックを効果的に防止し、ハイジャック防止の大きな問題を解決できます。

クロスドメインソリューション

フルバージョン：（https://juejin.cn/post/6844903767226351623）

• 最初に3つの質問を説明します。

  • プロトコルとポートが原因のクロスドメインの問題である場合、「フロントエンド」は無力です。
  • クロスドメインの問題に関しては、「URLヘッダー」のみがそれらを識別するために使用されますが、ドメイン名に対応するIPアドレスが同じであるかどうかには基づいていません。「URLヘッダー」は「プロトコル、ドメイン名、ポートが一致する必要がある」と理解できます。
  • クロスドメインとは、リクエストを送信できない、リクエストを送信できる、サーバーがリクエストを受信して​​結果を正常に返すことができるという意味ではありませんが、結果はブラウザによって傍受されます。

• 同一生成元ポリシーの制限は次のとおりです。

  • Cookie、LocalStorage、IndexedDBなどのストレージコンテンツ。
  • DOMノード
  • AJAXリクエストが送信された後、結果はブラウザによってインターセプトされました

• ただし、リソースのクロスドメインロードを可能にする3つのタブがあります。

  • img src = XXX
  • リンクhref = XXX
  • スクリプトsrc = XXX

• 一般的なクロスドメインシナリオ

  • プロトコル、サブドメイン名、メインドメイン名、ポート番号のいずれかが異なる場合は、別のドメインとしてカウントされます。

• 解決

  • JSONP経由

    • JSONPの利点は、シンプルで互換性があり、主流のブラウザーでのクロスドメインデータアクセスの問題を解決するために使用できることです。欠点は、getメソッドのサポートのみに制限があり、安全でない場合はXSS攻撃を受ける可能性があることです。

  • CORS

    • CORSには、ブラウザとバックエンドの両方のサポートが必要です。IE 8および9は、XDomainRequestを介して実装する必要があります。

  • postMessage

    • postMessageは、HTML5 XMLHttpRequestレベル2のAPIであり、ドメイン間で操作できる数少ないウィンドウ属性の1つです。これを使用して、次の問題を解決できます。
      • ページと開いた新しいウィンドウ間のデータ転送
      • 複数のウィンドウ間を通過するメッセージ
      • ページとネストされたiframeメッセージング
      • 上記の3つのシナリオでのクロスドメインデータ転送

  • websocket

    • WebsocketはHTML5の永続的なプロトコルであり、ブラウザーとサーバー間の全二重通信を実装し、クロスドメインソリューションでもあります。WebSocketとHTTPはどちらもアプリケーション層プロトコルであり、どちらもTCPプロトコルに基づいています。

  • ノードミドルウェアエージェント

    • 同一生成元ポリシーはブラウザが従う必要のある標準であり、サーバーがサーバーに要求した場合、同一生成元ポリシーに従う必要はありません。プロキシサーバーは次の手順を実行する必要があります。
      • クライアントの要求を受け入れます。
      • リクエストをサーバーに転送します。
      • サーバーの応答データを取得します。
      • 応答をクライアントに転送します。

  • Nginxリバースプロキシ

    • 実装の原則はノードミドルウェアエージェントに似ており、リクエストを転送するためのトランジットnginxサーバーを構築する必要があります。

  • window.name + iframe

  • location.hash + iframe

  • document.domain + iframe

• 総括する

  • CORSはすべてのタイプのHTTPリクエストをサポートし、クロスドメインHTTPリクエストの基本的なソリューションです
  • JSONPはGETリクエストのみをサポートします。JSONPの利点は、古いブラウザをサポートし、CORSをサポートしていないWebサイトからデータをリクエストできることです。
  • それがノードミドルウェアプロキシであろうとnginxリバースプロキシであろうと、主な理由は、サーバーが同一生成元ポリシーによって制限されていないことです。
  • 日常業務でより多く使用されるクロスドメインソリューションは、corsとnginxリバースプロキシです

ブラウザがクロスドメインをブロックする必要があるのはなぜですか？

同一生成元ポリシー/ SOP（同一生成元ポリシー）は規則です。1995年にNetscapeによって導入されました。これは、ブラウザのコアで最も基本的なセキュリティ機能です。同一生成元ポリシーがないと、ブラウザはXSSに対して脆弱です。、CSFRおよびその他の攻撃。いわゆる相同性とは、同じ「プロトコル+ドメイン名+ポート」を指します。2つの異なるドメイン名が同じIPアドレスを指している場合でも、それらは相同ではありません。

xss攻撃を回避する方法

フルバージョン：（https://tech.meituan.com/2018/09/27/fe-security.html）

• テンプレートエンジンを使用して、テンプレートエンジンに付属のHTMLエスケープ機能を有効にします
• .addEventlistener（）イベントバインディングを介してJavaScriptでインラインイベントを回避する方が安全です。
• HTMLのスプライシングは避けてください。フロントエンドでスプライシングHTMLを使用するのは危険です。フレームワークで許可されている場合は、createElementやsetAttributeなどのメソッドを使用してください。または、Vue / Reactなどのより成熟したレンダリングフレームワークを使用します。
• 挿入位置がDOM属性、リンクなどの場合は、注意して注意する必要があります。
• CSP、入力長の構成、インターフェイスのセキュリティ対策、およびその他の方法を通じて、攻撃の難易度を高め、攻撃の影響を軽減します。
• XSS攻撃文字列と自動スキャンツールを使用して、潜在的なXSSの脆弱性を見つけることができます。

最初の画面時間を最適化する方法は？SSRの展開とは別に、他にどのようなソリューションがありますか？

• サーバー側のレンダリング

• 最初の画面コンテンツの静的キャッシュ（プリテンダースパプラグイン）

• 画像の遅延読み込み

• プレースホルダー画像を読み込むときに空白の画面を使用することは避けられません

配列ジャンプ

• 入力：[2,3,1,1,4]
• 出力：2
• 説明：最後の位置へのジャンプの最小数は2です。下付き文字0から下付き文字1の位置にジャンプし、1ステップスキップしてから、3ステップスキップして配列の最後の位置に到達します。

var jump = function (nums) {
    
    
	// 定义一个轮询方法，传入原始数组，当前下标，跳跃的步数统计。
	function one(num, start, step) {
    
    
		// 截取当前下标以及当前下标能够跳跃到的数组段落。
		let arr = num.slice(start, start + num[start] + 1)
		// 如果当前下标已经在最后了，返回步数。
		if (arr.length == 1) {
    
    
			return step
		}
		// 如果当前下标是0，那么返回无法跳跃。
		if (arr[0] === 0) {
    
    
			return false
		}
		// 如果当前下标能够一次性跳跃到原始数组末尾，返回步数+1。
		if (arr[0] + start >= num.length - 1) {
    
    
			return step + 1
		}
		// 定义最大值，一次跳跃了几个。
		let max = 0
		let jump = 0
		arr.forEach((item, index) => {
    
    
			if (item + index > max) {
    
    
				max = item + index
				jump = index
			}
		})
		// 如果一次跳跃了0个，返回无法跳跃。
		if (jump === 0) {
    
    
			return false
			// 否则，将跳跃后的结果继续传入方法中，步数+1。
		} else {
    
    
			return one(num, jump + start, step + 1)
		}
	}
	return one(nums, 0, 0)
}