Codeigniter 4独立JS文件中AJAX请求的CSRF Token获取咨询

方案1：通过隐藏表单元素传递CSRF信息 #

在引入独立JS的PHP页面中，添加隐藏input存储CSRF的名称和哈希值：

<!-- 在PHP页面的HTML结构中插入 -->
<input type="hidden" id="csrf-token" name="<?= csrf_token() ?>" value="<?= csrf_hash() ?>">

然后在独立JS文件中获取这些值并带入AJAX请求：

// 读取隐藏元素的CSRF信息
const csrfElement = document.getElementById('csrf-token');
const csrfName = csrfElement.name;
const csrfHash = csrfElement.value;

// 发起AJAX请求
$.ajax({
  url: '/your/api/endpoint',
  method: 'POST',
  data: {
    [csrfName]: csrfHash,
    // 你的其他请求参数
    username: 'test',
    password: '123456'
  },
  success: function(response) {
    // 处理响应逻辑
  }
});

方案2：通过全局window变量传递CSRF信息 #

在引入独立JS之前，在PHP页面中定义全局JS变量：

<!-- 放在独立JS引入语句之前 -->
<script>
window.CSRF_CONFIG = {
  tokenName: '<?= csrf_token() ?>',
  tokenHash: '<?= csrf_hash() ?>'
};
</script>
<script src="/path/to/your/script.js"></script>

之后在独立JS中直接调用全局变量：

const { tokenName: csrfName, tokenHash: csrfHash } = window.CSRF_CONFIG;

// AJAX请求中携带参数
$.ajax({
  url: '/your/api/endpoint',
  method: 'POST',
  data: {
    [csrfName]: csrfHash,
    // 其他业务参数
  }
});

方案3：读取CI4自动设置的CSRF Cookie（推荐） #

CodeIgniter 4默认会将CSRF哈希值存储在Cookie中（默认Cookie名为csrf_cookie，可在App/Config/Security.php中修改csrf_cookie_name配置）。你可以直接用JS读取Cookie，再通过请求头传递验证：

先写一个JS函数读取Cookie：

function getCookie(cookieName) {
  const cookieStr = `; ${document.cookie}`;
  const cookieParts = cookieStr.split(`; ${cookieName}=`);
  if (cookieParts.length === 2) {
    return cookieParts.pop().split(';').shift();
  }
  return null;
}

然后在AJAX请求中设置请求头：

const csrfHash = getCookie('csrf_cookie'); // 对应你的CSRF Cookie名称

$.ajax({
  url: '/your/api/endpoint',
  method: 'POST',
  headers: {
    'X-CSRF-TOKEN': csrfHash // CI4默认识别这个请求头，可在Security.php中修改csrf_header_name配置
  },
  data: {
    // 你的请求参数
  }
});

关键说明 #

• JS/jQuery无法自行生成有效的CSRF Token，因为Token是服务器端生成并验证的，必须从服务器获取。
• 如果使用方案3，确保你的Cookie读取逻辑正确，且CI4的csrf_cookie_name配置与JS中使用的名称一致。

内容的提问来源于stack exchange，提问作者xanabobana