I'm using this bootstrap-fileinput plugin to upload file in my WebApp.
To develop this WebApp I'm using: Bootstrap4, Thymeleaf and Spring Boot.
I would like to use the html5 convenction to use that plugin, so this is the code:
<div class="file-loading" >
<input id="uploadPDF" type="file" class="file" data-theme="fas" data-allowed-file-extensions='["pdf"]'
data-language="it" data-type="POST" th:data-upload-url="#{/path/{id}/pdf(id=${myObject.id})}"/>
</div>
But I enabled the CSRF protection with Spring Security. So when I try to upload a pdf the result is:
Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-CSRF-TOKEN'.
I would like to add the CSRF token using the HTML5 convection, so something like:
<input .... data-toke="token"...>
In this way I can avoid to use the javascript.
Is it possible?
You can access the value of the csrf token with ${_csrf.token}. So:
<input ... th:data-token="${_csrf.token}" ... />
Related
Enabled csrf by adding csrf in every page.
<input type="hidden" name="_csrf" value="****sample*****"/>
It is working for all the pages except for the file upload functionality which is getting 403 error in browsers network tab.
<h:form enctype="multipart/form-data"><p:fileUpload id="attachements" listener="<listener method call?" mode="advanced" auto="true" required="false" allowTypes="/(\.|\/)(doc|pdf)$/" multiple="true"/></h:form>
Used the below Ajax request from onstart call of fileUpload tag
function addCsrf(){var token = $("meta[name='_csrf']").attr("content");var header = $("meta[name='_csrf_header']").attr("content");$(document).ajaxSend(function(e, xhr, options) {xhr.setRequestHeader(header, token);});}
but after file upload, in the network tab I got 200 response, but still the primefaces page is continuously loading.
Tried ignoring ant matchers for upload page, even still issue not resolved.
Any suggestions would be appreciated.
primefaces verison:-8.0.22
Jsf Version:- 2.1.10
Spring security:- 5.6.9
Tried using ajax calls referred from 'Ajax and JSON Requests' section from the below link.
https://docs.spring.io/spring-security/site/docs/3.2.x/reference/htmlsingle/html5/#when-to-use-csrf-protection.
I am following this tutorial but they have disable the csrf protection.
So I removed the csrf().disabled() code but then the code is not being inejected and I cannot login properly because of:
DEBUG 5276 --- [nio-8080-exec-6] o.s.security.web.csrf.CsrfFilter: Invalid CSRF token found for http://localhost:8080/admin_login.
I think that there's something missing because of the double configuration (user and admin login).
I have already tried:
Adding the <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/> manually
Adding the th:action to the form tag.
Adding the <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" /> with the th tags. This throws: Exception evaluating SpringEL expression: "_csrf.parameterName".
Any ideas?
Put this meta tags in your login page
<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
Then,include the CSRF token in the login form as a hidden parameter manually in the code ( Since you are using Thymeleaf, what you need to do is to use th:content instead of content:):
<input
type="hidden"
th:name="${_csrf.parameterName}"
th:value="${_csrf.token}" />
Yesterday I used the footage you specified and encountered a similar problem. And I managed to solve this problem.
The reason why the thymeleaf not injecting csrf code below:
Yout login page and processing url according to the article is https://www.baeldung.com/spring-security-two-login-pages
.loginPage("/loginAdmin")
.loginProcessingUrl("/admin_login")
But there are no rules for antMatchers().
I solved this problem by this way:
For App2ConfigurationAdapter add this line of code:
.antMatchers("/loginAdmin", "/admin_login").permitAll()
Now, thymeleaf inject csrf code into form properly.
I'm using fine-uploader with AngularJS. This is the configuration I am using in my HTML file:
<div fine-uploader
upload-server="{{ uploadServer }}"
not-available-placeholder="/vendor/jquery.fine-uploader/placeholders/not_available-generic.png"
waiting-placeholder="/vendor/jquery.fine-uploader/placeholders/waiting-generic.png"
max-file-size="10000000"
large-preview-size="500"
allowed-mimes="image/jpeg, image/png"
allowed-extensions="jpeg, jpg, png"
token="{{ token }}">
</div>
How do I:
Handle file upload errors? For example, I would like to display a custom AngularJS dialog when an upload error happens. Is there any sample code that illustrates how to do this? I already have my own dialog code I can call.
Limit the number of retries to 1?
I am using Ionic Framework to implement a social app for the Front-End (hybrid Android and iOS). For the back-end I am using spring boot with hibernate. I am trying to pull content from Facebook by using spring-social-facebook; however, I am having problems submitting a POST to back-end with spring-social-facebook
Front-End
In services.js I am using the following source code to POST
.factory('springFB', ['$resource', '$rootScope',
function($resource, $rootScope){
return $resource($rootScope.clhost + $rootScope.clport + '/connect/facebook/', {}, {
query: {method:'POST', params:{}, isArray:false}
});
}])
In html file I am using the following AngularJS form:
<form action="/connect/facebook" method="POST">
<input type="hidden" name="scope" value=" public_profile, email, user_friends, user_posts, user_photos, user_videos" />
<div class="formInfo">
<p>You aren't connected to Facebook yet. Click the button to connect Mote with your Facebook account.</p>
</div>
<p><button type="submit"><img src="/resources/social/facebook/connect_light_medium_short.png"/></button> </p>
</form>
I get
Whitelabel Error PageThis application has no explicit mapping for /error, so you are seeing this as a fallback.Tue Oct 20 02:23:45 UTC 2015There was an unexpected error (type=Method Not Allowed, status=405).Request method 'GET' not supported
On the back-end I have several facebook controllers, the redirect is setup to localhost:8100 and AWS EC2 where the spring boot jar is running in the facebook app, the spring boot .jar file is running in AWS EC2.
I am not sure what I am missing
I have a really simple webform;
<form name="logmeinsupport" action="https://secure.logmeinrescue.com/Customer/Code.aspx" method="post">
<span>Enter your 6-digit PIN code: </span><input type="text" name="Code" /><br />
<input type="submit" value="Connect to technician" />
</form>
On the logmeinrescue side, there will post the error code back into URL:
Like: http://tomtom-uk--tst2.tomtom.com/app/utils/support_login?LogMeInRescueResponse=PINCODE_INVALID
However, our server setup interprets it as a page in web server, therefore, i got 404 error:
404 Page Not Found
The page 'utils/support_login?LogMeInRescueResponse=PINCODE_INVALID.php' was not found.
It is not so easy for our infrastructure team to change it. I am wondering whether I can use Ajax call backs post function to get response. And i think the difficult is about cross server ajax call.
Any examples? Thanks
Cheers,
Qing
The server looks for the file 'utils/support_login?LogMeInRescueResponse=PINCODE_INVALID.php'.
I think you should change your request to:
utils/support_login.php?LogMeInRescueResponse=PINCODE_INVALID
In this way the server will look for support_login.php and if there is indeed a file with this name on your server you will not have this error again.