Level 12
Check out https://laravel.com/docs/5.3/csrf
Use {{ not {!! or can use the header options the above page explains
Sep 2, 2016
7
Level 9
Returning a post request
My JS is as follows
$("document").ready(function(){
$('#username').on('focus', function() {
$.ajax({
url: '/search_results',
type: 'POST',
data: {
'_token': '{!! csrf_token() !!}'
},
dataType: 'JSON',
success: function (data) {
console.log("it is"+data);
},error:function(data){
alert('error');
console.log(data);
}
})
});
});
My route
Route::post('/search_results', function (){
$users = "Jim";
return 'Jim';
});
It seems to be a token error but I thought I fixed that with the quotes.
search:53 Object {readyState: 4, responseText: "↵↵↵ ↵ <meta n…l>↵↵↵ ↵ ↵", status: 200, statusText: "OK"}abort: (a)always: ()complete: ()done: ()error: ()fail: ()getAllResponseHeaders: ()getResponseHeader: (a)overrideMimeType: (a)pipe: ()progress: ()promise: (a)readyState: 4responseText: "↵↵↵ ↵ ↵ ↵ /* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html */↵ html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}↵ html { background: #eee; padding: 10px }↵ img { border: 0; }↵ #sf-resetcontent { width:970px; margin:0 auto; }↵ .sf-reset { font: 11px Verdana, Arial, sans-serif; color: #333 }↵ .sf-reset .clear { clear:both; height:0; font-size:0; line-height:0; }↵ .sf-reset .clear_fix:after { display:block; height:0; clear:both; visibility:hidden; }↵ .sf-reset .clear_fix { display:inline-block; }↵ .sf-reset * html .clear_fix { height:1%; }↵ .sf-reset .clear_fix { display:block; }↵ .sf-reset, .sf-reset .block { margin: auto }↵ .sf-reset abbr { border-bottom: 1px dotted #000; cursor: help; }↵ .sf-reset p { font-size:14px; line-height:20px; color:#868686; padding-bottom:20px }↵ .sf-reset strong { font-weight:bold; }↵ .sf-reset a { color:#6c6159; cursor: default; }↵ .sf-reset a img { border:none; }↵ .sf-reset a:hover { text-decoration:underline; }↵ .sf-reset em { font-style:italic; }↵ .sf-reset h1, .sf-reset h2 { font: 20px Georgia, "Times New Roman", Times, serif }↵ .sf-reset .exception_counter { background-color: #fff; color: #333; padding: 6px; float: left; margin-right: 10px; float: left; display: block; }↵ .sf-reset .exception_title { margin-left: 3em; margin-bottom: 0.7em; display: block; }↵ .sf-reset .exception_message { margin-left: 3em; display: block; }↵ .sf-reset .traces li { font-size:12px; padding: 2px 4px; list-style-type:decimal; margin-left:20px; }↵ .sf-reset .block { background-color:#FFFFFF; padding:10px 28px; margin-bottom:20px;↵ -webkit-border-bottom-right-radius: 16px;↵ -webkit-border-bottom-left-radius: 16px;↵ -moz-border-radius-bottomright: 16px;↵ -moz-border-radius-bottomleft: 16px;↵ border-bottom-right-radius: 16px;↵ border-bottom-left-radius: 16px;↵ border-bottom:1px solid #ccc;↵ border-right:1px solid #ccc;↵ border-left:1px solid #ccc;↵ }↵ .sf-reset .block_exception { background-color:#ddd; color: #333; padding:20px;↵ -webkit-border-top-left-radius: 16px;↵ -webkit-border-top-right-radius: 16px;↵ -moz-border-radius-topleft: 16px;↵ -moz-border-radius-topright: 16px;↵ border-top-left-radius: 16px;↵ border-top-right-radius: 16px;↵ border-top:1px solid #ccc;↵ border-right:1px solid #ccc;↵ border-left:1px solid #ccc;↵ overflow: hidden;↵ word-wrap: break-word;↵ }↵ .sf-reset a { background:none; color:#868686; text-decoration:none; }↵ .sf-reset a:hover { background:none; color:#313131; text-decoration:underline; }↵ .sf-reset ol { padding: 10px 0; }↵ .sf-reset h1 { background-color:#FFFFFF; padding: 15px 28px; margin-bottom: 20px;↵ -webkit-border-radius: 10px;↵ -moz-border-radius: 10px;↵ border-radius: 10px;↵ border: 1px solid #ccc;↵ }↵ ↵ ↵ ↵ ↵
Whoops, looks like something went wrong.
↵↵ 1/1↵ TokenMismatchException in VerifyCsrfToken.php line 67:↵ …vendor/laravel/framework/src/Illuminate/Routing/Router.php line 699" ondblclick="var f=this.innerHTML;this.innerHTML=this.title;this.title=f;">Router.php line 699↵
Level 51
You cant write blade in your javascript file...
data: {
'_token': '{!! csrf_token() !!}'
},
https://laravel.com/docs/5.3/csrf#csrf-x-csrf-token
Here some threads which can help you
https://laracasts.com/discuss/channels/general-discussion/laravel-5-ajax-tokenmismatchexception
https://laracasts.com/discuss/channels/general-discussion/l5-tokenmismatchexception-with-ajax-post
Level 9
Still getting the same error here is my file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/admin.css">
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="js/gsap/TweenMax.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/sweetalert.css">
<link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
<meta name="csrf-token" content="ijNcUUhtHiesQbQJuSugySA11IUtFewcdgxRHoZM">
</head>
<body>
<section class="search">
<header>
<div class="admin-arrow back"></div>Search & Edit Users<div class="admin-arrow next"></div>
</header>
<div class="left">
<label>First & last name</label>
<input id="username" name="username">
</div>
<div class="right">
<label>Team</label>
<input id="username" name="username">
</div>
<ul class="controls">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<a class="nextbutton" href="results">Next<span></span></a>
</section>
<script>
$("document").ready(function(){
$('#username').on('focus', function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '/search_results',
type: 'POST',
data: {
},
dataType: 'JSON',
success: function (data) {
console.log("it is"+data);
},error:function(data){
console.log(data);
}
})
});
});
</script>
</body>
</html>
Level 51
in your html file put this
<meta name="csrf-token" content="{{ csrf_token() }}">
Level 9
it is
Laravel Framework version 5.2.43
Level 51
Check this article
https://medium.com/@barryvdh/csrf-protection-in-laravel-explained-146d89ff1357#.l5qi907iu
You could now, for example, simply add a meta-tag to your section, read it with jQuery and set the XHR header:
<meta name="csrf-token" content="<?php echo csrf_token() ?>" />
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
Level 9
that is what I did
<meta name="csrf-token" content="ijNcUUhtHiesQbQJuSugySA11IUtFewcdgxRHoZM">
Please or to participate in this conversation.