PHP 整合 jQuery Ajax 跨域請求：JSONP 實作與安全注意事項

前端呼叫（JSONP）

function getData() {
    $.getJSON("https://api.example.com/?callback=?", {
        m: "data",        // 模組
        act: "getdata",   // 動作
        name: "問題兒童"  // 參數
    }, function(data) {
        console.log('回傳資料：', data);
        // 處理 data
    });
}

callback=? 會由 jQuery 自動產生隨機函數名（如 jQuery123456789），伺服器需回傳 jQuery123456789({"key":"value"})。

後端入口：路由分發

<?php
// index.php
$uri = $_SERVER['REQUEST_URI'];
$m = getModule($uri);
$file = __DIR__ . "/app/{$m}.php";
define('IS_INDEX', true); // 防止直接存取 app/
require $file;

function getModule($url) {
    $parts = explode('m=', $url);
    if (!isset($parts[1])) return 'index';
    return explode('&', $parts[1])[0] ?: 'index';
}

業務模組：輸出 JSONP 格式

<?php
// app/data.php
$act = $_GET['act'] ?? '';
if ($act === 'getdata') {
    $name = "我的名字叫：" . ($_REQUEST['name'] ?? '');
    $callback = $_REQUEST['callback'] ?? '';
    if ($callback) {
        // 防止 XSS：callback 僅允許字母數字底線
        if (!preg_match('/^[a-zA-Z0-9_]+$/', $callback)) exit('Invalid callback');
        header('Content-Type: application/javascript; charset=utf-8');
        echo $callback . '(' . json_encode($name, JSON_UNESCAPED_UNICODE) . ')';
    } else {
        header('Content-Type: application/json; charset=utf-8');
        echo json_encode($name, JSON_UNESCAPED_UNICODE);
    }
}

現代替代方案：CORS（跨域資源共享）

JSONP 僅支援 GET、有 XSS 風險、無法攜帶 Cookie/認證頭。現代專案請改用 CORS：

<?php
// 允許特定來源
header('Access-Control-Allow-Origin: https://www.myapp.com');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Credentials: true'); // 允許攜帶 Cookie

// 預檢請求快速回應
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit;
}

前端 $.ajax({xhrFields: {withCredentials: true}, ...}) 即可跨域攜帶 Cookie。

安全檢查清單

1. 驗證 callback 參數：嚴格正則 /^[a-zA-Z0-9_]+$/，拒絕任意字串。
2. 輸出編碼：json_encode(..., JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT)。
3. 限制 HTTP Method：JSONP 僅允許 GET，拒絕 POST。
4. 速率限制：依 IP/Token 限制呼叫頻率。
5. 敏感資料不走 JSONP：改用 CORS + Bearer Token/OAuth2。