Webプロキシソースの追加

プレミアム機能

Webプロキシソースは現在、imgixのプレミアムプランをご利用のお客様向けに提供されています。この機能に興味がある場合は、営業チームにお問い合わせくださいして、この機能に関する詳細情報を入手してください。

Webプロキシソースを使用すると、アクセス可能なURLを通じてアドレス指定できる任意のアセットに接続できます。元のアセットオリジン画像の完全なURLをimgixリクエストのパスに提供します。

Webプロキシソースの設定

imgixダッシュボードのソースページに移動し、新規ソースボタンをクリックします。
ソースタイプドロップダウンからWebプロキシを選択します。Webプロキシソースタイプにはパラメータはありません。
アセットのベースURLとして使用するサブドメインの名前を入力します。

注意: 選択するサブドメイン名はソースに固有であり、再利用することはできません。カスタムドメイン（特にカスタムドメイン）を設定する場合は、今後使用する予定の名前を選択してください。
既存のソースを編集していて動画APIが有効になっている場合、imgixビデオサブドメインフィールドが表示されます。このフィールドはimgixイメージサブドメインから値を自動的に継承し、イメージサブドメインを変更しない限り変更することはできません。

保存ボタンをクリックします。ソースはデプロイキューに入り、ソースの詳細ページにリダイレクトされます。

セキュリティ

他のソースタイプではオプションであるURL署名が必要ですが、Webプロキシソースでは必須です（上記のスクリーンショットでセキュアURLボックスがチェックされ、編集不可であることに注意してください）。imgix URLを安全に署名する方法については、アセットの保護ガイドをご覧ください。

オリジンへのリクエスト認証の設定

オプションとして、imgixがオリジンからアセットを安全に取得できるように認証を設定することができます。使用できるオプションには、基本認証、カスタムヘッダー認証、およびリクエストごとの署名があります。

設定後、imgixはオリジンへのリクエストに追加のヘッダーを含めます。これらのヘッダー値は、サービスからのリクエストを認証するために使用され、ダッシュボードで設定できます。

Origin Authentication Headers

Webフォルダソースでオリジン認証が設定されている場合の例として送信されるヘッダーは次のとおりです:

{
  "headers": {
    "Authorization": "Basic <base_64_encoded_username_password>",
    "X-Imgix-Signature": "<your_signature>",
    "X-Imgix-Signature-Host": "<origin_host>",
    "X-Imgix-Signature-Request-Id": "<request_id>",
    "X-Imgix-Signature-Timestamp": "<timestamp>"
  }
}

Basic Auth - Username: 基本認証用のユーザー名。コロン記号(:)やRFC 5234規格に記載されている制御文字を含むことはできません。
Basic Auth - Password: 基本認証用のパスワード。コロン記号(:)や制御文字を含むことはできません。
Request Handshake: 最大256文字を受け入れます。カスタムヘッダー認証を参照してください。
Request Signing Key: 最大32文字のラテン1文字を受け入れる文字列です。bashコマンドを使用して生成することができます。例: openssl rand -base64 24。サーバーに送信されるヘッダーとして署名を生成するために使用されます。リクエストごとの署名を参照してください。

基本認証

基本認証は、imgixサービスからオリジンへのリクエストを認証する最も簡単な方法です。ユーザー名を指定することにより、imgixはオリジンへのリクエストに基本認証ヘッダーを含めます。リクエストの例は次のとおりです:

"Authorization": "Basic dXNlcm5hbWVfZXhhbXBsZTpwYXNzd29yZF9leGFtcGxl"

例では、dXNlcm5hbWVfZXhhbXBsZTpwYXNzd29yZF9leGFtcGxlはBase64でデコードされるとusername_example:password_exampleになります。

ユーザー名とパスワードの値にはコロンを含めることはできず、基本認証ヘッダーでユーザー名とパスワードを区切るためにコロンが予約されています。また、ユーザー名とパスワードには制御文字を含めることはできません。

