本教程探讨了在全栈应用中配置`x-frame-options` http响应头以防止点击劫持（clickjacking）的常见误区。我们发现，在spring security等后端框架中配置此头部仅对后端api端点有效，而前端应用（如由nginx、tomcat等服务器托管的单页应用）仍可能面临风险。文章将详细阐述其原因，并提供针对前端web服务器的正确配置方法，确保全栈应用的全面安全。
理解X-Frame-Options与点击劫持
点击劫持（Clickjacking）是一种恶意技术，攻击者通过透明的、覆盖在合法网页上的恶意网页来欺骗用户点击。X-Frame-Options HTTP响应头是防御这种攻击的有效手段，它指示浏览器是否允许将网页嵌入到、、或
DENY：完全禁止任何页面嵌入。SAMEORIGIN：只允许同源页面嵌入。ALLOW-FROM uri：允许指定URI的页面嵌入（已废弃，推荐使用CSP的frame-ancestors）。
在现代Web开发中，Content-Security-Policy (CSP) 的frame-ancestors指令提供了更强大和灵活的替代方案，例如Content-Security-Policy: frame-ancestors ‘none’;等同于X-Frame-Options: DENY。
后端框架中的X-Frame-Options配置局限性
许多开发者在构建全栈应用时，习惯于在后端框架中集中配置安全相关的HTTP响应头。例如，在Spring Security中，可以通过http.headers().frameOptions().deny()来设置X-Frame-Options: DENY。
以下是一个Spring Security的配置示例：
@Overrideprotected void configure(HttpSecurity http) throws Exception { http.headers() .httpStrictTransportSecurity() .maxAgeInSeconds(31536000) .includeSubDomains(true); http.headers() .contentTypeOptions(); http.cors().and() .headers() .xssProtection() .and() .contentSecurityPolicy("script-src 'self'") // 其他CSP配置 .and() .httpStrictTransportSecurity().includeSubDomains(true).maxAgeInSeconds(31536000) .and() .contentSecurityPolicy("frame-ancestors 'none'") // CSP frame-ancestors 指令 .and() .frameOptions() .deny() // X-Frame-Options 配置 .and() .csrf() .disable() .formLogin().defaultSuccessUrl("/swagger-ui.html", true).and() .authorizeRequests().antMatchers(AUTH_LIST).authenticated() .antMatchers("/actuator/**").access("hasAnyRole('ADMIN') and hasIpAddress('127.0.0.1')") .anyRequest().permitAll() .and().httpBasic();}
尽管上述配置中包含了frameOptions().deny()和contentSecurityPolicy(“frame-ancestors ‘none'”)，但这些配置仅作用于由Spring Boot应用直接处理和响应的请求，通常是后端API端点（例如localhost:8080/api/data）。当浏览器请求这些API时，响应头中会包含X-Frame-Options: DENY，从而阻止这些API的响应被嵌入到iframe中。
然而，对于全栈应用，前端通常是一个独立的单页应用（SPA），由Nginx、Apache、Tomcat或Node.js等Web服务器在另一个端口（例如localhost:3000）提供静态文件服务。当用户访问前端应用时，浏览器会直接向提供前端静态文件的服务器发出请求。此时，后端Spring Security配置的X-Frame-Options并不会作用于前端应用本身，因为前端应用的HTML、CSS、JavaScript文件并非由Spring Boot应用直接响应。这就导致了一个安全漏洞：后端API受到保护，但前端用户界面仍然可以被恶意网站通过iframe嵌入，从而遭受点击劫持攻击。
针对前端Web服务器的正确配置
为了确保全栈应用获得全面的点击劫持防护，X-Frame-Options或Content-Security-Policy: frame-ancestors必须由提供前端静态文件的Web服务器进行配置。以下是几种常见Web服务器的配置方法：
1. Nginx
如果您的前端应用由Nginx提供服务，可以在Nginx的配置文件（通常是nginx.conf或站点配置文件）中添加相应的add_header指令：
server { listen 80; server_name your-frontend.com; # 配置X-Frame-Options add_header X-Frame-Options "SAMEORIGIN"; # 或 "DENY" # 可选：使用Content-Security-Policy的frame-ancestors指令 # add_header Content-Security-Policy "frame-ancestors 'self' your-trusted-domain.com;"; # 或 "frame-ancestors 'none';" location / { root /path/to/your/frontend/dist; # 前端静态文件路径 index index.html index.htm; try_files $uri $uri/ /index.html; }}
配置完成后，需要重新加载Nginx配置：sudo nginx -s reload。
2. Apache HTTP Server
对于使用Apache HTTP Server托管前端的情况，可以在httpd.conf文件、虚拟主机配置或.htaccess文件中添加Header指令。确保mod_headers模块已启用。
ServerName your-frontend.com DocumentRoot "/path/to/your/frontend/dist" # 配置X-Frame-Options Header always set X-Frame-Options "SAMEORIGIN" # 或 "DENY" # 可选：使用Content-Security-Policy的frame-ancestors指令 # Header always set Content-Security-Policy "frame-ancestors 'self' your-trusted-domain.com;" # 或 "frame-ancestors 'none';" AllowOverride All Require all granted
修改配置后，需要重启Apache服务。
3. Tomcat (或其他Servlet容器)
如果前端应用（例如基于JSP/Servlet或打包成WAR的静态资源）由Tomcat提供服务，可以在web.xml文件中配置一个Filter来添加X-Frame-Options头。
首先，在web.xml中定义一个Filter：
XFrameOptionsFilter org.springframework.web.filter.OncePerRequestFilter xframeOptionsMode DENY XFrameOptionsFilter /*
对于更通用的方式，可以自定义一个ServletFilter：
import javax.servlet.*;import javax.servlet.http.HttpServletResponse;import java.io.IOException;public class XFrameOptionsFilter implements Filter { private String xFrameOptionsValue = "DENY"; // 默认值 @Override public void init(FilterConfig filterConfig) throws ServletException { String mode = filterConfig.getInitParameter("xframeOptionsMode"); if (mode != null && !mode.trim().isEmpty()) { this.xFrameOptionsValue = mode.trim().toUpperCase(); } } @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletResponse httpResponse = (HttpServletResponse) response; httpResponse.setHeader("X-Frame-Options", xFrameOptionsValue); // 可选：添加CSP frame-ancestors // httpResponse.setHeader("Content-Security-Policy", "frame-ancestors 'none'"); chain.doFilter(request, response); } @Override public void destroy() { // 清理资源 }}
然后将此Filter配置到web.xml中：
XFrameOptionsFilter com.yourcompany.security.XFrameOptionsFilter xframeOptionsMode SAMEORIGIN XFrameOptionsFilter /*
注意事项与总结
全面防护原则：在全栈应用中，为了彻底防范点击劫持，您需要确保所有可能被嵌入的资源都发送了适当的X-Frame-Options或Content-Security-Policy: frame-ancestors头。这包括后端API响应和前端UI静态文件。选择正确的策略：根据您的应用需求选择DENY（完全禁止嵌入）或SAMEORIGIN（仅允许同源嵌入）。如果需要允许特定第三方网站嵌入，应优先考虑使用CSP的frame-ancestors指令，因为它更灵活且安全性更高。Content-Security-Policy的优势：Content-Security-Policy: frame-ancestors是X-Frame-Options的现代替代方案，提供更细粒度的控制，并且可以与其他CSP指令一同使用，增强整体安全性。建议优先使用CSP。测试验证：配置完成后，务必通过实际测试验证防护是否生效。可以尝试在一个恶意HTML页面中嵌入您的前端应用，并检查浏览器控制台是否报告了相关的安全策略违规。开发环境与生产环境：在开发环境中，一些前端开发服务器可能不会默认添加这些安全头。但在部署到生产环境时，务必在Nginx、Apache、Tomcat等生产Web服务器上正确配置。
总之，Spring Security等后端框架对X-Frame-Options的配置主要作用于后端API。对于全栈应用，前端界面的点击劫持防护必须通过配置提供前端静态资源的Web服务器来实现。只有这样，才能为用户提供一个全面安全的Web应用体验。
以上就是全栈应用中X-Frame-Options防护策略的正确实施的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/201461.html
微信扫一扫 
支付宝扫一扫 
