'form'에 해당되는 글 2건

  1. 2020.09.07 [Bootstrap] Nav 사용 시 Form 태그 위치 주의.
  2. 2020.07.07 [Spring] Spring Security 기본 Login Form 제거 및 CSRF 만 사용하기

[Bootstrap] Nav 사용 시 Form 태그 위치 주의.

ITWeb/개발일반 2020. 9. 7. 12:21

기억하기 위해 기록 합니다.

 

[참고문서]

bootstrap ui nav document

 

정상 동작 코드)

<nav>
  <div class="nav nav-tabs nav-pills" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-terraform-configuration" data-toggle="tab" href="#terraform-configuration" role="tab" aria-controls="terraform-configuration" aria-selected="true">Step 1 - Terraform</a>
...중략...    
  </div>
</nav>

<div class="tab-content" id="nav-tabContent">
  
  <div class="tab-pane fade show active" id="terraform-configuration" role="tabpanel" aria-labelledby="nav-terraform-configuration">
    <form name="terraformForm">
...중략...
		</form>
	</div>

	<div class="tab-pane fade" id="kibana-installation" role="tabpanel" aria-labelledby="nav-kibana-installation">
...중략...
	</div>
</div>

 

비정상 동작 코드)

<nav>
  <div class="nav nav-tabs nav-pills" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-terraform-configuration" data-toggle="tab" href="#terraform-configuration" role="tab" aria-controls="terraform-configuration" aria-selected="true">Step 1 - Terraform</a>
...중략...    
  </div>
</nav>

<div class="tab-content" id="nav-tabContent">
	
	<form name="terraformForm">
  <div class="tab-pane fade show active" id="terraform-configuration" role="tabpanel" aria-labelledby="nav-terraform-configuration">
...중략...
	</div>
	</form>

	<div class="tab-pane fade" id="kibana-installation" role="tabpanel" aria-labelledby="nav-kibana-installation">
...중략...
	</div>
</div>

위 코드의 차이점은 <form> 태그의 위치 입니다.

 

정상적으로 동작 하는 코드에서는

- <div> tab-content 내부에 tab 영역에 해당 하는 <div> 안쪽에 선언이 되어 있고,

- 비정상적으로 동작하는 코드에서는 밖에 선언이 되어 있습니다.

 

tags : bootstarp, form, navs, UI
Trackbacks 0 : Comments 0

Write a comment


[Spring] Spring Security 기본 Login Form 제거 및 CSRF 만 사용하기

ITWeb/개발일반 2020. 7. 7. 08:33

사용하다 보면 별의 별 요구사항이 나오게 됩니다.

단순 하게 CSRF 만 사용 하고 싶은데 자꾸 login form 이 나와서 설정만으로 이걸 해결해 보고자 했습니다.

그러나 설정 만으로는 안되더라고요.

 

설정 예시) 비추천

security:
  enable:
    csrf: true
  basic:
    enabled: false

management:
  security:
    enabled: false

 

코드 예시) 추천

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

  @Override
  protected void configure(HttpSecurity httpSecurity) throws Exception {
    httpSecurity.httpBasic().disable();
  }
}

참고 정보)

dependencies {
  implementation 'org.springframework.boot:spring-boot-starter-quartz'
  implementation 'org.springframework.boot:spring-boot-starter-web'

  // thymeleaf
  implementation 'org.thymeleaf.extras:thymeleaf-extras-java8time'
  implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
  implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

  // spring security
  implementation 'org.springframework.boot:spring-boot-starter-security'
  implementation 'org.springframework.security:spring-security-test'
  implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5'

  implementation 'org.webjars:jquery:3.5.0'
  implementation 'org.webjars:jquery-ui:1.12.1'
  implementation 'org.webjars.bower:bootstrap:4.4.0'

  compileOnly 'org.projectlombok:lombok'
  annotationProcessor 'org.projectlombok:lombok'
  providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
  testImplementation('org.springframework.boot:spring-boot-starter-test') {
    exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
  }
}


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

let token = $("meta[name='_csrf']").attr("content");
let header = $("meta[name='_csrf_header']").attr("content");

$(function() {
  $(document).ajaxSend(function(e, xhr, options) {
    xhr.setRequestHeader(header, token);
  });
});


spring:
  security:
    user:
      name: admin
      password: admin

 

 

Trackbacks 0 : Comments 0

Write a comment