크로스 도메인 무엇이 문제일까요? 문제점 부터 알아보죠.

문제점

Javascript로 개발하다보면 자주 부딪히는 문제가 cross domain 문제입니다.
AJAX 호출을 필요로 하는 기능에서 보안상 이유로 동일 서버 이외에는 막혀버립니다.

자바스크립트(Javascript) 보안 정책 중에 하나인 동일근원정책(Same-Origin Policy) 정책에 걸리는 부분이 바로 크로스 도메인을 할때 일어납니다.

다시 말하면 서로 다른 도메인에서 자바스크립트로 접근하려 했을 때 혹은 다른 서버에 Ajax통신의 결과를 받을 때 보안상 접근을 거부합니다.

다시 말해 샌드박스(SandBox) 정책입니다

해결책 1. document.domain 방법 - 서버도메인인 경우에만 사용 가능

이방법은 서브 도메인이 다를 경우 사용하는 방법입니다.

http://A.naver.com -> http://B.naver.com 호출 : 서브도메인이 달라서 접근거부
 
이 두 주소를 보면 공통인 부분이 존재합니다.
바로 이 부분을 이용해서 크로스 도메인을 해결 하려면

document.domain = "naver.com";
 
이렇게 스크립트에 넣어주면 됩니다.

해결책 2. Cross domain proxy - 가장 일반적인 접근방법

A서버 -> B서버 호출 : 도메인이 달라서 접근거부

Javascript에서 동일 서버의 URL을 호출하고,
이 URL에서 내부적으로 다른 도메인의 URL을 호출하는 것이다.

crossdomain.xml과 clientaccesspolicy.xml 파일은 아시다시피,
크로스 도메인 접근을 가능 여부를 설정하는 파일입니다.
crossdomain.xml : 일반

clientaccesspolicy.xml : 실버라이트용



이방법엔 잇점이 있다.
이 방법은 호출하는 전체 생명주기를 제어할 수 있습니다.
클라이언트에게 반환하기 전 뭔가 처리할 게 있으면 원격 서버에서 받은 데이터를 파싱할 수도 있습니다.
뭔가 에러가 발생하면 원하는 방법으로 에러를 처리할 수도 있습니다.
마지막으로 모든 원격 호출에 대해 로깅을 할 수도 있습니다.
이것으로 성공, 실패 그리고 호출빈도를 추적할 수도 있습니다.

해결책 3. Flash를 이용한 cross domain

플래쉬를 이용하는 방법입니다.

서버에 xml 설정 파일이 추가되어지고 클라이언트 단에서 flash파일이 필요합니다.
Flash를 사용하면 get/post 모든 메소드 방법을 사용 할 수 있고 크로스 도메인 문제가 생기지 않습니다.
하지만 말그대로 Flash를 사용해야 되고 Flash가 동작하지 않은 환경에서는 동작을 하지 못합니다.

해결책 4. Cross domain JSON

현재 페이지의 스크립트에서 다른 서버로 Ajax 호출을 시도하는 것은 허용되지 않습니다. 이것을 cross domain JSON을 이용하여 해결할 수 있습니다.

JSONP(JSON with Padding)를 사용합니다.
간단히 원리를 설명하면
우선 동적으로 script 태그를 생성하고 src부분에 호출할 서버 주소와 파라미터를 붙여서 넣고 document.body에 DOM메소드를 사용하여 append한다. 그렇게 하면 서버에 리퀘스트(요청)를 보내고 되고 서버는 리스판스(응답)를 하게 됩니다.
그리고 그 응답은 아래와 같은 문자열을 출력합니다.

    callback_function_name({name:"test"})

위와 같이 굵은 글씨가 바로 서버로 요청한 주소에 붙은 파라미터 값.
이것은 함수 이름으로 로드되면서 실행되게 한다. 이 함수가 넘겨받은 인자를 객체로 생성하고 지정된 콜백함수에 생성된 객체를 파라미터로 호출한다. 물론 마지막에는 붙인 script 태그는 제거한다..
 
