layout.skip_to_main_content
すべてのコレクション公開アドオン
カスタムヘッダーを追加する
カスタムヘッダーを追加する

STUDIOでカスタムヘッダーを追加して、セキュリティ強化などを行うことができます。カスタムヘッダーの契約、設定方法など解説します。

Morota avatar
対応者:Morota
一週間前以上前にアップデートされました

対象プラン:Businessプラン以上


この機能は高度なため、記事で紹介する内容以外の設定フォローはチャットサポートでは対応しておりません。設定サポートが必要な場合は、Enterpriseプランのご利用をご検討ください。

カスタムヘッダーとは

カスタムヘッダーは、Webサイトの用途に応じて追加いただけるアドオン(拡張機能)です。Businessプラン以上のプロジェクトに別途ご契約いただくことで利用できます。

公開サイトにセキュリティの追加レイヤーを追加し、クロスサイトスクリプティング攻撃、iframe 埋め込み、その他のドメインレベルのセキュリティ問題などのアクティビティを防ぐことができます。

サポートしているヘッダーの種類

STUDIOでは現在以下のヘッダーをサポートしており、カスタムヘッダーには最大10件登録可能です。

  • x-xss-protection

  • x-content-type-options

  • x-frame-options

  • referrer-policy

  • x-permitted-cross-domain-policies

  • timing-allow-origin

  • content-security-policy

  • feature-policy

  • expect-ct

  • strict-transport-security

これらのヘッダーの詳細、構文、ブラウザの互換性については、HTTP ヘッダー - HTTP | MDN Web Docs を参照してください。

料金プランとお支払い

カスタムヘッダーは、プロジェクトにプランとは別に追加契約いただき利用できます。ご利用料金は月額19,800円(税込)となり、月額契約です。

お支払いサイクルなどについては、アドオンの概要とお支払いについて をご覧ください。

カスタムヘッダーの設定方法

Tips:お支払いの確定、ヘッダーの追加・設定はオーナー権限以上でのみ行えます。

1. ダッシュボードの [プラン&お支払い] を開く

カスタムヘッダーを追加したいプロジェクトの [プラン&お支払い] を開きます。

2. カスタムヘッダーアドオンをプロジェクトに追加する

カスタムヘッダーの [追加する] をクリックします。

スクリーンショット;カスタムヘッダーアドオンを追加する様子。

支払い確認画面が表示されるので、アドオン請求金額、注意事項を確認の上、 [お支払いを確定する] をクリックします。

スクリーンショット;カスタムヘッダーアドオンを契約する様子。

3. カスタムヘッダーを設定する

注意:サイト公開中の場合、追加すると即座に公開サイトへ変更が反映されます。

プロジェクトダッシュボードの [ホーム] を開き、カスタムヘッダーの[ヘッダーを追加] をクリックします。

スクリーンショット;カスタムヘッダーを追加する様子。

[KEY] から追加したいヘッダー詳細を選択します。[VALUE] に必要な情報を入力し、[追加] をクリックします。

スクリーンショット;カスタムヘッダーを追加する様子。

カスタムヘッダーの削除方法

1. ダッシュボードの [ホーム] を開く

カスタムヘッダーを追加したプロジェクトの [ホーム] を開きます。

2. 削除ボタンをクリックする

削除対象のカスタムヘッダーの [×] をクリックします。削除内容を確認の上、[ヘッダーを削除] をクリックします。

スクリーンショット;カスタムヘッダーアドオンを停止する削除する様子。

カスタムヘッダーアドオンの停止方法

Tips:設定中の内容はアドオンの契約終了日を迎えると削除されます。

1. ダッシュボードの [プラン&お支払い] を開く

カスタムヘッダーアドオンの利用を停止したいプロジェクトの [プラン&お支払い] を開きます。

2. カスタムヘッダーアドオンを停止する

カスタムヘッダーの [停止する] をクリックし、確認画面の内容をご確認の上、[停止する] をクリックします。

スクリーンショット;カスタムヘッダーアドオンを停止する様子。

こちらの回答で解決しましたか?