<button>을 통해 <script>영역으로 값을 전달

프로젝트를 진행하던 도중 또 다른 문제가 발생했다.

<button th:attr="onclick='bookmarkBook(\''
        + ${book.bookTitle} + '\', \''
        + ${book.bookAuth} + '\', \''
        + ${book.bookPub} + '\', \''
        + ${book.bookPubYear} + '\', \''
        + ${#strings.length(book.des) > 0 ? #strings.substring(book.des, 0, (book.des.length() > 400 ? 400 : book.des.length())) + (book.des.length() > 400 ? '...' : '') : ''} + '\', \''
        + ${book.discount} + '\', \''
        + ${book.ISBN} + '\', \''
        + ${book.img} + '\')'">북마크
</button>

위의 코드와 같이 button을 눌렀을 때 인자값을 <script>영역으로 넘겨주려다가 book.des에 ' '나 ()등 특수기호들이 들어가 스크립트가 정상적으로 작동되지 않았다.

 

후에 인터넷 서핑 및 서적을 통해 찾아보니 위와 같이 버튼에 직접적으로 인자를 넘겨주는 행위가 보안면에서 좋은 방법은 아니라는걸 알게됐다(...)

<button th:data-title="${book.bookTitle}"
        th:data-auth="${book.bookAuth}"
        th:data-pub="${book.bookPub}"
        th:data-pubyear="${book.bookPubYear}"
        th:data-des="${book.des != null and book.des.length() > 0 ? #strings.substring(book.des, 0, (book.des.length() > 100 ? 100 : book.des.length())) + (book.des.length() > 100 ? '...' : '') : ''}"
        th:data-discount="${book.discount}"
        th:data-isbn="${book.ISBN}"
        th:data-img="${book.img}"
        onclick="bookmarkBook(this)">북마크
</button>

다른 사이트를 참고해, 위의 코드와 같이 data속성을 저장하여 script로 전달해주는 방법으로 변경했다.