IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> Java知识库 -> SpringSecurity关于关闭csrf后导致页面元素消失的问题及处理方法 -> 正文阅读

[Java知识库]SpringSecurity关于关闭csrf后导致页面元素消失的问题及处理方法

????????在学习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

  Java知识库 最新文章
计算距离春节还有多长时间
系统开发系列 之WebService(spring框架+ma
springBoot+Cache(自定义有效时间配置)
SpringBoot整合mybatis实现增删改查、分页查
spring教程
SpringBoot+Vue实现美食交流网站的设计与实
虚拟机内存结构以及虚拟机中销毁和新建对象
SpringMVC---原理
小李同学: Java如何按多个字段分组
打印票据--java
上一篇文章      下一篇文章      查看所有文章
加:2022-04-27 11:11:09  更:2022-04-27 11:13:08 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 2:37:40-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码