HTTPヘッダのパワーと前に知らなかった4例

11823 ワード
computerscience webdev javascript security テキストリンク
このポストはもともと投稿されましたhere

こんにちはHTTP (ヘッダ)
ウェブのほとんどすべてはHTTPで送られます、そして、非開発者さえインターネットをキーワードとして使うとき、それを見ました
内部のURLまたはリンク.
HTTPはハイパーテキスト転送プロトコルを表し、ブラウザとサーバー間のハイパーテキストを転送する機能を提供します.
これは、ほぼWebの発明以来、常に進化しているとされている偉大な技術ですoffering more and more great features

何Http headers ?
開発者として、おそらくあなたは、Corsのポリシーについて聞いた瞬間にHTTPヘッダーを聞いた.
これはあなたがウェブサイトの開発について聞いたことがある問題です.
しかし、HTTPヘッダーと正確には何を使用している他の方法ですか?
まず、彼らが何をするか、どのようにそれらを使用することができます.
ブラウザがリソースを要求すると、例えば、このブログのページなど、サーバに要求を要求します.
このリクエストは次のようになります.
fetch("https://www.lorenzweiss.de/race_conditions_explained/", {
  credentials: "include",
  headers: {
    accept:
      "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3",
    "accept-language": "en,en-US;q=0.9,de-DE;q=0.8,de;q=0.7",
    "cache-control": "max-age=0",
    "sec-fetch-mode": "navigate",
    "sec-fetch-site": "same-origin",
    "sec-fetch-user": "?1",
    "upgrade-insecure-requests": "1",
  },
  referrerPolicy: "no-referrer-when-downgrade",
  body: null,
  method: "GET",
  mode: "cors",
});
それで、あなたは、リソースのURLまたは位置、リクエストについての若干の情報とリクエストに関する若干の情報で多くのヘッダーを見ることができます.
これはあなたのブラウザがどのようにリクエストに関するサーバにいくつかの情報を伝えるかです.例えば、どのようなデータ型を受け入れるか、あるいは
クライアントがキャッシュを処理する方法.
リクエストを送信した後、サーバは応答し、応答にヘッダを設定します.
:authority: www.lorenzweiss.de
:method: GET
:path: /race_conditions_explained/
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
accept-encoding: gzip, deflate, br
accept-language: en,en-US;q=0.9,de-DE;q=0.8,de;q=0.7
cache-control: max-age=0
cookie: _ga=GA1.2.1173972759.1584812492; _gid=GA1.2.2076192721.1594044231
sec-fetch-mode: navigate
sec-fetch-site: same-origin
sec-fetch-user: ?1
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36
また、サーバーがリソースをどうするかをブラウザに伝えたいという情報もあります
クッキーがある場合は、どのエンコーディングを使用したかを判断する必要があります
基本的に、HTTPコンテキストでは、ブラウザとサーバの通信のためのヘッダーが単純なものを広げるのに使用されます
リソースの要求.あなたは、それがオンラインストアからオーダをするパッケージの上に加えられる紙のシートとしてそれを見ることができました.
あなたが注文したコンテキストとリソースについての詳細情報を与えます.
ヘッダーのほとんどは、あなたが考える必要がないかなり良いデフォルトを持っていますが、いくつかのヘッダーがあります
非常に重要な、Corsのヘッダーのように取得することができます.しかし、非常に有用なので、あなたが聞いたことがないほど多くのヘッダーがあります
そして、使用方法を知って良い.

あなたが知らないヘッダー
心配しないでください、この記事はCorsヘッダーに対処しません.以下のHTTPヘッダはめったに使われないものですが
本当に強力であり、大幅にサーバーとブラウザの間の通信を改善するのに役立つ.
それで、それを掘りましょう.ここではいくつかのヘッダーを設定することができますが非常に有用で実用的です.

If-Range

何と理由?
あなたがビデオ、画像などのような大きなリソースをダウンロードし始めると、接続問題のために間に停止してください.
With If-Range 表示が変更されていない場合は、範囲内で要求された部分を送信するようにサーバに通知することができます.
これは、欠けていただけではなく、全体の部分を意味します.
モバイルデバイスと同様に大きなリソースとしばしば悪い接続を扱うとき、これは非常に役に立ちます.
接続が中断されてもリソースは部品でダウンロードできるので.

