length가 1이상일 경우 객체가 존재함을, 0일 경우 존재하지 않음을 의미한다.

if(jQuery("#specialistAnswer").length > 0) {
jQuery("#specialistAnswer").val("Y");
}


Posted by SungHoon, Park
,

IE 브라우저에서는 정말 예외케이스가 많은 것 같다.

IE에서 GET 방식으로 jQuery.ajax() 요청을 할 경우 같은 URL에 대해 캐싱(caching)이 먹어 응답결과가 갱신되어 넘어오지 않는 문제가 있다.


이를 해결하기 위해서 다음과 같은 방법으로 코드를 변경해주면 된다.


1. cache:false 옵션 활용

1) ajaxSetup() 함수로 cache:false 값을 global하게 설정한다.

- 제일 깔끔한 방법. 추천!

- 공통 JSP 등에 아래와 같이 설정을 하게 되면 매번 ajax 호출시마다 설정하는 번거로움을 피할 수 있다.

<script type="text/javascript">
jQuery.ajaxSetup({
cache: false
});
</script>

2) 1회성일 경우 ajax 호출시 cache:false값을 설정해주면 된다.

<script type="text/javascript">
jQuery.ajax({
url:"http://www.naver.com",
cache: false,
dataType: "json",
success: function (result) {},
error: function () {}
});
</script>

2. new Date()로 URL에 TIMESTAMP값 추가하기

- 다른 URL로 인식할 수 있도록 가변적인 TIMESTAMP값을 넣어준다.

<script type="text/javascript">
jQuery.ajax({
url:"http://www.naver.com?t=" + new Date().getTime(),
dataType: "json",
success: function (result) {},
error: function () {}
});
</script>


Posted by SungHoon, Park
,

제이쿼리 함수중 html(), append() 등을 통해 HTML에 값을 설정할 경우 XSS에 대해 주의하여야 한다.


아래의 코드는 XSS 공격에 취약하다.

html() 함수는 XSS 공격에 대해 unsafe하기 때문이다.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var xss = "<script>alert(1);</script>";
jQuery("#testDiv").html(xss);
}
</script>
</head>
<body>
<div id="testDiv"></div>
<a href="#" onclick="test(); return false;">test</a>
</body>
</html>

XSS에 대해 안전하지 못한 제이쿼리 함수는 다음과 같다.

  • $("html source")
  • .html()
  • .append*()
  • .insert*()
  • .prepend*()
  • .wrap*()
  • .before()
  • .after()

반면, XSS 공격에 대해 안전하게 사용할 수 있는 함수 역시 존재한다.

  • .text()
  • .attr()
  • .prop()
  • .val()
따라서 에디터를 통해 입력받은 내용 등을 제이쿼리로 셋팅할 때는 .html()보단 .text() 함수가 더 적절하다.
단, .attr() 함수의 경우는 href 속성을 설정할 때는 XSS safe가 보장되지 않으므로 주의하여야 한다.


참고문헌

https://coderwall.com/p/h5lqla/safe-vs-unsafe-jquery-methods

Posted by SungHoon, Park
,

제이쿼리 캘린더를 사용할 경우 특정기간 이후 또는 특정기간 이내까지를 설정해야 될 경우가 있다.

(오늘부터 1주일내, 1달이내 등..)

 

datepicker 함수를 통해 초기화 할때 아래와 같이 설정하면 된다.

jQuery(document).ready(function () {
var minDate = new Date();
var maxDate = new Date();
var dd = maxDate.getDate() + 7;
maxDate.setDate(dd);

jQuery("#startDate").datepicker({
minDate : minDate,
maxDate : maxDate
});
});

 

옵션을 통해서 아래와 같이 추가설정도 가능하다.

가령, 공통으로 설정된 캘린더가 include 되어있는 상태이고, 특정 화면에서만 날짜제한을 주고 싶을 때 아래와 같이 사용할 수 있다.

jQuery(document).ready(function () {
var minDate = new Date();

jQuery("#startDate").datepicker("option", "minDate", minDate);
});


Posted by SungHoon, Park
,