단 get 메소드 밖에 사용할 수가 없다. 주소로 요청을 보내기 때문입니다..
이는 파라미터가 많으면 보낼수가 없다는 얘기입니다.

Cross domain JSON 자세히 알기

1. JSON -
직접 만들어본 예제 소스입니다.


JSON은 XML에 비해 브라우저와 서버 간의 정보 교환에 사용되는 경량 데이터 형식이다. JSON은 이름에서 알 수 있듯이 JavaScript 오브젝트의 문자열 표현이다. (이 사실을 간과하는 JavaScript 개발자들이 없기를 바란다.) 예를 들어, symbol과 price라는 두 속성을 가진 ticker 오브젝트가 있다고 가정해 보자. JavaScript에서는 다음과 같이 ticker 오브젝트를 정의할 수 있다.

var ticker = {symbol: 'IBM', price: 91.42};
다음은 동일한 정의를 JSON으로 표현한 것이다
{symbol: 'IBM', price: 91.42}
JSON과 JSON을 데이터 교환 형식으로 사용할 수 있는 가능성에 대한 자세한 정보는 참고자료에서 볼 수 있다. Listing 1에서는 호출되었을 때 IBM 주가를 보여 주는 JavaScript 함수를 정의한다. (이 기사에서는 코드를 웹 페이지에 통합하는 방법에 대한 상세 설명을 제공하지 않는다.)

Listing 1. showPrice 함수 정의하기
function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
JSON 데이터를 매개변수로 전달하여 이 함수를 호출할 수 있다
showPrice({symbol: 'IBM', price: 91.42}); // alerts: Symbol: IBM, Price: 91.42
이제 Listing 2처럼 이들 두 단계를 웹 페이지에 포함할 수 있는 준비가 완료되었다.

Listing 2. 웹 페이지에 showPrice 함수 및 매개변수 포함하기
<script type="text/javascript">
function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
</script>
<script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script>

페이지가 로드되면 그림 1과 같은 경고가 표시된다.


그림 1. IBM 티커
IBM ticker

지금까지 이 기사에서는 정적 JSON 데이터를 매개변수로 사용하여 JavaScript 함수를 호출하는 방법을 살펴보았다. 하지만 함수 호출에서 JSON 데이터를 동적으로 랩핑하여 동적 데이터와 함께 함수를 호출할 수도 있다. 이를 동적 JavaScript 삽입 기술이라고 한다. 이 기술의 작동 방법을 확인하려면 ticker.js라는 독립형 JavaScript 파일에 다음 행을 입력해야 한다.

showPrice({symbol: 'IBM', price: 91.42});
이제 웹 페이지의 스크립트를 Listing 3의 코드처럼 변경한다.

Listing 3. 동적 JavaScript 삽입 코드
<script type="text/javascript">
// This is our function to be called with JSON data
function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
var url = “ticker.js”; // URL of the external script
// this shows dynamic script insertion
var script = document.createElement('script');
script.setAttribute('src', url);

// load the script
document.getElementsByTagName('head')[0].appendChild(script); 
</script>

Listing 3의 예제에서, ticker.js에 파일에 있는 동적으로 삽입된 JavaScript 코드는 실제 JSON 데이터를 매개변수로 사용하여 showPrice() 함수를 호출한다.

앞에서 설명한 대로 동일 출처 정책은 동적 스크립트 요소의 문서 내 삽입을 허용하기 때문에 다른 도메인의 JavaScript를 동적으로 삽입하여 JSON 데이터를 전달할 수 있다. 이처럼 함수 호출에 랩핑된 JSON 데이터를 JSONP(JSON with Padding)라고 한다. 이 작업을 수행하려면 코드를 삽입하기 전에 콜백 함수가 미리 정의되어 있어야 한다. 이 예제에서는 showPrice()가 콜백 함수이다.