使い方
これは、リソースが最後に変更された日付、またはETag , リソースが無効になったかどうかの鍵です
If-Range: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT
If-Range: <etag>

例
If-Range: Wed, 21 Oct 2015 07:28:00 GMT

Vary Vary ウェブまたはHTTPがウェブページのためだけでなくいろいろなもののために使われた時から来ます.
それは多くの異なる形式で情報を交換するためにHTTPを使用するという考えに基づいています.
どうやってやるの?さて、それはどのヘッダーの情報を見つけるには、どのように情報を提示するサーバーに指示します.
最近では、さまざまな顧客のためのさまざまなリソースがある場合は、本当に役立つことができます
モバイル、タブレットまたはデスクトップ.
同じリソースの3つの異なる画像を想像して、サーバーには、デバイスに応じて格納されます.
それから、あなたは単にVary ヘッダーは、デバイスをチェックし、送信する画像サイズを決定するサーバーを指示します.

例
デバイス依存のイメージを使用した例では、単に「ユーザーエージェント」を渡してサーバに伝えることができます
デバイス情報のユーザーエージェントをチェックする必要があります.
Vary: User-Agent

使い方
Vary: <header>
ただヘッダーを入力してください、サーバはどのリソースを送るか決める前にチェックしなければなりません.

Content-Disposition
サーバーへのリクエストの例に戻ると、例えば、このウェブサイトをロードするには、ブラウザには明らかです.
それは答えのリソースを表示する必要があります.
しかし、サーバーがブラウザを自動的にユーザーのコンピュータにダウンロードするリソースを送信する場合もあります.
画像やPDFなど.
サーバーはブラウザがブラウザをどのように接続されたリソースを介して行う必要がありますContent Disposition ヘッダ.

例
を定義するContent-disposition to attachment ブラウザーは、これがちょうど代わりにダウンロードするリソースであるということを知っています
ショー.
Content-Disposition: attachment; filename="data.pdf"

使い方
ヘッダーを定義できますinline or attachment , インラインは常にデフォルトです.
Content-Disposition: <inline | attachment>

Feature-Policy

This is a fairly new header and therefore only supported by modern browsers (sorry to all IE users). However
I want to mention this anyway because I think it can be really helpful for some use cases.

Basically, the feature-policy tells the browser which features or apis the browser should provide to the document and its
iframe `を使用する.
例えば、それはカメラやマイクのような敏感なAPIを許可するように、このウェブサイト内のすべてのスクリプトやiframeなどを禁止することができます.

使い方

Feature-Policy: <directive> <allowlist>
The directive は機能の名前です.あなたはフルを見ることができますlist of features here
The allowlist ディレクティブを使用できる起源を定義します.

例
我々のウェブサイトがマイクもカメラも使わないことを望むと仮定してください.このヘッダを
ドキュメントまたは含まれるiframeはこれらの関数にアクセスできません.
Feature-Policy: microphone 'none'; camera 'none'

ヘッダ:
言及する価値があるいくつかのより多くのヘッダーは、ここにあります:
  • Upgrade-Insecure-Requests
  • Age
  • Trailer
  • Location

    • 結論
    HTTPSのヘッダーも素晴らしいと非常に便利です!しかし、時々、彼らは全く複雑でありえます、そして、どんなヘッダーが利用可能であるか、そして、彼らがもたらすどんな利点の概要を得るのは本当に難しいです.
    また、特にフロントエンドでウェブサイトを開発するとき、あなたはあまりにしばしば彼らと接触しません.
    しかし、私は、これが若干の可能性を逃したと思います.HTTPヘッダはサーバとサーバの間の通信を表します
    顧客ははるかに良い、そして我々はすべてのコミュニケーションは良い関係の鍵です知っている.
    私は、あなたのためにHTTPヘッダーの暗闇の上で若干の光を流すことができたことを願っています.私は良い、役に立つヘッダーを逃した場合.
    どうか私にメールを送ったり、どんな風にでも私に連絡してください.
    ブロードキャストの動的登録プロセス
    Android呼び出しシステムカメラ撮影及び切断