????????在学习SpringSecurity时进行自定义登录页面的编写时,由于在学习的过程中暂时用不到csrf防护,不关闭的话后面可能会因为没考虑csrf防护而遇到一连串的问题,且关闭后直接使用GET请求也可以退出登陆,并且登陆请求中无需再携带Token了。
????????但是在实验时出现了这样的问题:在SpringSecurity配置类中关闭csrf后:会导致编写的前端登录页面和主界面的一些元素的丢失。
????????部分前端html代码如下:此时,用来获取csrfToken的输入标签元素位于用户名、密码输入框下方,位于登录按钮上方。
<div class="ad-auth-form">
<div class="ad-auth-feilds mb-30">
<input name="username" type="text" placeholder="用户名" class="ad-input">
<div class="ad-auth-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.3 483.3"><path d="M424.3,57.75H59.1c-32.6,0-59.1,26.5-59.1,59.1v249.6c0,32.6,26.5,59.1,59.1,59.1h365.1c32.6,0,59.1-26.5,59.1-59.1 v-249.5C483.4,84.35,456.9,57.75,424.3,57.75z M456.4,366.45c0,17.7-14.4,32.1-32.1,32.1H59.1c-17.7,0-32.1-14.4-32.1-32.1v-249.5 c0-17.7,14.4-32.1,32.1-32.1h365.1c17.7,0,32.1,14.4,32.1,32.1v249.5H456.4z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M304.8,238.55l118.2-106c5.5-5,6-13.5,1-19.1c-5-5.5-13.5-6-19.1-1l-163,146.3l-31.8-28.4c-0.1-0.1-0.2-0.2-0.2-0.3 c-0.7-0.7-1.4-1.3-2.2-1.9L78.3,112.35c-5.6-5-14.1-4.5-19.1,1.1c-5,5.6-4.5,14.1,1.1,19.1l119.6,106.9L60.8,350.95 c-5.4,5.1-5.7,13.6-0.6,19.1c2.7,2.8,6.3,4.3,9.9,4.3c3.3,0,6.6-1.2,9.2-3.6l120.9-113.1l32.8,29.3c2.6,2.3,5.8,3.4,9,3.4 c3.2,0,6.5-1.2,9-3.5l33.7-30.2l120.2,114.2c2.6,2.5,6,3.7,9.3,3.7c3.6,0,7.1-1.4,9.8-4.2c5.1-5.4,4.9-14-0.5-19.1L304.8,238.55z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
</div>
</div>
<div class="ad-auth-feilds">
<input name="password" type="password" placeholder="密码" class="ad-input">
<div class="ad-auth-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 482.8 482.8"><path d="M395.95,210.4h-7.1v-62.9c0-81.3-66.1-147.5-147.5-147.5c-81.3,0-147.5,66.1-147.5,147.5c0,7.5,6,13.5,13.5,13.5 s13.5-6,13.5-13.5c0-66.4,54-120.5,120.5-120.5c66.4,0,120.5,54,120.5,120.5v62.9h-275c-14.4,0-26.1,11.7-26.1,26.1v168.1 c0,43.1,35.1,78.2,78.2,78.2h204.9c43.1,0,78.2-35.1,78.2-78.2V236.5C422.05,222.1,410.35,210.4,395.95,210.4z M395.05,404.6 c0,28.2-22.9,51.2-51.2,51.2h-204.8c-28.2,0-51.2-22.9-51.2-51.2V237.4h307.2L395.05,404.6L395.05,404.6z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M241.45,399.1c27.9,0,50.5-22.7,50.5-50.5c0-27.9-22.7-50.5-50.5-50.5c-27.9,0-50.5,22.7-50.5,50.5 S213.55,399.1,241.45,399.1z M241.45,325c13,0,23.5,10.6,23.5,23.5s-10.5,23.6-23.5,23.6s-23.5-10.6-23.5-23.5 S228.45,325,241.45,325z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
</div>
</div>
</div>
<input type="text" th:name="${_csrf.getParameterName()}" th:value="${_csrf.token}" hidden>
<div class="ad-other-feilds">
<div class="ad-checkbox">
<label>
<input type="checkbox" name="remeber" class="ad-checkbox">
<span>记住我</span>
</label>
</div>
<a class="forgot-pws-btn" href="forgot-pws.html">Forgot Password?</a>
</div>
<div class="ad-auth-btn">
<button class="ad-login-member">登录</button>
</div>
<p class="ad-register-text">Don't have an account? <a href="register.html">Click Here</a></p>
</form>
SpringSecurityConfiguration:此时未关闭csrf
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/static/**").permitAll()
.antMatchers("/**").hasRole("user")
.and()
.formLogin()
.loginPage("/login")
.loginProcessingUrl("/dologin")
.defaultSuccessUrl("/index", true)
.permitAll()
.and()
.logout()
.logoutUrl("/logout")
.logoutSuccessUrl("/login");
}
????????生成登录页显示正常:
? ? ? ? ?而当关掉csrf防护后:
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/static/**").permitAll()
.antMatchers("/**").hasRole("user")
.and()
.formLogin()
.loginPage("/login")
.loginProcessingUrl("/dologin")
.defaultSuccessUrl("/index", true)
.permitAll()
.and()
.logout()
.logoutUrl("/logout")
.logoutSuccessUrl("/login")
.and()
.csrf().disable();
}
? ? ? ? 此时生成的页面如下:缺少了下面的一些元素。
? ? ? ? ?在经过调试后发现,关闭了CSRF防护后,获取csrfToken的输入标签:
<input type="text" th:name="${_csrf.getParameterName()}" th:value="${_csrf.token}" hidden>
在原html中,该标签下方的元素正是关闭csrf防护后消失的元素,所以怀疑可能是该标签位置所导致其后面的页面元素缺失,所以这里将该标签放置在表单最后面,再重启服务器运行试一下。
<div class="ad-auth-form">
<div class="ad-auth-feilds mb-30">
<input name="username" type="text" placeholder="用户名" class="ad-input">
<div class="ad-auth-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.3 483.3"><path d="M424.3,57.75H59.1c-32.6,0-59.1,26.5-59.1,59.1v249.6c0,32.6,26.5,59.1,59.1,59.1h365.1c32.6,0,59.1-26.5,59.1-59.1 v-249.5C483.4,84.35,456.9,57.75,424.3,57.75z M456.4,366.45c0,17.7-14.4,32.1-32.1,32.1H59.1c-17.7,0-32.1-14.4-32.1-32.1v-249.5 c0-17.7,14.4-32.1,32.1-32.1h365.1c17.7,0,32.1,14.4,32.1,32.1v249.5H456.4z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M304.8,238.55l118.2-106c5.5-5,6-13.5,1-19.1c-5-5.5-13.5-6-19.1-1l-163,146.3l-31.8-28.4c-0.1-0.1-0.2-0.2-0.2-0.3 c-0.7-0.7-1.4-1.3-2.2-1.9L78.3,112.35c-5.6-5-14.1-4.5-19.1,1.1c-5,5.6-4.5,14.1,1.1,19.1l119.6,106.9L60.8,350.95 c-5.4,5.1-5.7,13.6-0.6,19.1c2.7,2.8,6.3,4.3,9.9,4.3c3.3,0,6.6-1.2,9.2-3.6l120.9-113.1l32.8,29.3c2.6,2.3,5.8,3.4,9,3.4 c3.2,0,6.5-1.2,9-3.5l33.7-30.2l120.2,114.2c2.6,2.5,6,3.7,9.3,3.7c3.6,0,7.1-1.4,9.8-4.2c5.1-5.4,4.9-14-0.5-19.1L304.8,238.55z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
</div>
</div>
<div class="ad-auth-feilds">
<input name="password" type="password" placeholder="密码" class="ad-input">
<div class="ad-auth-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 482.8 482.8"><path d="M395.95,210.4h-7.1v-62.9c0-81.3-66.1-147.5-147.5-147.5c-81.3,0-147.5,66.1-147.5,147.5c0,7.5,6,13.5,13.5,13.5 s13.5-6,13.5-13.5c0-66.4,54-120.5,120.5-120.5c66.4,0,120.5,54,120.5,120.5v62.9h-275c-14.4,0-26.1,11.7-26.1,26.1v168.1 c0,43.1,35.1,78.2,78.2,78.2h204.9c43.1,0,78.2-35.1,78.2-78.2V236.5C422.05,222.1,410.35,210.4,395.95,210.4z M395.05,404.6 c0,28.2-22.9,51.2-51.2,51.2h-204.8c-28.2,0-51.2-22.9-51.2-51.2V237.4h307.2L395.05,404.6L395.05,404.6z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M241.45,399.1c27.9,0,50.5-22.7,50.5-50.5c0-27.9-22.7-50.5-50.5-50.5c-27.9,0-50.5,22.7-50.5,50.5 S213.55,399.1,241.45,399.1z M241.45,325c13,0,23.5,10.6,23.5,23.5s-10.5,23.6-23.5,23.6s-23.5-10.6-23.5-23.5 S228.45,325,241.45,325z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
</div>
</div>
</div>
<div class="ad-other-feilds">
<div class="ad-checkbox">
<label>
<input type="checkbox" name="remeber" class="ad-checkbox">
<span>记住我</span>
</label>
</div>
<a class="forgot-pws-btn" href="forgot-pws.html">Forgot Password?</a>
</div>
<div class="ad-auth-btn">
<button class="ad-login-member">登录</button>
</div>
<p class="ad-register-text">Don't have an account? <a href="register.html">Click Here</a></p>
<input type="text" th:name="${_csrf.getParameterName()}" th:value="${_csrf.token}" hidden>
</form>
????????果然,更改后页面完整地显示了。而且我们发现,最下方的输入标签也消失了。
? ? ? ? 这个问题在后面的编写Logout登出操作中再次产生,我们再利用该方法,将该标签移除或者将其放到不影响界面其他元素显示的位置上即可解决。所以说在关闭csrf获取csrfToken的标签位置不能乱放,其位置会影响页面中其后面元素的生成。
环境:
浏览器:Chrome
SpringSecurity:5.5.3
Spring-webmvc:5.3.14
|