그러나 JSONP 서비스(또는 원격 JSON 서비스)는 사용자 지정 함수 호출에서 리턴된 JSON 데이터에 대한 랩핑을 지원하는 추가 기능을 가진 웹 서비스이다. 따라서 이 방법을 사용하려면 원격 서비스에서 콜백 함수 이름을 요청 매개변수로 받아야 한다. 그런 다음 원격 서비스에서 JSON 데이터를 매개변수로 전달하는 이 함수에 대한 호출이 생성되면 이 함수가 클라이언트 측 웹 페이지에 삽입되어 바로 실행된다.


2. jQuery의 JSONP 지원 - 직접 만들어본 예제 소스입니다.


jQuery 버전 1.2부터는 JSONP 호출에 대한 네이티브 지원이 제공되고 있다. JSONP 콜백을 지정한 경우 다른 도메인에 있는 JSON 데이터를 로드할 수 있으며 JSONP 콜백은 url?callback=?라는 구문을 사용하여 지정할 수 있다.

jQuery에서는 ?가 호출할 생성된 함수 이름으로 자동 변환된다. Listing 4에서는 이 코드를 보여 준다.


Listing 4. JSONP 콜백 사용하기

jQuery.getJSON(url+"&callback=?", function(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
});

이를 위해 jQuery는 스크립트가 삽입될 때 호출되는 전역 함수를 창 오브젝트에 추가한다. 이 함수는 완료 후에 제거된다. jQuery는 도메인 내 호출에 대해서도 최적화 기능을 제공한다. 동일한 도메인에 대한 요청이 발생할 경우 jQuery는 해당 요청을 일반적인 Ajax 요청으로 변환한다.

JSONP 지원을 사용하는 예제 서비스

앞의 예제에서는 정적 파일(ticker.js)을 사용하여 JavaScript를 웹 페이지에 동적으로 삽입했다. JSONP 응답을 리턴하기는 하지만 URL에 콜백 함수 이름을 정의할 수 없었기 때문에 JSONP 서비스가 아니었다. 그렇다면 실제 JSONP 서비스로 변환하려면 어떻게 해야 할까? 이 기사에서는 여러 가지 방법 중에서 PHP와 Java를 사용하는 두 가지 예제를 설명한다.

먼저 서비스에서 요청 URL에 포함된 callback 매개변수를 허용한다고 가정하자. (매개변수 이름 자체는 중요하지 않지만 클라이언트와 서버에서 동일한 이름을 사용해야 한다.) 그리고 서비스에 대한 요청이 다음과 같다고 가정하자.

jQuery.getJSON("http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=?", 
function(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
});

이 코드에서는 실제 함수 이름 대신 ? 기호를 콜백 함수 이름으로 입력했다. 이는 jQuery가 ? 기호를 인라인 함수를 호출하는 생성된 함수 이름(예: jsonp1232617941775)으로 바꾸기 때문이다. 이 기능을 활용하면 showPrice()와 같은 함수를 자유롭게 정의할 수 있다.

Listing 6에서는 PHP로 구현한 JSONP 서비스의 일부를 보여 준다.


Listing 6. PHP로 구현한 JSONP 서비스의 일부
$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"});
Listing 7에서는 동일한 기능을 수행하는 Java™ Servlet 메소드를 보여 준다.



설정

트랙백

댓글

개발자 여러분 방가워요

팝업창 하루만 띄우기 어렵지 않아요. 10분만 투자하시면 금방 하실수 있어요.

다들 알고 있지만 왜 그런지 쏙쏙 들이 분석해 보아요~~~

cookie의 기본원리

Set-Cookie 구조 :

name=Value;expires=DAT;path=PATH domain=DOMAIN_NAME;secure

 

name=Value - 쿠키의 이름으로서 반드시 지정해야 한다. 이름에 세미콜론(;), 쉼표(,), 빈칸이 들어가면 안됨

expires=DATE - 쿠키가 종료되는 날짜를 지정한다. 만약 잘짜가 생략되면 현재 넷스케이프 세션 동안에만 유효하게 된다.
                       날짜 형식 : Wdy, DD-Mon-YY HH:MM:SS GMT

                      * Wdy : a string representing the full name of the day of the week
                      * DD : an integer representing the day of the month
                      * Mon : a string representing the three-character abbreviation of the month
                      * YY : an interger representing the last two digits of the year
                      * HH, MM, SS : 2-digit representations of hours, minutes, ank seconds respectively.

