공부하는블로그

병합 중 security 에러발생.

일단 컨트롤러에서 @Resource 지워주고 @Autowired 적용하니 500에러로 변경.

mapper를 인식 못함.

boardList를 찾아오라고 했으나 찾지 못하고 NullPointException발생.

xml내의 id와 동일하게 mapper를 바꿔주니 해결.

단 mapper에 @Repository 를 적용하면 다시 500에러.

@Mapper만 정상 작동.

insert페이지에서 에디터 출력 안되는 에러 발생.

크롬 개발자 콘솔 창에서 X-Frame-Options to 'deny' 에러가 발생.

X-Frame-Options HTTP 응답 헤더는 해당 페이지를 <frame> 또는 <iframe>,<object>에서

렌더링 할 수 있는지 여부를 나타내는데 사용한다.

사이트 내 콘텐츠들이 다른 사이트에 포함 되지 않도록 하여 ClickJacking 공격을 막기 위해 

이 헤더를 사용한다.

이 설정은 사용자가 X-Frame-Options를 지원하는 브라우저를 통해 페이지에 접근할 경우에만 

보안된다.

즉, 보안을 security에서 제공하는 기능이고 이것 때문에 외부 콘텐츠인 에디터가 출력이 되지 않았던 것이다.

오류 해결 방법으로는 SecurityConfig.java에 있는 configure(HttpSecurity httpSecurity) 메소드 내에

httpSecurity

             .and()
             .headers()
             .frameOptions().disable()

이렇게 추가해주었다.

자료가 굉장히 부족한 편이어서 이것저것 다 해봤고 view에서 

<meta http-equiv="X-Frame-Options" content="deny">

이것도 작성 해봤으나 전혀 의미없었다.

다른 블로그에서는 이 meta태그는 전혀 아무런 영향도 끼치지 않으니 쓰지 말라고 한다.

처음에 configure에 작성할때는 

httpSecurity
            .and()
            .headers()
            .addHeaderWriter(new StaticHeadersWriter("X-Content-Security-Policy", "script-src 'self'"))
            .frameOptions().disable()
            

이렇게 작성했었는데 4번째 라인인 .addHeaderWriter는 지워줘도 정상 작동한다.

이게 X-Frame-Options의 보안을 깨고 에디터를 출력해주는 것인 듯 하다.

하지만 보안을 위해 넣어둔 기능인 만큼 다른 방법이 있거나 아니면 안쓰는 쪽으로 하는게 낫지 않을지....라는 생각

에디터 이미지 경로 설정에서 에러 발생.

처음 샘플 게시판을 만들때는 webapp에서 html을 만들고 thymeleaf를 사용하며 이미지폴더도 webapp에 넣어뒀으나

팀 프로젝트 구조는 resources/img/...로 경로를 잡아주었다.

하지만 경로 설정이 전혀 안되는 오류가 발생.

계속 C:\Users\palyo\AppData\Local\Temp\tomcat-docbase.6798108938226834884.8080\.....

이 경로로만 입력이 됨.

해결방법으로는 .getRealPath("resources/board/"); 를 잡아주고 

File file = new File("src\\main\\resources\\board");

이렇게 강제적으로 경로를 다 잡아줌.

에디터에 정보출력 해주는 sb.append에는

.append("http://localhost:8080/board/")

로 board에서 이미지값을 불러오도록 설정함.

강사님께서 절대 추천하는 방식이 아니라고 하셨고 현재 정 방법이 없으니 이렇게라도 만들었다.

기본 경로가 webapp으로 잡히기때문에 webapp에 저장하는게 편한 방법이고

실제로는 보통 서버 혹은 서버 컴퓨터 내의 폴더에 저장하기 때문에 사실상 거의 안쓰는 방식이라고 생각하면 될듯하다.

스프링 시큐리티의 모듈 구성

  스프링 시큐리티는 컴포넌트 역할에 따라 모듈이 분리되어 있으며 일반적인 웹 애플리케이션에 보안 기능을 갖출 때

  필요한 모듈은 다음 4가지이다.

