복붙노트

[SCALA] CSRF 폼에 대한 AJAX POST 요청에 토큰에 따라 어떻게 전달하는 방법?

SCALA

CSRF 폼에 대한 AJAX POST 요청에 토큰에 따라 어떻게 전달하는 방법?

나는 스칼라 재생을 사용하고 있습니다! 2.6 프레임 워크는, 그러나 그것은 문제가되지 않을 수 있습니다. 나는 그들의 자바 스크립트가 라우팅을 사용하고 있습니다 - 그리고 작업 확인을 보인다,하지만 문제가 있어요. 나는 렌더링 할 때이 CSRF 토큰이 생산 양식을 가지고 :

<form method="post" id="myForm" action="someURL">

<input name="csrfToken" value="5965f0d244b7d32b334eff840...etc" type="hidden">
  <input type="text" id="sometext">
  <button type="submit"> Submit! </button>

</form>

그리고 여기, 대략 내 AJAX입니다 :

$(document).on('submit', '#myForm', function (event) {

 event.preventDefault();
   var data = {
    textvalue: $('#sometext').val()
   }
 var route = jsRoutes.controllers.DashboardController.postNewProject()
 $.ajax({
    url: route.url,
    type: route.type,
    data : JSON.stringify(data),
    contentType : 'application/json',
    success: function (data) { ...      },
    error: function (data) { ...  }
        })

});

나는이를 게시 할 때, 나는 내 서버에서 인증되지 않은 응답 등을 얻고, 그리고 IntelliJ를 내 콘솔은 나에게 검사가 실패하는 CSRF을 말하고있다. 어떻게 요청에 토큰 CSRF를 전달할 것인가?

해결법

  1. ==============================

    1.좋아, 몇 시간 동안이 싸움과 주제에 해독 Play의 자주 부족-상황에 문서를 시도한 후, 나는 그것을 가지고있다.

    좋아, 몇 시간 동안이 싸움과 주제에 해독 Play의 자주 부족-상황에 문서를 시도한 후, 나는 그것을 가지고있다.

    그래서, 자신의 문서에서 :

    그리고 아무 코드 나 예제는 없다. 덕분에 재생합니다. 아주 설명. 어쨌든, 여기 방법은 다음과 같습니다

    당신의 view.html.formTemplate에 당신은 인 IntelliJ에서 작성할 수 있습니다 :

    @()
<form method="post" id="myForm" action="someURL">

@helper.CSRF.formField  <!-- This auto-generates a token for you -->
  <input type="text" id="sometext">
  <button type="submit"> Submit! </button>

</form>

    클라이언트에 전달했을 때이 같은 렌더링 :

    <form method="post" id="myForm" action="someURL">

<input name="csrfToken" value="5965f0d244b7d32b334eff840...etc" type="hidden">
  <input type="text" id="sometext">
  <button type="submit"> Submit! </button>

