web-dev-qa-db-fra.com

Rails - Comment ajouter la protection CSRF aux formulaires créés en javascript?

J'utilise backbone.js et cela fonctionne très bien. mais les formulaires que je crée en tant que modèle javascript n'ont pas le jeton de protection Rails csrf. Comment l'ajouter aux modèles que je crée en javascript?

javascriptruby-on-railsruby-on-rails-3backbone.jscsrf
45
CamelCamelCamel

Si vous avez <%= csrf_meta_tag %> Quelque part dans votre mise en page et que vous pouvez y accéder à partir du js, vous pouvez y accéder en utilisant $('meta[name="csrf-token"]')

Voir http://eunikorn.blogspot.com/2011/07/working-with-backbonejs-in-harmony-with.html pour une idée sur la façon de pirater le support csrf dans chaque demande de backbone

32
Thong Kuah

La meilleure façon de résoudre cela, à l'intérieur du formulaire:

<%= hidden_field_tag :authenticity_token, form_authenticity_token %>
63
lucianosousa

Vous pouvez ajouter le jeton csrf à chaque formulaire qui utilise "publier" ou "supprimer". La voici en coffeescript:

$ -> 
  for f in $("form")
    if f.method == 'post' or f.method == 'delete'
      $(f).prepend("<input type='hidden' name='authenticity_token' value='" + token + "'>")

Assurez-vous d'avoir <% = csrf_meta_tags%> dans votre mise en page. Il devrait déjà être dans la mise en page "application" standard, mais ajoutez-le si vous utilisez une mise en page différente.

5
suga_shane

Quant à Rails 4.2.2 vous n'êtes pas autorisé à utiliser

<%= hidden_field_tag :authenticity_token, form_authenticity_token %>

de ton .js.erb fichier d'actif.

Cependant, vous pouvez créer le formulaire à l'intérieur du .js.erb fichier et dans la vue contenant le formulaire .html.erb fichier utilisez le hidden_field_tag helper pour générer l'élément token. Comme cet élément va être généré en dehors du formulaire, vous pouvez utiliser jquery pour ajouter cet élément au formulaire.

Cas d'étude: SweetAlert (première version, la version semble également avoir résolu ce problème)

show.js.erb

$('.js-button-apply-offer').click(function(e) {
var urlOffer = $(this).attr('data-url-offer');
var modalParams = {
    type: 'warning',
    title: 'add file',
    text: '<p>Need to add a file before continuing</p>' // This is a hack for Sweet alert, solved in SweetAlert2 Consider upgrade
    +"<form action='"+urlOffer+"' id='formCustomCV' method='post' enctype='multipart/form-data' data-remote='true'>"
    + "<input type='file' name='custom_cv' id='fileToUploadAlert' accept='application/pdf'>\n"
    +"</form>",
    html: true,
    showCancelButton: true,
    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'Send',
    cancelButtonText: 'Cancel',
    closeOnConfirm: false
  }
swal(modalParams,
function(){
  var form_token = $('#form_token');
  $('#formCustomCV').append(form_token).submit(); //update to submit using ajax
});

show.html.erb

<%= button_tag t('offers.offer.apply'),
  class: 'center-block btn btn-success js-button-apply-offer',
  id: "js-button-apply-offer",
  data: {
    url_offer: apply_talents_offer_path(@offer),
  } 
%>
<%= hidden_field_tag :authenticity_token, form_authenticity_token, id: :form_token %>
0
juliangonzalez