프레임워크 아키텍처

  서블릿 필터의 메커니즘을 활용해 웹 애플리케이션의 보안 기능을 지원하는 아키텍처를 채택하고 있으며,

  다음과 같은 흐름으로 동작한다.

  1. 클라이언트는 웹 애플리케이션에 요청을 보낸다

  2. 스프링 시큐리티의 FilterChainProxy 클래스(서블릿필터)가 요청을 받은 다음, HttpFirewall 인터페이스의 메소드를

     호출해서 HttpServletRequest와 HttpServletResponse에 대한 방화벽 기능을 수행한다.

  3. FilterChainProxy 클래스는 SecurityFilterChain에 설정되어 있는 보안 필터 클래스에 처리를 위임한다.

     이 필터는 실제로 서블릿 필터 형태로 만들어져 있다.

  4. SecurityFilterChain에는 여러 보안 필터가 연쇄적으로 연결된 형태로 설정 되어 있으며, 앞의 보안 필터가 

     정상적으로 처리되면 뒤이은 보안 필터가 뒤이어 호출되는 방식으로 동작한다.

  5. 마지막 보안 필터의 처리가 정상적으로 종료되면 뒤이어 남은 서블릿 필터나 서블릿이 실행되어 웹 애플리케이션의

     리소스에 접근할 수 있게 된다.

  6. FilterChainProxy 클래스는 웹 애플리케이션에서 반환한 리소스를 클라이언트에 전달한다.

  프레임워크에서 주요 기능을 처리하는 컴포넌트는 다음과 같다.

  FilterChainProxy

    FilterChainProxy 클래스는 프레임워크의 진입점 역할을 하는 서블릿 필터 클래스다.

    이 클래스는 프레임워크에서 처리되는 전체 흐름을 제어하고 보안 기능과 같은 추가 기능을 필터에 위임하는

    방식으로 동작한다.

  HttpFirewall

    HttpFirewall 인터페이스는 HttpServletRequest와 HttpServletResponse에 대한 방화벽 기능을 추가하기 위한 

    인터페이스이다. 기본적으로 DefaultHttpFirewall 클래스가 사용되고, 디렉터리 탐색 공격이나 인가되지 않은

    요청을 차단하는 역할을 한다.

  SecurityFilterChain

    SecurityFilterChain 인터페이스는 FilterChainProxy가 받은 요청에 적용할 보안 필터 목록을 관리하기 위한 

    인터페이스다. 기본적으로 DefaultSecurityFilterChain 클래스가 사용되고 요청 패턴 별로 보안 필터 목록을

    관리한다.

    예를들어, 다음과 같이 빈을 정의하면 지정한 경로 패턴마다 다른 보안기능을 적용할 수 있다.

     자바 기반 설정 방식을 이용한 빈 정의

