[test4.html(javascript)]
// まず getkey.php からキーを取得
fetch("http://localhost/img/getkey.php")
.then(res => res.json())
.then(data => {
	console.log("data.key:"+data.key);//getkey.phpから受け取った「password」が返ります
	// 取得したキーをそのまま image.php に渡す
	const url = "http://localhost/img/image.php?file=post.png&key=" + data.key;

	return fetch(url);
})
.then(res => {
	if (!res.ok) throw new Error("アクセス拒否");
	return res.blob();
})
.then(blob => {
	document.getElementById("img").src = URL.createObjectURL(blob);
})
.catch(err => console.error("画像取得失敗:", err));
[.htaccess]
RewriteEngine On
 
# 自分のサイトからの参照のみ許可
# ex.)
# RewriteCond %{HTTP_REFERER} ^https://test\.co\.jp [NC]
RewriteCond %{HTTP_REFERER} ^http://localhost [NC]
RewriteRule ^.*\.(jpe?g|png|gif|bmp)$ - [L]
 
# それ以外（空リファラ含む）は拒否
RewriteRule ^.*\.(jpe?g|png|gif|bmp)$ - [F,L]
 
[getkey.php]
header("Access-Control-Allow-Origin: http://localhost");//ex.)https://test.co.jp
header("Access-Control-Allow-Credentials: true");
 
// 固定キーを返すだけ
header("Content-Type: application/json; charset=utf-8");
echo json_encode(["key" => "password"]);
 
[image.php]
// --- CORS 設定 ---
header("Access-Control-Allow-Origin: http://localhost");//ex.)https://test.co.jp
header("Access-Control-Allow-Credentials: true");
 
// --- アクセス元チェック ---
$origin  = $_SERVER['HTTP_ORIGIN']  ?? '';
$referer = $_SERVER['HTTP_REFERER'] ?? '';
 
// --- ここから先は既存のキー判定や画像返却処理 ---
$valid_key = "password"; // 固定キーやトークン判定
$key  = $_GET['key'] ?? '';
$file = basename($_GET['file'] ?? '');
 
if ($key !== $valid_key) {
	header("HTTP/1.1 403 Forbidden");
	exit("Forbidden");
}
 
$path = __DIR__ . "/" . $file;
if (!file_exists($path)) {
	header("HTTP/1.1 404 Not Found");
	exit("Not Found");
}
 
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime  = finfo_file($finfo, $path);
finfo_close($finfo);
 
header("Content-Type: $mime");
readfile($path);
exit;

[test4.html(javascript)]
// First, get the key from getkey.php
fetch(“http://localhost/img/getkey.php”)
.then(res => res.json())
.then(data => {
    console.log(“data.key:”+data.key); // Returns the “password” received from getkey.php
	// Pass the retrieved key directly to image.php
    const url = “http://localhost/img/image.php?file=post.png&key=” + data.key;

    return fetch(url);
})
.then(res => {
    if (!res.ok) throw new Error(“Access denied”);
	return res.blob();
})
.then(blob => {
    document.getElementById(“img”).src = URL.createObjectURL(blob);
})
.catch(err => console.error(“Image retrieval failed:”, err));
[.htaccess]
RewriteEngine On
 
# Only allow access from your own site
# ex.)
# RewriteCond %{HTTP_REFERER} ^https://test\.co\.jp [NC]
RewriteCond %{HTTP_REFERER} ^http://localhost [NC]
RewriteRule ^.*\.(jpe?g|png|gif|bmp)$ - [L]
 
# Deny all others (including empty referrers)
RewriteRule ^.*\.(jpe?g|png|gif|bmp)$ - [F,L]
 
[getkey.php]
header(“Access-Control-Allow-Origin: http://localhost”);//ex.)https://test.co.jp
header(“Access-Control-Allow-Credentials: true”);
 
// Only returns the fixed key
header(“Content-Type: application/json; charset=utf-8”);
echo json_encode([“key” => “password”]);
 
[image.php]
// --- CORS Configuration ---
header(“Access-Control-Allow-Origin: http://localhost”);//ex.)https://test.co.jp
header(“Access-Control-Allow-Credentials: true”);
 
// --- Origin check ---
$origin  = $_SERVER[‘HTTP_ORIGIN’]  ?? ‘’;
$referer = $_SERVER[‘HTTP_REFERER’] ?? ‘’;
 
// --- Existing key validation and image return logic starts here ---
$valid_key = “password”; // Fixed key or token check
$key  = $_GET[‘key’] ?? ‘’;
$file = basename($_GET[‘file’] ?? ‘’);
 
if ($key !== $valid_key) {
    header(“HTTP/1.1 403 Forbidden”);
    exit(“Forbidden”);
}
 
$path = __DIR__ . “/” . $file;
if (!file_exists($path)) {
    header(“HTTP/1.1 404 Not Found”);
	exit(“Not Found”);
}
 
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime  = finfo_file($finfo, $path);
finfo_close($finfo);
 
header(“Content-Type: $mime”);
readfile($path);
exit;