title: Call js function with onclick in twig and symfony
body: <p>I made a moderate post function, but I'm not sure that my method is secure. </p>
  
  <p>Here is the controller</p>
  
  <pre><code>/**
   * @param Request $request
   * @Route ("/forum/moderate/post", name="post_moderate")
   * @return Response
   */
  
  public function moderateAction(Request $request, PostRepository $postRepository)
  {
      $reason = htmlentities($request-&gt;request-&gt;get('reason'));
      $postId = (int)htmlentities($request-&gt;request-&gt;get('postId'));
  
      if (empty($reason)) {
          return new Response(json_encode('fail'), 500);
      }
  
      $em = $this-&gt;getDoctrine()-&gt;getManager();
      $post = $postRepository-&gt;findOneBy(array('id' =&gt; $postId));
      $post-&gt;setModerateReason($reason);
      $em-&gt;persist($post);
  
      $em-&gt;flush();
  
      return new Response(json_encode('ok'), 200);
  }
  </code></pre>
  
  <p>For the moment there is not security controls. </p>
  
  <p>My link in twig have somes attributes:
  An id, because every post must have his own moderate button,
  A data href, to get the path in the js file. 
  There is also a moderateLink class for the click event. </p>
  
  <pre><code> &lt;a class="btn btn-danger btn-squared btn-sm mr-2 text-white moderateLink"
   title="Modérer le commentaire" id="moderateLink-{{ post.id }}" 
   data-href=" {{ path('post_moderate') }}"&gt;&lt;i class="fas fa-gavel"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Here is my post.js file:</p>
  
  <pre><code>$(function () {
  
  
      $('.moderateLink').on('click', moderate);
  
  });
  
  function moderate () {
  
      let id = $(this).attr('id');
      id = id.split('-');
      id = id[1];
  
      var reason = prompt('Entrez la raison: ');
      var url = $(this).attr('data-href')
  
      if (reason != null &amp;&amp; reason.trim() != '') {
  
          $.ajax({
  
              type: "POST",
              url: url,
              crossDomain: false,
              data: 'reason=' + reason + '&amp;postId=' + id,
              dataType: 'json',
              async: false,
              success: function (res) {
                  if (res == 'ok') {
                  //
                  }
              }
          });
      } else if (reason != null) {
          alert('Vous devez entrer une raison.');
          return;
      }
  }
  </code></pre>
  
  <p>The big problem is than any user can edit the HTML file to put the needed attributes and class name. I don't want they access to the popup box. </p>
  
  <p><strong>I tried something like that:</strong></p>
  
  <p>Twig:</p>
  
  <pre><code> &lt;a class="btn btn-danger btn-squared btn-sm mr-2 text-white"
   title="Modérer le commentaire"
   onclick="moderate({{post.id}})"&gt;&lt;i class="fas fa-gavel"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Post.js with FOSjsRoutingBundle ( <a href="https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html" rel="nofollow noreferrer">https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html</a> ):</p>
  
  <pre><code>const routes = require('../../public/js/fos_js_routes.json');
  import Routing from '../../vendor/friendsofsymfony/jsrouting- 
  bundle/Resources/public/js/router.min.js';
  
  
  $(function () {
  
      moderate = function(id){
          Routing.setRoutingData(routes);
          var reason = prompt('Entrez la raison: ');
          var url = Routing.generate('post_moderate');
  
          if (reason != null &amp;&amp; reason.trim() != '') {
  
              $.ajax({
  
                  type: "POST",
                  url: url,
                  crossDomain: false,
                  data: 'reason=' + reason + '&amp;postId=' + id,
                  dataType: 'json',
                  async: false,
                  success: function (res) {
                      if (res == 'ok') {
                          //
                      }
                  }
              });
          } else if (reason != null) {
              alert('Vous devez entrer une raison.');
              return;
          }
  </code></pre>
  
  <p>But in this case, the console tell me that moderate is not define. 
  If I remove the import at top, the function works but I can't pass the path to js. </p>
  
  <p>I do not know how to reach my goal, I would like to use my second method, but I don't know how ... </p>