@EnableWebSecurity
public class WebSecurityConfig{
    @Configuration
    @Order(1)
    public ststic class UiWebSecurityConfig extends WebSecurityConfigurerAdapter{
        @Override
        proteted void configure(HttpSecurity http) throws Exception{
            http.antMatcher(*/ui/**");
            //생략
        }
    }
    
    @Configuration
    @Order(2)
    public static class ApiWebSecurityConfig extends WebSecurity ConfigurerAdapter{
        @Override
        protected void configure(HttpSecurity http) throws Exception{
            http.antMatcher("/api/**");
            //생략
        }
    }
}

  xml 기반 설정 방식을 이용한 빈 정의

<sec:http pattern="/ui/**">
  <!-- 생략 -->
</sec:http>

<sec:http pattern="/api/**">
  <!-- 생략 -->
</sec:http>

보안 필터

  보안필터는 보안 기능을 제공하는 서블릿 필터 클래스이다. 스프링 시큐리티는 이러한 보안 필터를 체인형태로

  연결해서 웹 애플리케이션에 필요한 보안 기능을 하도록 만들어져 있다.

(참고 : 스프링 철저 입문)

스프링 시큐리티는 애플리케이션에 보안 기능을 구현할 때 사용하는 프레임워크로서, 주로 서블릿 컨테이너에

배포하는 웹 애플리케이션의 보안 기능을 구현할 때 활용한다.

특징

  다양한 옵션을 제공

    기본 구현 클래스의 동작 방식을 커스터마이징 할 수 있는 다양한 옵션을 제공한다.

    그래서 기본 동작 방식이 보안 요구사항에 부합하지 않더라도 옵션 값을 변경하는 방법으로 요구사항을 충족하도록

    설정 할 수 있다.

  다양한 확장점을 제공

    동작 방식을 커스터마이징 할 수 있는 다양한 확장점을 사용한다. 그래서 기본 동작 방식이 보안 요구사항에 

    부합하지 않더라도 확장 클래스를 만드는 방법으로 요구사항을 충족할 수 있다.

기본적인 보안기능

  기본적인 보안기능으로 인증과 인가라는 두가지 기능이 있다.

  인증기능

    애플리케이션 사용자의 정당성을 확인한다.

  인가기능

    애플리케이션의 리소스나 처리에 대해 접근을 제어한다.

강화된 보안기능

  인증과 인가라는 기본적인 기능 외에도 웹 애플리케이션의 보안을 강화하기 위한 기능을 제공한다.

시큐리티 라이브러리의 설정

pom.xml 정의

<dependency>
    <groupId>org.springframework.security</groupId>
    <artifactId>spring-security-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.security</groupId>
    <artifactId>spring-security-config</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.security</groupId>
    <artifactId>spring-security-taglibs</artifactId>
</dependency>

시큐리티의 빈 정의

  설정 클래스의 작성

package.springbook.config;

import org.springframework.security.config.annotation.web.builders.*;
import org.springframework.security.config.annotation.web.configuration.*;

@EnableWebSecurity	//클래스에 @EnableWebSecurity를 지정하면 스프링 시큐리티가 제공하는 설정 클래스가 임포트되고 스프링 시큐리티를 이용할 때 필요한 컴포넌트의 빈이 자동으로 정의된다.
public class WebSecurityConfig extends WebSecurityConfigurerAdapter { //부모클래스로 WebSecurityConfigurerAdapter클래스를 지정한다. 상속하면 기본적으로 적용되는 빈의 정의를 간단히 커스터마이징 할 수 있다.
    @Override
    public void configure(WebSecurity web){
        web.ignoring().antMatchers("/resources/**");  //보안기능이 필요 없는 리소스(CSS나 자바스크립트)에는 스프링 시큐리티를 적용하지 않는다.
    }
}

  이렇게 만든 설정 클래스를 사용해 DI 컨테이너가 만들어지도록 정의

  web.xml의 설정 예

<listener>
    <listener-class>
        org.springframework.web.context.ContextLoaderListener
    </listener-class>
</listener>
<context-param>
    <param-name>contextClass</param-name>
    <param-value>
        org.springframework.web.context.support.AnnotationConfigWebApplicationContext
    </param-value>
</context-param>
<context-param>
    <!-- contextConfigLocation에 작성한 설정 클래스를 지정 -->
    <param-name>contextConfigLocation</param-name>
    <param-value>springbook.config.WebSecurityConfig</param-value>
</context-param>

xml파일 작성

  XML기반 설정 방식을 사용할 때는 다음과 같은 파일을 작성.

  XML파일(security-context.xml)의 작성 예

<?xml version="1.0" encoding="UTF-8"?>
<beans
    xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:sec="http://www.springframework.org/schema/security"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/security
        http://www.springframework.org/schema/security/spring-security.xsd
">
    <!-- 스프링 시큐리티가 제공하는 XML 네임스페이스를 활성화.
         이 예에서는 sec라는 이름을 할당하고 있다.
         네임스페이스를 이용하면 스프링 시큐리티의 컴포넌트를 빈으로 간단히 정의할 수 있다. -->
         
<sec:http>
<!-- <sec:http>요소를 정의. 정의하면 시큐리티를 이용할 때 필요한 컴포넌트의 빈이 자동으로 정의 -->
    <sec:intercept-url pattern="/**" access="isAuthenticated()" />
    <sec:form-login />
    <!-- 이 예에서는 보안 설정이 제대로 적용되었는지 확인하기 쉽도록 요청되는 모든 경로에 인증을 하도록 만들었다.
         인증방식으로는 폼 기반 인증 기능을 사용 -->
</sec:http>

<sec:authentication-manager />
<!-- <sec:authentication-manager>요소를 정의해 인증용 컴포넌트를 빈으로 정의한다.
     이 요소를 정의하지 않으면 서버를 가동할 때 오류가 발생한다. -->

</beans>

보안 기능이 필요없는 리소스(CSS나 자바스크립트)에 대해서는 다음과 같이 빈을 정의해서 스프링 시큐리티가 인증을

하지 않게 만든다. 만약 <sec:http>요소가 여러개 정의되어 있다면 정의한 순서대로 경로 패턴을 매칭하기 때문에

위에서 설정한 <sec:http>요소보다 다음 설정을 순서상 먼저 기술 해야 한다.

스프링 시큐리티가 인증하지 않도록 하기위한 빈 정의 예

<!-- 인증이 필요없는 리소스에 대한 경로 패턴을 지정 -->
<sec:http pattern="/resources/**" security="none" />

이렇게 만든 XML파일을 사용해 DI컨테이너가 만들어지도록 정의한다.

web.xml의 설정 예

<listener>
    <listener-class>
        org.springframework.web.context.ContextLoaderListener
    </listener-class>
</listener>
<context-param>
    <!-- contextConfiglocation에 작성한 XML파일을 지정 -->
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:/META-INF/spring/security-context.xml</param-value>
<context-param>

서블릿 필터 설정

  마지막으로 스프링 시큐리티에서 제공하는 서블릿 필터 클래스(FilterrChainProxy)를 서블릿 컨테이너에 등록한다.

  web.xml의 설정 예

<filter>
    <filter-name>springSecurityFilterChain</filter-name>
    <filter-class>
        org.springframework.web.filter.DelegatingFilterProxy
    </filter-class>
</filter>
<!-- 스프링 프레임워크가 제공하는 DelegatingFilterProxy를 사용해 DI컨테이너에서 관리되는
     빈(FilterChainProxy)을 서블릿 컨테이너에 등록.
     서블릿 필터의 이름으로 DI 컨테이너에서 관리되는 빈의 이름(springSecurityFilterChain)을
     지정한다. -->

<filter-mapping>
    <filter-name>springSecurityFilterChain</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 스프링 시큐리티를 적용할 URL 패턴을 지정. 이 예에서는 모든 요청에 대해 스프링 시큐리티를 적용-->

(참고 : 스프링 철저 입문)

어제 해결 못했던 엑박 해결.

.append의 경로에 /main이 끼어있었다...

현재 이미지폴더의 경로는 webapp/resources/photoUpload인데

.append("http://localhost:8080/main/resources/photoUpload/")로 되어있어서

경로가 src\main\webapp\main\resources\photoUpload로 잡혀서 미리보기가 안되었던 것.

해결 후

게시글 상세페이지에서 업로드한 글 확인 중

에디터에서 작성한 글은 <p>태그로 들어간다는것을 확인했고

그 결과 th:text="${}"로 출력을 해주면 태그가 달린 그상태 그대로 출력이 되는것을 확인했다.

그래서 th:utex="${}"로 변경해서 에디터에서 작성한 그대로 출력이 되도록 수정.

에디터 적용 중 사진 업로드를 하면 사진을 업로드할 서버 URL셋팅이 필요하다는 에러가 발생했다.

해결은 controller에서 다중파일 업로드를 담당하는 multiplePhotoUpload 내의

filePath를 내가 지정한 경로로 제대로 설정해 주지 않았기 때문에 발생했다.

경로를 /resources/photoUpload/로 설정하고

아래 sb.append에서 .append("http://localhost:8080/.......").append(saveName);

이 부분의 경로를 잡아주었다.

이제 사진 업로드를 누르면 프로젝트 내의 지정 폴더로 이미지가 잡히지만

에디터 미리보기에서는 엑박이 발생했다.....

인텔리제이에서 th:text="${list.bno} 로 에러발생.

An error happened during template parsing

라는 에러가 발생했고 해결방법은

인텔리제이 setting에서

*thy를 검색 후

Editor 밑의 Inspections로 들어가서 안에 모든 체크를 해제.

그렇게 하니까 밑줄도 사라지고 뷰도 출력됨.

중요한건

에러 다시 확인하려고 다시 체크하고 돌렸으나 그대로 출력.

설정문제인듯....

질문게시판 list에서 테이블 row를 눌렀을 때 에러.

tr에 onclick을 주고 이동하길 원했으나 누르면 bno값이 NumberFormatException이 발생하며 이동 불가능.

<tr th:onclick="location.href="'/detail/${board.bno}/'">

이렇게 작성했으나 bno값이 원래는 int이고 넘어가는 값은 string이라서 받아주질 못했음.

jsp에서는 넘겨줄때 자동으로 변환되기때문에 가능하다고 함.

지금은 thymeleaf로 변경중이라 html을 사용해야해서 다시 하고 있는데 html에서는 안되는듯.

html에서는 보통은 script로 bno값을 보내주고 script내에서 해결한다고 함.

일단 한번에 할 수 있는 방법도 있을 것 같아서 강사님과 찾아본 결과

<tr th:onclick="'location.href=\''+@{/detail/{bno}(bno=${board.bno})}+'\''">

이렇게 작성해서 해결.

문제없이 이동하며 detail페이지에서도 값을 정상적으로 받아와서 출력.

intelli J 내에서는 @에 붉은색 밑줄이 생기며 위와 같은 에러메시지가 뜨지만

콘솔이나 작동면에서는 문제가 없음.

이것 외에는 다른것은 script로 보내는 방법 써볼 예정.

에디터 적용 안됨.

강사님 카페에서 작년에 해두셨던 타임리프 적용과 jsp적용 샘플 받아서 실행해보니 실행가능.

현재 다른점이 없어서 찾아봐야함.

어딘가 변경하셨던것 같다고 하시는데

일단 view단이랑 husky, 2Skin은 동일.

th:text

  태그안에 들어가는 텍스트값.

<span th:text="${evenFvrDtl.winRnkg}"></span>

th:if, th:unless, th:value

th:if 는 if, th:unless 는 else표현.

th:value는 태그안의 value이다.

<th:block th:if="${evenPtcpPsbOrdData != null && #lists.size(evenPtcpPsbOrdData.eventPtcpOrdInfoList) > 0}">
  <input type="hidden" id="ibx_TotalPurAplAmt" th:value="${totalPurAplAmt}"/>
</th:block>
<th:block th:unless=${eventPtcpPsbOrdData != null && #lists.size(eventPtcpPsbOrdData.eventPtcpOrdInfoList) > 0}">
  <input type="hidden" id="ibx_TotalPruAplAmt" value="0"/>
</th:block>

th:utext(unescaped text)

<div></div>같은 태그 형식의 코드를 삽입하고 싶을 때 사용

태그 형식의 텍스트 들어올 시 태그로 인식

<!-- HTML 컨텐츠 영역 -->
<th:block th:utext="${#camaignUtils.unescapeHtml(eventDispTempleteInfo.htmlContents)}"></th:block>

th:with

변수 형태의 값을 재정의 한 것.

stnmZipNo의 변수를 값이 있다면 정의하고 없다면 공백으로 정의.

<th:block th:with="stnmZipNo=${#strings.defaultString(ecCustInfo.stnmZipNo, '')}">
</th:block>

th:switch, th:case

switch case문과 같다.

fvrDvsCd값이 이럴때 case1, case2로 빠지고

그 외의 것은 th:case=*로 빠지게 된다.

<div th:switch="${eventFvrDtl.fvrDvsCd}" class="coupon_gift">
  <p th:case="${#foConstants.FVR_DVS_CD_DISCOUNT}" class="cp cptype02">
    <th:block th:switch="${fvrKnd2Cd}">
      <span th:case="${#foConstants.FVR_KND2_CD_FREE_DLV_CPN}" th:text="${fvrKnd2CdNm}" class="tx"></span>
      <span th:case="*" class="tx">
        <th:block th:text="${fvrKnd2CdNm}"></th:block>
      <span>
    <th:block>
  </p>
  <p th:case="${#foConstants.FVR_DVS_CD_ACCUMULATION}" class="cp cptype02">
    <span class="ty" th:text="${fvrKnd2CdNm}"></span>
    <span class="tx" th:text="${#numbers.formatInteger(eventFvrDtl.fvrDtlCnts, 3, 'COMMA')}"></span>
  </p>
  <p th:case="*" class="cp cptype02">
    <span class="tx" th:text="${eventFvrDtl.fvrDtlCnts}"></span>
  </p>
</div>

th:fragment

include와 비슷하다.

특정 영역을 가져와서 나타낼 수 있다.

예를 들어 페이지마다 각각의 게시판을 가지고 싶은 경우

포함하는 곳.

ex)eventPage1.html

<th:block th:if="$#lists.size(eventDispTemplateCornerList)} > 0" th:each="eventDispTemplateCorner : ${eventDispTemplateCornerList}">
  <!-- 이벤트 템플릿 코너 -->
  <th:block th:include="${eventDispTemplateCorner.cmpnTmplFileUrl} :: corner (${eventDispTemplateCorner.cmpnNo}, ${eventDate.eventBaseInfo.eventPtcpPsbYn})"></th:block>
</th:block>

받는곳

ex)board.html

<th:block th:fragment="corner (cmpnNo, eventPtcpPsbYn)">
  <div class="content_title noline">
    <p class="title">게시판</p>
  </div>
</th:block>

controller를 거쳐 화면으로 가져온 데이터를 스트립트로 제어할 때

//controller
ModelAndView mv;
mv.addObject("eventData", eventData);
return mv

//controller를 거쳐 화면으로 가져온 데이터를 스크립트로 제어할 때
var data1 = [[${eventData}]];
var eventPtcpPsbYn = [[${#strings.defaultString(eventData.eventBaseInfo.eventPtcpPsbYn, 'Y')}]];

태그안의 attribute를 타임리프로 정의할 때

//태그안의 attribute를 타임리프로 정의할 때
<div id="myDiv1" th:attr="usemap=|#E_${eventDate.eventBaseInfo.cmpnNo}|">
</div>

//정의된 결과
<div id="myDiv1" usemap="#E_21082">
</div>

출처 : https://shlee0882.tistory.com/134