Spring-Boot带有CSRF标头的POST请求

huangapple
go评论101阅读模式
英文:

Spring-Boot Post request with csrf header

问题

以下是您提供的内容的翻译部分：

在开发我的Spring Boot应用程序时，我禁用了csrf；但现在我需要启用它。我按照Spring文档这里所示进行操作，但在我的JavaScript文件中进行POST请求时，我不断收到"SyntaxError: Invalid header name."的错误。我在这里做了一些明显错误的事情吗？

这是在HTML页面顶部的Header中的函数：

  1. <meta name="_csrf" content="${_csrf.token}"/>
  2. <meta name="_csrf_header" content="${_csrf.headerName}"/>

这是进行请求的JavaScript文件：

  1. var request = new XMLHttpRequest();
  2. request.onreadystatechange = function() {
  3.   if (request.readyState == XMLHttpRequest.DONE) {
  4.       location.reload();
  5.   }
  6. }
  8. // 用于CSRF保护的Headers
  9. var token = $("meta[name='_csrf']").attr("content");
  10. var header = $("meta[name='_csrf_header']").attr("content");
  12. request.open("POST", "/admin/delete-email");
  13. request.setRequestHeader(header, token);  // <-- 此行抛出语法错误。
  14. request.send(formData);

这是安全配置：

  1. @Override
  2. public void configure(HttpSecurity http) throws Exception {
  3.   // 以下代码片段打开整个应用程序
  4.   // http.authorizeRequests().antMatchers("/**").permitAll();
  6.   //http.csrf().disable();
  7.   http.authorizeRequests()
  8.     .antMatchers("/admin/**")
  9.     .hasRole("ADMIN")
  10.     .antMatchers("/db/**")
  11.     .hasRole("ADMIN")
  12.     .and()
  13.     .formLogin()
  14.     .permitAll()
  15.     .and()
  16.     .httpBasic();
  17. }

当使用表单进行POST请求时，我还会收到403错误：

  1. <form method="POST" enctype="multipart/form-data" action="/admin/add-email">
  2.     <td class="tg-0pky"><input type="text" name="employeeId"/></td>
  3.     <td class="tg-0pky"><input type="text" name="email"/></td>
  4.     <td class="tg-0pky"><input type="submit" value="Upload"/></td>
  5.     <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
  6. </form>
英文:

When developing my Spring Boot app, I had csrf disabled; but now I need to enable it. I followed the Spring Docs here but I keep getting a "SyntaxError: Invalid header name." in my javascript file making the POST request. Am I doing something obviously wrong here?

This is in my Header at the top of the HTML page for this function:

  1. &lt;meta name=&quot;_csrf&quot; content=&quot;${_csrf.token}&quot;/&gt;
  2. &lt;meta name=&quot;_csrf_header&quot; content=&quot;${_csrf.headerName}&quot;/&gt;

This is the JavaScript file making the request:

  1. var request = new XMLHttpRequest();
  2. request.onreadystatechange = function() {
  3.   if (request.readyState == XMLHttpRequest.DONE) {
  4.       location.reload();
  5.   }
  6. }
  8. // Headers for CSRF protection
  9. var token = $(&quot;meta[name=&#39;_csrf&#39;]&quot;).attr(&quot;content&quot;);
  10. var header = $(&quot;meta[name=&#39;_csrf_header&#39;]&quot;).attr(&quot;content&quot;);
  12. request.open(&quot;POST&quot;, &quot;/admin/delete-email&quot;);
  13. request.setRequestHeader(header, token);  &lt;-- This line throws syntax error.
  14. request.send(formData);

Here is the security configuration:

  1. @Override
  2. public void configure(HttpSecurity http) throws Exception {
  3.   // The following snippet opens the entire app
  4.   // http.authorizeRequests().antMatchers(&quot;/**&quot;).permitAll();
  6.   //http.csrf().disable();
  7.   http.authorizeRequests()
  8.     .antMatchers(&quot;/admin/**&quot;)
  9.     .hasRole(&quot;ADMIN&quot;)
  10.     .antMatchers(&quot;/db/**&quot;)
  11.     .hasRole(&quot;ADMIN&quot;)
  12.     .and()
  13.     .formLogin()
  14.     .permitAll()
  15.     .and()
  16.     .httpBasic();
  17.   }

I also get a 403 error when making a POST request using a Form:

  1. &lt;form method=&quot;POST&quot; enctype=&quot;multipart/form-data&quot; action=&quot;/admin/add-email&quot;&gt;
  2.     &lt;td class=&quot;tg-0pky&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;employeeId&quot;/&gt;&lt;/td&gt;
  3.     &lt;td class=&quot;tg-0pky&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;email&quot;/&gt;&lt;/td&gt;
  4.     &lt;td class=&quot;tg-0pky&quot;&gt;&lt;input type=&quot;submit&quot; value=&quot;Upload&quot;/&gt;&lt;/td&gt;
  5.     &lt;input type=&quot;hidden&quot; name=&quot;${_csrf.parameterName}&quot; value=&quot;${_csrf.token}&quot;/&gt;
  6. &lt;/form&gt;

答案1

得分: 1

<meta th:name="csrf" th:content="${_csrf.token}"/>
<meta th:name="csrf_header" th:content="${_csrf.headerName}"/>

and

<form method="POST" enctype="multipart/form-data" action="/admin/add-email">
<td class="tg-0pky"><input type="text" name="employeeId"/></td>
<td class="tg-0pky"><input type="text" name="email"/></td>
<td class="tg-0pky"><input type="submit" value="Upload"/></td>
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
</form>

英文:

Figured it out. Since I am using Thymeleaf I need to use th: namespaces.

  1. &lt;meta th:name=&quot;_csrf&quot; th:content=&quot;${_csrf.token}&quot;/&gt;
  2. &lt;meta th:name=&quot;_csrf_header&quot; th:content=&quot;${_csrf.headerName}&quot;/&gt;

and

  1. &lt;form method=&quot;POST&quot; enctype=&quot;multipart/form-data&quot; action=&quot;/admin/add-email&quot;&gt;
  2.   &lt;td class=&quot;tg-0pky&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;employeeId&quot;/&gt;&lt;/td&gt;
  3.   &lt;td class=&quot;tg-0pky&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;email&quot;/&gt;&lt;/td&gt;
  4.   &lt;td class=&quot;tg-0pky&quot;&gt;&lt;input type=&quot;submit&quot; value=&quot;Upload&quot;/&gt;&lt;/td&gt;
  5.   &lt;input type=&quot;hidden&quot; th:name=&quot;${_csrf.parameterName}&quot; th:value=&quot;${_csrf.token}&quot;/&gt;
  6. &lt;/form&gt;

huangapple
  • 本文由 发表于 2020年9月11日 06:44:48
  • 转载请务必保留本文链接：https://go.coder-hub.com/63838591.html
  • csrf
  • java
  • javascript
  • spring-boot
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定