path=PATH - 쿠키가 유효하게 사용될 수 있는 url 주소의 디렉토리 부분을 지정한다. 만약 지정되지 않는다면 쿠키를 설정한 문서 위치가 사용된다.

domain=DOMAIN_NAME - 쿠키가 유효하게 사용될 수 있는 url 주소의 도메인 부분을 지정하나. DOMAIN_NAME은 적어도 두개의 점으로 연결된 세개의

                                     단어로 이루어져야 하다.(예: NET-IN.CO.KR) 만약 지정되지 않는다면 쿠키를 설정한 문서 위치의 도매인이 사용된다.

secure - 데이터 전송에 보안이 요구되는지를 지정한다.(예:ssl프로토콜을 사용하는 HTTP인 HTTPS) 만약 필요하면 SECURE라는 키워드를 쓰면 된다.




소스 기본원리

1. 하루만 보기를 클릭 -> 클릭시 쿠키에 현재 경로다시시작할 시간을 담는다.
2. 해당페이지에 왔을때 현재 시간과 쿠키시간을 비교 하여 시작시간이 되지 않았으면 띄우지 않는다.

소스 1. ( 클릭시 쿠키에 값 저장 )

1 .function setCookie( name, value) {
2.            var todayDate = new Date();
3.            todayDate.setHours( 24 );
4.            document.cookie = name + "=" + escape( value ) + "; path=/; expires=" +   todayDate.toGMTString() + ";";
}


소스 1. 분석

클릭시 쿠키에 값을 저장하는 함수입니다.


첫줄    : name:쿠키명 , value:쿠키값
둘째줄 :  var todayDate = new Date();  - 현재의 년월일 시분초를 가져옵니다.
세째줄 :  쿠키저장시간 셋팅
네째줄
:  쿠키값을 만들어 준다.
              name=쿠키명,
              value=쿠키값,
              path=경로,
              expires=쿠키가 종료되는 날짜


직접 돌리면서 알아볼수 있게 간단한 예제 한번 구현해 봤습니다.
한번 직접 브라우져에서 돌아가는걸 보면서 소스 분석을 해보시면 더 이뻐 ~~~ 어렵지 않아요 .
치기 힘들면 가져가서 테스트 해도 되요. ㅋㅋㅋ 그럼 즐프(즐거운 프로그램) 되세요 .


<예제>
<html>
 <head>
    <script language="javascript">
    // === 쿠키값 가져오기 ===
    function getCookie(name) {
      var Found = false
      var start, end
      var i = 0
    
      while(i <= document.cookie.length) {
        start = i
        end = start + name.length
    
        if(document.cookie.substring(start, end) == name) {
          Found = true
          break
        }
        i++
      }
    
      if(Found == true) {
        start = end + 1
        end = document.cookie.indexOf(";", start)
          if(end < start)
            end = document.cookie.length
        return document.cookie.substring(start, end)
      }
      return ""
    }

    // === 팝업띄우기 가져오기 ===
    function openPopup()
    {
        var noticeCookie=getCookie("popup");  // 쿠키변수 이름
        if (noticeCookie != "no"){
            window.open('http://naver.com','pop1','width=350,height=400,top=50,left=150');
        }else{
            alert('아직 쿠키가 걸려있습니다.')
        }
        // window.open('팝업창 웹페이지','윈도우명','width=350,height=400,top=50,left=150');
    }

    // === 쿠키값 저장하기===
    function setCookie(name, value) {
        var todayDate = new Date();
        todayDate.setHours( 24 );
        document.cookie = name + "=" + escape( value ) + "; path=/; expires=" +   todayDate.toGMTString() + ";";
    }

    </script>
 </head>

 <body>
  <a href="javascript:openPopup()">팝업 띄우기</a>
  <a href="javascript:setCookie('popup', 'no')">24시간동안 안띄우기</a>
 </body>
