0

I'm trying to make an AJAX request with csrf protection ON. This is my code:

View:

var csrfName    = "<?php echo $this->security->get_csrf_token_name(); ?>";
var csrfHash    = "<?php echo $this->security->get_csrf_hash(); ?>";
$.ajax({
        url         : url,
        type        : 'POST',
        dataType    : 'json',           
        data        : {[csrfName]: csrfHash, param_val : combo_val, param_src : combo_function}
    })
    .done(function(data){
        alert(JSON.stringify(data));   
    })
    .fail(function(jqXHR, textStatus, errorThrown, data){
        
        alert(JSON.stringify(jqXHR));
        alert(JSON.stringify(textStatus));
        alert(JSON.stringify(errorThrown));
        alert(JSON.stringify(data));
        
    });

Controller:

public function get_addr_by_par(){
    $param_val  = $this->input->post('param_val');
    $param_src  = $this->input->post('param_src');      
    
    if($param_src == "get_city_by_province_id"){
        $data_domisili  = $this->MAuth->get_city_by_par($param_val,$param_src);
    }       
    else{
        $data_domisili  = NULL;
    }       
    
    $data       = array ('data_domisili'    => $data_domisili,
                         'csrfName'         => $this->security->get_csrf_token_name(),
                         'csrfHash'         => $this->security->get_csrf_hash()
                        );      
    
    echo json_encode($data);
}

Model:

function get_city_by_par($param_val,$param_src){
    $this->db->select(" addr_city.PROVINCE_ID AS 'source_id',
                        addr_city.CITY_ID AS 'val_id',
                        addr_city.CITY_NAME AS 'val_nama'
                      ");
                      
    $this->db->from("addr_city");               
            
    return $this->db->get()->result_array(); 
}

Basically, I following this accepted answer, but I got this response from AJAX Fail :

    {
  "readyState": 4,
  "responseText": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<!-- error-page27:33-->\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<title>BIGI Logistic</title>\r\n<!-- Stylesheets -->\r\n<link href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//css/bootstrap.css\" rel=\"stylesheet\">\r\n<link href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//css/style.css\" rel=\"stylesheet\">\r\n<link href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//css/responsive.css\" rel=\"stylesheet\">   \r\n<!--Color Switcher Mockup-->\r\n<link href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//css/color-switcher-design.css\" rel=\"stylesheet\">\r\n<!--Color Themes-->\r\n<link id=\"theme-color-file\" href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//css/color-themes/default-theme.css\" rel=\"stylesheet\">\r\n\r\n<link rel=\"shortcut icon\" href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//images/favicon.png\" type=\"image/x-icon\">\r\n<link rel=\"icon\" href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//images/favicon.png\" type=\"image/x-icon\">\r\n<!-- Responsive -->\r\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\">\r\n</head>\r\n\r\n<body>\r\n\r\n<div class=\"page-wrapper\">\r\n    <!--Error Section-->\r\n    <section class=\"error-section\">\r\n        <div class=\"auto-container\">\r\n            <div class=\"error-title\">4<span>0</span>4</div>\r\n            <h4>Page not found</h4>\r\n            <div class=\"text\">Please try one of the following pages:</div>\r\n            <a href=\"http://localhost:80/bigilogistic/\" class=\"theme-btn btn-style-one\">Home Page</a>\r\n        </div>\r\n    </section>\r\n    <!--Error Section-->\r\n\r\n\r\n    <!-- Main Footer -->\r\n    <footer class=\"main-footer alternate\" style=\"background-image: url(http://localhost:80/bigilogistic/media/themes/cargo/asset//images/background/5.jpg);\">\r\n\r\n        <!--Footer Bottom-->\r\n        <div class=\"footer-bottom\">\r\n            <div class=\"auto-container\">\r\n                <div class=\"inner-container clearfix\">\r\n                    <div class=\"social-links\">\r\n                        <ul class=\"social-icon-two\">\r\n                            <li><a href=\"#\"><i class=\"fa fa-facebook\"></i></a></li>\r\n                            <li><a href=\"#\"><i class=\"fa fa-twitter\"></i></a></li>\r\n                            <li><a href=\"#\"><i class=\"fa fa-google-plus\"></i></a></li>\r\n                            <li><a href=\"#\"><i class=\"fa fa-instagram\"></i></a></li>\r\n                            <li><a href=\"#\"><i class=\"fa fa-whatsapp\"></i></a></li>\r\n                        </ul>\r\n                    </div>\r\n                    \r\n                    <div class=\"copyright-text\">\r\n                       <a href=\"https://www.jelajahweb.com/\" target=\"_blank\">Webdev</a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <!-- End Main Footer -->\r\n\r\n</div>\r\n\r\n\r\n\r\n<!--Scroll to top-->\r\n<div class=\"scroll-to-top scroll-to-target\" data-target=\"html\"><span class=\"fa fa-arrow-circle-o-up\"></span></div>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/jquery.js\"></script> \r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/popper.min.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/bootstrap.min.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/jquery.fancybox.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/owl.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/wow.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/appear.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/mixitup.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/script.js\"></script>\r\n<!-- Color Setting -->\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/color-settings.js\"></script>\r\n</body></html>",
  "status": 200,
  "statusText": "OK"
}

Any suggestion to solve my issue? Disabling csrf protection is my last option which I don't want to do for obvious reasons.

react_or_angluar
  • 1,568
  • 2
  • 13
  • 20
Vahn
  • 542
  • 1
  • 10
  • 25

0 Answers0