</form>

    좋아, 거의, 지금 우리는 우리의 AJAX 호출을 만들어야합니다. 나는 별도의 main.js 파일에 내 전부를 가지고 있지만, 당신이 원한다면 당신은 또한 당신의 view.html.form 템플릿에 넣고 있었다.

    $(document).on('submit', '#myForm', function (event) {

 event.preventDefault();
   var data = {
    myTextToPass: $('#sometext').val()
   }
 // LOOK AT ME! BETWEEN HERE AND
 var token =  $('input[name="csrfToken"]').attr('value')
    $.ajaxSetup({
        beforeSend: function(xhr) {
            xhr.setRequestHeader('Csrf-Token', token);
        }
    });
// HERE
 var route = jsRoutes.controllers.DashboardController.postNewProject()
 $.ajax({
    url: route.url,
    type: route.type,
    data : JSON.stringify(data),
    contentType : 'application/json',
    success: function (data) { ...      },
    error: function (data) { ...  }
        })

});

    이 라인 : VAR 토큰 = $ ( '입력 [NAME = "csrfToken"]). ATTR ('값 ') 당신은 당신의 양식 필드에서 생성 된 CSRF 토큰 자동을 따 버릴하고 자바 스크립트에서 사용하는 VAR에 그 값을 잡고있다.

    모두에서 다른 중요한 덩어리는 AJAX 여기입니다 :

    $.ajaxSetup({
            beforeSend: function(xhr) {
                xhr.setRequestHeader('Csrf-Token', token);
            }
        });

    $ .ajaxSetup를 사용하여 헤더에 무엇을 설정할 수 있습니다. 이것은 당신이 자신의 문서에서 추론해야 할 것입니다 :

    행운을 빕니다! 이 명확한 경우 알려주세요.

    참고 : lusca를 사용하는 경우, 대신 CSRF 토큰의 사용 X-CSRF 토큰.

  2. ==============================

    2.헤더 이름에 대한 감사 NateH06! 나는이 아약스 함수를 호출 버튼을 "삭제"내가 다음에 부착 된 대한 CSRF 토큰을 보내려고했다 :

    헤더 이름에 대한 감사 NateH06! 나는이 아약스 함수를 호출 버튼을 "삭제"내가 다음에 부착 된 대한 CSRF 토큰을 보내려고했다 :

    @import helper._
....
<button id="deleteBookBtn" class="btn btn-danger"
        data-csrf-name="@helper.CSRF.getToken.name"
        data-csrf-value="@helper.CSRF.getToken.value"
        data-delete-url="@routes.BooksController.destroy(book.id)"
        data-redirect-url="@routes.HomeController.index()">Delete</button>

    저도 플레이 2.6에 때문에 CSP 세트의 OnClick () 이벤트 내에서 온라인 JS를 추가 할 수 없습니다.

    그리고 JS 파일에 :

    function sendDeleteRequest(event) {
  url = event.target.getAttribute("data-delete-url")
  redirect = event.target.getAttribute("data-redirect-url")
  csrfTokenName = event.target.getAttribute("data-csrf-name")
  csrfTokenValue = event.target.getAttribute("data-csrf-value")
  $.ajax({
    url: url,
    method: "DELETE",
    beforeSend: function(request) {
      //'Csrf-Token' is the expected header name, not $csrfTokenName
      request.setRequestHeader(/*$csrfTokenName*/'Csrf-Token', csrfTokenValue);
    },
    success: function() {
      window.location = redirect;
    },
    error: function() {
      window.location.reload();
    }
  })
}

var deleteBookBtn = document.getElementById("deleteBookBtn");
if(deleteBookBtn) {
    deleteBookBtn.addEventListener("click", sendDeleteRequest);
}

    'CSRF 토큰'AJAX 호출이 완벽하게 작동으로 헤더 이름을 설정 한 후!

  3. ==============================

    3.JSP에서

    JSP에서

    <form method="post" id="myForm" action="someURL">
    <input name="csrfToken" value="5965f0d244b7d32b334eff840...etc" type="hidden">    
</form>

    이것은 단지 다음과 같이 입력 숨겨진 필드에서 토큰을 얻을 그냥 필요에 AJAX 요청을하는 동안 다음과 같이 헤더에이 토큰을 전달하기 위해 3 시간을 위해 고군분투 한 후 나를 위해 일한 가장 간단한 방법입니다 -

    JQuery와에서

    var token =  $('input[name="csrfToken"]').attr('value');

    일반 자바 스크립트에서

    var token = document.getElementsByName("csrfToken").value;

    최종 AJAX 요청

    $.ajax({
      url: route.url,
      data : JSON.stringify(data),
      method : 'POST',
      headers: {
                    'X-CSRF-Token': token 
               },
      success: function (data) { ...      },
      error: function (data) { ...  }

    });

    지금 당신은 웹 설정에서 비활성화 CSRF 보안을 필요로하지 않으며,이 콘솔에 당신에게 405 (방법은 허용되지 않음) 오류를 제공하지 않습니다.

    이 의지 도움 사람들은 희망 .. !!

  4. ==============================

    4.당신은 헤더 옵션을 사용하여 CSRF 토큰 헤더를 추가 할 수 있습니다.

    당신은 헤더 옵션을 사용하여 CSRF 토큰 헤더를 추가 할 수 있습니다.

    $.ajax({
    url: '@routes.MyController.myPostAction()',
    method: 'post',
    headers: {
        'Csrf-Token': '@play.filters.csrf.CSRF.getToken.map(_.value)'
    },
    data: {
        name: '@name'
    },
    success: function (data, textStatus, jqXHR) {
        location.reload();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        debugger;
    }
});
  5. ==============================

    5.재생 프레임 워크 2.6 문서에 명시된 바와 같이, 당신은 재생에 의해 생성 된 토큰과 함께 'CSRF 토큰'헤더를 설정할 수 있습니다 :

    재생 프레임 워크 2.6 문서에 명시된 바와 같이, 당신은 재생에 의해 생성 된 토큰과 함께 'CSRF 토큰'헤더를 설정할 수 있습니다 :

    스칼라 - 템플릿 내에서 사용 토큰 값을 얻을 수 있습니다 @ helper.CSRF.getToken.value

    jQuerys 문서에 따라 당신도 jQuery를이 ajaxSetup를 사용하여 구성하여 모든 Ajax 요청에 대한 일단을 설정할 수 있습니다

    $.ajaxSetup({
  beforeSend: function(xhr) {
    xhr.setRequestHeader('Csrf-Token', '@helper.CSRF.getToken.value');
  }
});

    또는 대안 적으로 다음과 같이 오브젝트 헤더를 구성하여 각 요청 헤더를 설정 :

    $.ajax({
  url: route.url,
  ...
  headers: {
    'Csrf-Token': '@helper.CSRF.getToken.value'
  }
});
  6. ==============================

    6.경우는 주위에 인터넷 검색 그들이 .... 내가 플레이 백엔드에 대한 동일한 문제로 어려움을 겪고 있었어요 표시 할 올바른 토큰을 얻을 수없는 이유를 이해하려고 다른 사람에게 사용의의 / 프론트 엔드 조합 반응 - 따라서 (쉽게) 나는 결국 쿠키에 현재의 토큰을 설정하기위한 다른 해결책을 가로 질러 온 토큰에-htmlpage 기술을 사용할 수 없습니다 ... 단지 추가 :

    경우는 주위에 인터넷 검색 그들이 .... 내가 플레이 백엔드에 대한 동일한 문제로 어려움을 겪고 있었어요 표시 할 올바른 토큰을 얻을 수없는 이유를 이해하려고 다른 사람에게 사용의의 / 프론트 엔드 조합 반응 - 따라서 (쉽게) 나는 결국 쿠키에 현재의 토큰을 설정하기위한 다른 해결책을 가로 질러 온 토큰에-htmlpage 기술을 사용할 수 없습니다 ... 단지 추가 :

    play.filters.csrf {
  cookie.name = "csrftoken"
}

    application.conf과 csrftoken 쿠키에 토큰으로 설정됩니다. 는 영업 이익과로하지 jQuery를 반응이다 여기에 코드를 포함하지 않음 - 그럼 내 JS 코드에서 값을 잡고 요청 헤더에 다시 보내 https://www.npmjs.com/package/js-cookie을 사용 혼동 문제에 싶지 않아요.

    7. from https://stackoverflow.com/questions/45470802/how-to-pass-along-csrf-token-in-an-ajax-post-request-for-a-form by cc-by-sa and MIT license

'SCALA' 카테고리의 다른 글

[SCALA] 스칼라 - 가변 (VAR)에있어서의 파라미터를 참조  (0) 2019.11.27
[SCALA] 스칼라지도 자바지도로 변환  (0) 2019.11.27
[SCALA] 스칼라에서 열거 순열에 코드  (0) 2019.11.27
[SCALA] 주어진 제네릭 형식 스칼라에 의해 클래스의 동반자 오브젝트를 취득  (0) 2019.11.27
[SCALA] 왜 "추상적 오버라이드 (override)는"혼자 subtrait에서 "재정의"를하지 필요합니까?  (0) 2019.11.27
,

티스토리툴바