启用CSRF保护后PrimeFaces简单模式文件上传按钮失效问题

问题根源 #

PrimeFaces简单模式文件上传依赖标准multipart/form-data表单同步提交，但Spring Security启用CSRF后，要求请求必须携带CSRF令牌。而PrimeFaces简单上传组件默认不会自动在multipart表单请求中附加CSRF令牌，导致请求被Spring Security拦截；高级模式上传用AJAX提交，PrimeFaces会自动在AJAX请求中注入CSRF令牌，因此不受影响。

修复步骤 #

1. 手动在表单中添加CSRF令牌隐藏字段 #

在包含简单上传组件的JSF表单内，直接添加Spring Security的CSRF令牌隐藏字段，让同步提交的表单携带令牌：

<h:form enctype="multipart/form-data">
    <!-- 手动注入CSRF令牌 -->
    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
    
    <!-- PrimeFaces简单模式上传按钮 -->
    <p:fileUpload mode="simple" value="#{fileUploadBean.file}" 
                  label="选择文件" uploadLabel="上传"
                  action="#{fileUploadBean.handleSimpleUpload}" />
    <!-- 简单模式需配合非AJAX提交按钮 -->
    <p:commandButton value="确认上传" ajax="false" />
    
    <!-- 其他页面组件 -->
</h:form>

2. 配置Spring Security支持Multipart请求的CSRF解析 #

在WebSecurityConfigurerAdapter配置类中，确保Spring Security能正确解析multipart请求里的CSRF令牌，同时配置文件上传的大小限制：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .csrf()
            .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()) // 可选：用Cookie存储令牌，方便前端场景调用
            .and()
        .multipartConfigElement(multipartConfigElement()); // 启用multipart请求解析
}

@Bean
public MultipartConfigElement multipartConfigElement() {
    MultipartConfigFactory factory = new MultipartConfigFactory();
    // 根据业务需求调整文件大小限制
    factory.setMaxFileSize(DataSize.ofMegabytes(10));
    factory.setMaxRequestSize(DataSize.ofMegabytes(20));
    return factory.createMultipartConfig();
}

如果是Spring Boot项目，也可以通过配置文件简化multipart设置：

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=20MB

3. 确认PrimeFaces上传器配置正确 #

检查web.xml或faces-config.xml中的PrimeFaces上传器配置，确保启用multipart支持：

<context-param>
    <param-name>primefaces.UPLOADER</param-name>
    <param-value>auto</param-value> <!-- 若用commons上传器，需改为"commons"并添加对应依赖 -->
</context-param>

如果指定commons上传器，Maven需添加以下依赖：

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.11.0</version>
</dependency>

原生JSF上传按钮样式适配 #

若使用<h:inputFile>样式无法匹配PrimeFaces按钮，可通过自定义CSS覆盖样式：

/* 隐藏原生上传按钮默认样式 */
input[type="file"] {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* 用PrimeFaces风格的按钮包裹原生上传 */
.custom-file-upload {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    border: 1px solid #007bff;
    font-size: 14px;
}

.custom-file-upload:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

页面中使用方式：

<div class="custom-file-upload">
    <span>选择文件</span>
    <h:inputFile value="#{fileUploadBean.file}" />
</div>

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