カスタムヘッダー値/ハンドシェイクトークン

別の認証方法として、ソース設定にrequest_handshake値を設定できます。request_handshake値はX-Imgix-Origin-Secretというヘッダーとしてオリジンに送信され、最大256文字の文字列を受け入れます。これを使用して、リクエストのオリジンにこのヘッダー/値が存在するかどうかを確認することにより、カスタム認証を設定できます。

このヘッダー値でオリジンに送信されるリクエストは次のようになります:

"X-Imgix-Origin-Secret": "custom_origin_secret_value"

リクエストごとの署名

さらに安全な方法としてリクエストごとの署名があります。これを使用すると、request_signing_keyを使用してオリジンへのリクエストを認証できます。これは最も安全な方法ですが、資格情報を復号化して認証するためにimgixの外部で追加の設定が必要です。

request_signing_key値は32文字のラテン1文字を受け入れます。

これにより、秘密の32文字の値が取得され、imgixが送信するリクエストに対してHMAC-SHA256ダイジェスト署名が生成され、オリジンで認証を確認するために使用されます。

設定されると、imgixはオリジンへのリクエストに以下のヘッダーを含めます:

X-Imgix-Signature-Timestamp: Unixエポック秒
X-Imgix-Signature-Request-Id: imgixが生成するリクエストごとのID
X-Imgix-Signature: バージョンタグ（v1）に続いて、シークレットキーを使用して署名されたメッセージ<RequestId>.<Timestamp>.<host>.<url path>のHMAC-SHA256ダイジェスト（すべて大文字の16進数値）

imgixから送信されるリクエストの例は次のとおりです:

"X-Imgix-Signature": "v1,92b7abfb7adc9290d1f1f64d91c11a27e35126ed8c20d1cf5a45f3e8c9fc03f6",
"X-Imgix-Signature-Host": "www.examplesite.com",
"X-Imgix-Signature-Request-Id": "a3c1f07cd7f9dc17fe9352dd391aa052f90ba51df95231f09fadc760b8457564",
"X-Imgix-Signature-Timestamp": "1709332618"

次に、<requestid>.<timestamp>.<host>.<url path> のメッセージのHMAC-SHA256ダイジェストを、設定している秘密鍵で生成することで、リクエストがimgixから来ていることを確認できます。以下は、Node.jsのcryptoモジュールを使用して、上記のimgixヘッダーと組み合わせた例です:

const crypto = require("crypto")
 
var imgix_headers = {
  "X-Imgix-Signature":
    "v1,92b7abfb7adc9290d1f1f64d91c11a27e35126ed8c20d1cf5a45f3e8c9fc03f6",
  "X-Imgix-Signature-Host": "www.examplesite.com",
  "X-Imgix-Signature-Request-Id":
    "a3c1f07cd7f9dc17fe9352dd391aa052f90ba51df95231f09fadc760b8457564",
  "X-Imgix-Signature-Timestamp": "1709332618",
  "url-path": "/example_url.png",
}
 
// your secret key
var secret = "abcd1234"
 
// Create HMAC using SHA256 algorithm
const hmac = crypto
  .createHmac("sha256", secret)
  .update(
    imgix_headers["X-Imgix-Signature-Request-Id"] +
      "." +
      imgix_headers["X-Imgix-Signature-Timestamp"] +
      "." +
      imgix_headers["X-Imgix-Signature-Host"] +
      "." +
      imgix_headers["url-path"],
  )
 
// Get the HMAC in hexadecimal format
const hmacDigest = hmac.digest("hex")
 
// compare the rqeuest
if ("v1," + hmacDigest === imgix_headers["X-Imgix-Signature"]) {
  console.log("Request is from imgix")
} else {
  console.log("Request is not from imgix")
}

オリジンへのリクエスト認証の設定

カスタムドメイン、デフォルト、キャッシュTTLオプションの設定に関する情報は、アドバンスドソース設定を参照してください。

詳細設定画像の保護