PHP 隱性調用技巧：透過 JavaScript 標籤執行後端邏輯

核心概念

利用瀏覽器會自動執行 <script src="...> 返回的 JavaScript 代碼特性，讓 PHP 腳本輸出 JS 代碼而非 HTML，實現「隱性」的後端邏輯執行與資料回傳。常用於跨域計數器、廣告追蹤、第三方嵌入式服務。

完整實作

前端嵌入頁面

<html>
<head><title>計數器展示頁</title></head>
<body>
<h1>網站造訪次數：<span id="counter">載入中...</span></h1>

<!-- 隱性調用 PHP 計數器 -->
<script src="counter.php"></script>
</body>
</html>

counter.php 後端邏輯

<?php
$file = "count.txt";

// 1. 讀取現有計數
$fp = fopen($file, "r");
$count = fread($fp, filesize($file));
fclose($fp);

// 2. 遞增
$count++;

// 3. 寫回
$fp = fopen($file, "w");
fwrite($fp, $count);
fclose($fp);

// 4. 輸出 JavaScript 代碼更新頁面
// 使用 document.write 直接寫入 DOM (舊式但相容性佳)
// 現代建議：document.getElementById('counter').textContent = $count;
echo "document.getElementById('counter').textContent = '$count';";

// 替代寫法：回呼函式模式 (支援多實例、非同步)
// echo "window.counterCallback($count);";
?>

進階模式：JSONP 跨域資料 API

<?php
// api.php - 支援 callback 參數的 JSONP 端點
header('Content-Type: application/javascript; charset=utf-8');

$data = [
    'timestamp' => time(),
    'visits' => rand(1000, 9999),
    'status' => 'ok'
];

$callback = $_GET['callback'] ?? 'callback';
// 安全：僅允許字母數字底線
if (!preg_match('/^[a-zA-Z0-9_]+$/', $callback)) {
    $callback = 'callback';
}

echo "$callback(" . json_encode($data) . ");";
?>

<script>
function handleData(data) {
    console.log('API 回傳:', data);
    document.getElementById('visits').textContent = data.visits;
}
</script>
<script src="api.php?callback=handleData"></script>

優缺點分析

現代替代方案

1. Fetch + CORS (標準做法)

// PHP 端
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($data);

// 前端
fetch('api.php')
  .then(r => r.json())
  .then(data => updateUI(data))
  .catch(err => console.error(err));

2. 圖片信標

// track.php
header('Content-Type: image/gif');
header('Content-Length: 43'); // 1x1 透明 GIF
echo base64_decode('R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
// 記錄 $_SERVER['HTTP_REFERER'], $_GET 等資訊

<img src="track.php?event=pageview&ref=homepage" width="1" height="1" alt="" />

3. navigator.sendBeacon (頁面卸載時可靠發送)

window.addEventListener('beforeunload', () => {
    navigator.sendBeacon('/analytics.php', JSON.stringify({page: location.pathname}));
});

安全加固清單 (若必須使用 Script 標籤模式)

• ✅ 驗證 callback 參數格式 (僅字母數字底線)
• ✅ 設定 Content-Type: application/javascript
• ✅ 實施速率限制防濫用
• ✅ 輸出內容編碼防 XSS
• ✅ 考慮 Subresource Integrity (SRI) 固定腳本雜湊
• ✅ 避免輸出敏感資料 (Session ID、CSRF Token 等)

隱性調用是早期 Web 開發的經典技巧，現代專案應優先採用 CORS + Fetch/Beacon 架構，僅在相容舊系統或極簡嵌入場景下使用。