无form标签的单选按钮跳转场景是否需CSRF防护及实现方案

现有页面包含多个单选输入框和按钮，点击按钮时通过JavaScript把选中单选框的值拼进window.location.href实现跳转，页面未使用form标签。请问这种场景需要做CSRF防护吗？如果需要，该怎么实现？

页面代码 #

HTML #

<div>
    <div class="component-content">
    <div class="component-row">             
    <div class="listbox">
    <input type="radio" id="91820000" value="1" name="user-programs" class="listbox__input" onclick="ProgramSelection.selectRadio()">
    <label for="1" class="listbox__input__label">
                            Program 1                               </label>
    <input type="radio" id="2" value="2" name="user-programs" class="listbox__input" onclick="ProgramSelection.selectRadio()">
    <label for="2" class="listbox__input__label">
                           Program 2                                </label>
    <input type="radio" id="3" value="3" name="user-programs" class="listbox__input" onclick="ProgramSelection.selectRadio()">
    <label for="3" class="listbox__input__label">
                            Program 3 
    </label>
    <input type="radio" id="4" value="4" name="user-programs" class="listbox__input" onclick="ProgramSelection.selectRadio()" checked="checked">
    <label for="4" class="listbox__input__label">
                           Program 4                  </label>
    <input type="radio" id="5" value="5" name="user-programs" class="listbox__input" onclick="ProgramSelection.selectRadio()">
    <label for="5" class="listbox__input__label">
                         Program 5                             
    </label>
    </div>
    </div>   
    <button class="selection-button" type="button" onclick="ProgramSelection.submitSelection()">
                Select</button>
    </div>
</div>

JavaScript #

ProgramSelection.submitSelection = function() {
    var redirectPath = document.querySelector('#redirect-url');
    var account = document.querySelector('input[name="user-programs"]:checked');
 
    var redirectUrl = redirectPath.value + "/login?program_id=" + account.value;
    window.location.href = redirectUrl;
}

回答 #

是否需要CSRF防护？ #

需要。虽然是通过window.location.href发起的GET请求，但如果program_id参数会影响用户后续的登录关联（比如绑定到特定程序、权限），攻击者可以构造恶意链接，诱导用户点击（或者通过第三方网站的图片/脚本自动触发），让用户在不知情的情况下跳转并携带攻击者指定的program_id，进而影响用户的登录状态或后续操作，这属于典型的CSRF攻击场景。

如何实现CSRF防护？ #

方案1：添加CSRF Token验证

这是最常用且可靠的方式：

1. 后端渲染页面时，生成一个随机的CSRF Token，将其存储到用户会话中，同时在页面里添加一个隐藏输入框：

<input type="hidden" id="csrf-token" value="后端生成的随机Token">

2. 修改JavaScript代码，把Token拼进跳转URL：

ProgramSelection.submitSelection = function() {
    var redirectPath = document.querySelector('#redirect-url');
    var account = document.querySelector('input[name="user-programs"]:checked');
    var csrfToken = document.querySelector('#csrf-token').value;
 
    var redirectUrl = `${redirectPath.value}/login?program_id=${account.value}&csrf_token=${csrfToken}`;
    window.location.href = redirectUrl;
}

3. 后端处理/login请求时，取出URL中的csrf_token，和用户会话中存储的Token对比，只有一致才继续处理，否则直接拒绝请求。

方案2：利用SameSite Cookie增强防护

后端可以将登录相关Cookie的SameSite属性设置为Strict或Lax，这样浏览器会限制跨站请求携带Cookie，一定程度上阻止CSRF攻击。不过这属于浏览器层面的防护，建议和CSRF Token结合使用，双重保障。

额外提示 #

原HTML里第一个单选框的id="91820000"和对应标签的for="1"不匹配，点击标签无法选中单选框，建议修正为一致的id值，比如把input的id改成1。

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