Codeigniter jquery / ajax外部文件403

Question

I am using Codeigniter 3, I have a script that when used in my HTML works fine. If I put the code in an external file, I receive a 403 error.

My js file is located at root/jquery/js/myfile.js

The error is "403 Forbidden - localhost/mywebsite/main/explode_link".

Below is the beginning of the external javascript.

$(document).ready(function(){
        $('.mashed_row a').click(function () {
            var link_id = $(this).attr('link_id');

         $.ajax({
                  type: 'POST',
                   url: 'main/explode_link',
                   data: {'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>', link_id},
                   dataType: 'json',
                   success : function(data) {
                       if(data){

Here are my external links.

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="<?php echo base_url().'jquery/cookie.js'; ?>"></script>
    <script type="text/javascript" src="<?php echo base_url().'jquery/js/rating.js'; ?>"></script>
    <script type="text/javascript" src="<?php echo base_url().'jquery/js/mashed.js'; ?>"></script>
    <?php echo (isset($include_js))? $include_js : ''; ?>   
    <script src="<?php echo base_url().'js/bootstrap.min.js'; ?>"></script>

The script which works fine in the HTML is below.

        <script type="text/javascript">
        $('.mashed_row a').click(function () {
            var link_id = $(this).attr('link_id');

         $.ajax({
                  type: 'POST',
                   url: '<?php echo base_url(); ?>main/explode_link',
                   data: {'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>', link_id},
                   dataType: 'json',
                   success : function(data) {

Answer 1

The 403 forbidden is due to the csrf check failing. That happens because of the two calls to $this->security in the external file where $this has no context. In other words, the external js doesn't know what $this means (unlike the view html) and fails to put useful data in the object being used to set data.

There are several solutions. One is to create a var in the view html page that your external js can consume.

<script>
var csrf = {'<?= $this->security->get_csrf_token_name(); ?>' : '<?= $this->security->get_csrf_hash(); ?>'};
</script>

Using the above var in the external js

$(document).ready(function(){
  $('.mashed_row a').click(function () {
    var link_id = $(this).attr('link_id');

    $.ajax(
       {
          type: 'POST',
          url: 'main/explode_link',
          //combine csrf with link_id   
          data: $.extend(csrf, {link_id: link_id}),
          dataType: 'json',
          success : function(data) {
              if(data){

Other options include using JQuery to extract the csrf hash from the DOM. But you then either have to hard-code the token name or pass it as shown above.

Another option is to add an id attribute to the csrf hidden input that can be used for the jquery selector. But that isn't much different than hard coding the take name in your js.

Hope this helps.