</html>

설정

트랙백

댓글

PHP 날짜관련함수 - date()


<?
$today = date("F j, Y, g:i a");                 // March 10, 2001, 5:16 pm
$today = date("m.d.y");                        
// 03.10.01
$today = date("j, n, Y");                      
// 10, 3, 2001
$today = date("Ymd");                          
// 20010310
$today = date('h-i-s, j-m-y, it is w Day z ');  
// 05-16-17, 10-03-01, 1631 1618 6 Fripm01
$today = date('\i\t \i\s \t\h\e jS \d\a\y.');  
// It is the 10th day.
$today = date("D M j G:i:s T Y");              
// Sat Mar 10 15:16:08 MST 2001
$today = date('H:m:s \m \i\s\ \m\o\n\t\h');    
// 17:03:17 m is month
$today = date("H:i:s");                        
// 17:16:17
?>


PHP 날짜 함수 정리

 

 

* 전일 구하기


-오늘부터 5일후

date("Y-m-d",strtotime("+5 day"));


-오늘로부터 3일전
echo date("Y-m-d",strtotime("-3 day"));


-오늘로부터 6주 전

$calyoil = 5 - date("w"); //현재 요일에서 금요일을 구하기 위한 가감
$needday = strtotime("-6 week"); // 6
주전
$needday = date("Y-m-d" , strtotime("$calyoil days",$needday));

-윤년

if(29==date(t,mktime(0,0,0,2,1,$year))
echo "
윤년";
else echo "
윤년아님";

 

--mktime(,,,,,년도)--

 

-그 달의 마지막 날짜  가지고 오기

$lastday = date(t,mktime(0,0,1,$month,1,$year));

 

-금주의 시작일 구하기

$now=date("w");

$m=$now-1;

$start=date("Y-n-d",strtotime("-$m day"));





JavaScript 날짜 함수
 


Month ( 0 ~ 11까지 정의 된다 )  현재월을 표시하려면 month -1 하여라 ..

 

날짜 객체  생성  var today = new Date( , , ) ;

날짜 년 가지고 오기 today.getYear();

날짜 월 가지고 오기 today.getMonth();  ( 현재월 가지고 올경우  +1 )

날짜 일 가지고 오기 today.getDate();  (day 가 아니 getDate 이다)

날짜 월 짜리수 맞추기 위한 if = parseInt() < 10 ? - + parseInt() : parseInt();



Mysql 날짜 함수

 

Mysql 날짜 함수

select date_sub(now(), interval 5 day);
5
일후..
select date_add(now(), interval 5 day);
5
일전...


설정

트랙백

댓글

출처 : http://cafe.naver.com/websparty


1. 모바일로 접속시 모바일 사이트 이동

 
<script type="text/javascript">
 var mobileKeyWords = new Array('iPhone', 'iPad', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson', 'Opera Mini', 'Microsoft Windows', 'Opera Modi');
 for (var word in mobileKeyWords){ 
 if (navigator.userAgent.match(mobileKeyWords[word]) != null){
 location.href = "http://모바일페이지 경로/";
 break;
 }  
 }
</script>




2. 모바일 접속과 데스크탑 접속에서 배경 이미지 다르게 하기

 <HEAD> </HEAD> 사이에

<script type="text/javascript">

  var veros = navigator.platform;
function mywin()   {

if (veros.indexOf("Mac") > -1 || veros.indexOf("Win") > -1){
 window.document.body.style.cssText = "BACKGROUND-POSITION: left top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(a.jpg); BACKGROUND-REPEAT: no-repeat";

 }else{

 window.document.body.style.cssText = "BACKGROUND-POSITION: left top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(b.jpg); BACKGROUND-REPEAT: no-repeat";
 }
}
</script>

넣고,  </BODY> 뒤에  <script type="text/javascript">mywin()</script> 하시면 됩니다.


 

설정

트랙백

댓글