Windows11 壁紙（全32種類）がダウンロード可能に【高画質 4K】
292,326 view
Cache-Controlとは、ブラウザーのキャッシュ動作を管理するHTTPヘッダーのことです。
Cacheとは、訪問した「ウェブページの情報」を一時的に保存する仕組みのことです。
1 2 3 | <IfModule mod_headers.c> Header always set Cache-Control "max-age=604800, public" </IfModule> |
1 2 3 4 | <IfModule mod_headers.c> Header always set Cache-Control "max-age=0, no-cache, no-store, must-revalidate" Header always set Pragma "no-cache" </IfModule> |
<meta>タグでも、ブラウザキャッシュの無効化が可能です。<head>~</head>タグ内へ記述します。
※しかしながら、キャッシュサーバのキャッシュを使用してしまう可能性が残ります。
1 2 | <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> |
Content-Security-Policy（CSP）レスポンスヘッダーとは、対応ブラウザの挙動をWebサイト管理者が制御できるようにするセキュリティの仕組みです。
CSPを記述することで、コンテンツ提供元や取得方法を制限し、意図しないコンテンツを読み込ませることを阻止することができます。
1 2 3 | <IfModule mod_headers.c> Header always set Content-Security-Policy "default-src * 'unsafe-eval' 'unsafe-inline' gap://ready file:; style-src 'self' 'unsafe-inline'; media-src *; img-src * 'self' filesystem: data: blob:;" </IfModule> |
アナリティクスなどのスクリプトや、画像の読み込み場所を一つ一つ許可するのが最適解です。
今回は「”default-src *」と記載し、デフォルトですべて許可します。
すべて許可しているのでグーグルアナリティクスや、jqueryの読み込みは問題なく動作します。
HTTP Strict Transport Security（HSTS）レスポンスヘッダーとは、HTTP の代わりHTTPSを用いて通信を行うよう、Webサイトからブラウザに伝達するためのセキュリティ機能です。
Strict Transport Security を有効化したい場合、追加します。
1 2 3 | <IfModule mod_headers.c> Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" </IfModule> |
X-Content-Type-Options レスポンスヘッダーとは、画像やテキストファイルをHTMLと判定してしまい、クロスサイトスクリプティングの発生による不具合を回避する記述です。こちらはIE対策です。
1 2 3 | <IfModule mod_headers.c> Header always set X-Content-Type-Options "nosniff" </IfModule> |
X-XSS-Protection レスポンスヘッダーとは、 IE、Chrome、Safariの機能で、反射型クロスサイトスクリプティング (XSS) 攻撃を検出したときに、ページの読み込みを停止するためのものです。
1 2 3 | <IfModule mod_headers.c> Header always set X-XSS-Protection "1; mode=block" </IfModule> |
これらの実装は現在（2021年6月23日）廃止されております。
制限が多く、一貫性もなく、多数のバグが含まれるので使用してはいけません。
Content-Security-Policyは、X-Content-Security-Policyでした。
Content-Security-Policyは、X-Webkit-CSPでした。
HTTPレスポンスヘッダーの確認方法は、ブラウザで確認する方法は下記３つあります。
右クリック「検証」を選択し、開発者ツールを開きます。
「Network」タブを選び、リクエストをみたいソースを選択します。
そして「Headers」を選ぶと、Request Headersを確認することができます。
Chromeには、HTTPヘッダー情報を表示させることができる拡張機能「Live HTTP Headers」があります。
右クリック「調査」を選択し、開発者ツールを開きます。
「ネットワーク」タブを選びます。リクエストをみたいソースを選択します。
そして「ヘッダー」を選ぶと、Request Headersを確認することができます。
Firefoxには、HTTPヘッダー情報を表示させることができる拡張機能「HTTP Header Live」があります。
視覚的に見やすくおすすめです。使い方も簡単でインストールし、アイコンをクリックするのみです。
curlコマンドを使用すると簡単に確認できます。Macではcurlコマンドを初期で使用できます。
ターミナルへ、下記を入力し、バージョン表示されれば使用可能です。
1 | curl --version |
バージョン表示されない際、インストールが必要です。
参考：curlをWindows10にインストールする
以下のコマンドを入力し、情報を取得します。
1 | curl --http1.1 --get -v サイトアドレス |
サイトアドレスの部分を確認したいURLに書き換えて実行すると表示されます。
1 | curl --http1.1 --get -v https://sd-webworks.com/ |
一応記述しておくレベルの場合、下記のコードをコピペでOKです。
1 2 3 4 5 6 7 8 | <IfModule mod_headers.c> Header always set Cache-Control "max-age=0, no-cache, no-store, must-revalidate" Header always set Pragma "no-cache" Header always set Content-Security-Policy "default-src * 'unsafe-eval' 'unsafe-inline' gap://ready file:; style-src 'self' 'unsafe-inline'; media-src *; img-src * 'self' filesystem: data: blob:;" Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" Header always set X-Content-Type-Options "nosniff" Header always set X-XSS-Protection "1; mode=block" </IfModule> |
SD WEBWORKS代表。システム開発会社でコーディングや WordPressのカスタマイズを学び、2018年フリーランスに。200サイト以上の制作実績。WEB制作に関するお悩みがある方は、お気軽にご相談ください。
ホームページ : https://sd-webworks.com/