HTTP 헤더 토큰 가져 오기

Question

저는 프로젝트에서 일하고 있으며 지금까지 해결할 수 없었던 문제를 보았습니다.

프로젝트는 jquery 모바일 프레임 워크를 사용하여 빌드 된 모바일 웹 응용 프로그램입니다. 웹 응용 프로그램은 wcf 서비스에서 json을 가져 와서 jquery mobile UI 효과를 사용하여 렌더링 할 수 있습니다. 우리는 나의 문제가있는 토큰 기반 보안을 구현하는 단계에 도달했습니다. 지금은 다른 모든 Ajax 요청에 사용할 사용자 지정 HTTP 헤더를 추가하려고합니다.

function login_service() 
{ 
    //$.mobile.pageLoading(); 
    var stringUsername = $('#txtUsername').val(); 
    var stringPassword = $('#txtPassword').val(); 
    $('#loginMessage').empty(); // Empty message div   
$.ajax(
    { 
     url: "urlstring"+stringUsername+"/"+stringPassword, // This URL uses https 
     dataType: "jsonp", 
     type: 'GET', 
     beforeSend: setHeader, 
     success: function(loginResult) 
     { 
      $('#loginMessage').html('<a>'+ loginResult.tkt + '</a>'); 
      tkn = loginResult.tkt; // Json token 
      if(tkn == null) 
      { 
      $('#loginMessage').append("invalid login:" + '&nbsp;' + '<br>' + "token:" + '&nbsp;' + tkn); 
      $.mobile.pageLoading(true); 
      } 
      else 
      { 
       $.mobile.changePage('#search'); // Change page to search screen 
      } 

     }, 
     error: function(status) 
     { 
      alert(status); 
      $.mobile.pageLoading(true); // End loading animation 
     } 
    }) 
} 

function setHeader(xhr) 
{     
    xhr.setRequestHeader('Authorization', tkn); 
    alert("header set");    
} 

function doSearch_webservice(){ // Start of function webservice 
$.ajax({ // Start of ajax call 
url: "urlstring"+$('#jsonSearch').val(), // If URL string is http, custom header will 
     // be displayed in fiddler/firebug. IF HTTPS custom header won't work. 
dataType: 'jsonp', 
type: 'GET', 
timeout: '20000', 
beforeSend: setHeader, 
success: function(json_results) 
    {// Start of success function 
     if(json_results.keys == null) 
      { 
       $('#errMessage').html('<p class="error"><strong>'+ "Status:" 
       + "No record found" + "<br>Please try again" +'</strong> </p>');  
       $.mobile.pageLoading(true); 
      } 
     else 
      { 

       $('#jsonResponse ul').remove(); 
       // jquery mobile type i.e. data-inset 
       $('#jsonResponse').append('<ul class="listItems" data-role="listview" data-inset="true"></ul>'); 
       var listItems = $('#jsonResponse').find('ul'); 
       $.each(json_results.keys, function(key) { // Start of each loop 

       html= 
       '<a href="#" data-transition="slide" data-position="inline"OnClick="passQryStrg(\''+json_results.keys[key].id+'\' , \''+json_results.keys[key].cat+'\');">'+'<br>'+' '+'<font class="big-text"><b>'+' '+json_results.keys[key].lbl[0]+' '+'</font></b>'+' '+'<font class="small-text">'+' '+'<br>'+' '+json_results.keys[key].lbl[1]+' '+'</font>'+'</a>' 

       listItems.append('<li>'+html+'</li>'); 
       }); // End of each loop 
      $('#info jsonResponse ul').listview(); 
      $.mobile.pageLoading(true); 
      $.mobile.changePage("#info", { transition: "slide"}); 
      $("#info").page("destroy").page(); 
      } 
       // Destroy the page - next function call won't break css 
     }, // End of success function 
     error: function(jqXHR, textStatus, errorThrown) 
      { 
       $('#errMessage').html('<p class="error"><strong>'+ "Status:" + textStatus + "<br>Please try again" +'</strong> </p>'); 
       $.mobile.pageLoading(true); 
       } 
      }); // End of ajax call 
}; // Emd of webservice function 

요약 : do_search 아약스 요청이 HTTP URL을 사용하는 경우 나는 사용자 정의 헤더를 추가 할 수 있습니다. 그러나 우리의 wcf 서비스가 사용하는 https로 URL을 변경해야합니다. 이 변경을하면 사용자 정의 헤더가 작동을 멈 춥니 다. 죄송합니다. 설명이 명확하지 않은 경우 최선을 다해 답변 해 드리겠습니다.

감사

Answer 1

내가 가지고있는 문제를 해결했다.

xmlHttpRequest 개체를 사용하여 사용자 지정 HTTP 요청 헤더를 만드는 경우. 또는 jquery, ajax 요청을 사용하고 있기 때문에 제 경우에는 가능합니다. 요청을하는 웹 페이지와 요청 자체는 동일한 프로토콜을 사용하는 URL을 사용해야합니다. 예 : https. 웹 페이지에 http url이 있고 https로 아약스 요청을하면이 기능이 작동하지 않습니다.

http://www.w3.org/Security/wiki/Same_Origin_Policy에 정의 된 것과 같은 원산지 정책이 허용하지 않기 때문입니다. 보안 취약점으로부터 웹 사이트를 보호하는 것입니다. 이러한 보안이 없으면 스크립트가 웹 사이트의 취약점을 악용 할 수 있습니다.

이렇게하면이 특정 문제에 얽매이지 않는 사람에게 도움이되기를 바랍니다.

Answer 2

당신은 jQuery.ajax()의 headers 옵션을 사용해야합니다.

$('...').ajax(function() { 
    url: ... , 
    data: ... , 
    headers: { 
    'Authorization': tkn 
    } 
}); 

당신 JSON 토큰 경우 :

추가 헤더 키/값 쌍의지도는

그래서 당신은 당신의 헤더를 전달하는 데이 방법이 필요합니다 요청과 함께 보내 문자열입니다. 이전에 jQuery.parseJSON()으로 변환하십시오.

var tkn = $.parseJSON(tokenString);