AEM 6.2 Form post without an Ajax call



Hi Community,

I am very new to AEM and trying to do the following in AEM 6.2:

    1. Created a Template named as "sightlyTemplate" with slign:resourceType as /apps/handson2/components/page/sightlyComponent
    2. Created a page Component named as "sightlyComponent"
    3. Created a Content component named as "sightlyLoginComponent" - Which servers as a very basic login form
    4. Created a page using the above said template and added the created content component to it.  

Here is my Component Code:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.all @ categories='handson1.lib'}"/> <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.all @ categories='cq.jquery'}"/> <form method="post" action="/bin/sightlyLogin"> <header>${properties.loginlabel}</header> <div id="failsightly" data-sly-test="${request.requestParameterMap['login'][0].toString == 'fail'}"> Login Failed!! </div> <div id="logout">${properties.logoutmessage}</div> <div> <label>${properties.userlabel}<span>*</span></label> <input type="text" name="user_name" id="user_name"/> <div class="help">${properties.userlabelhelp}</div> <label>${properties.passwordlabel}<span>*</span></label> <input type="password" name="password" id="password"/> <div class="help">${properties.passwordlabelhelp}</div> <input class="button" name="loginBtn" type="submit" value="${properties.submitlabel}"> <input type="hidden" name="successpage" value="${properties.successpage}.html"/> <input type="hidden" name="failurepage" value="${properties.failurepage}.html"/> </div> </form>


Also below is my SlingServlet Class:

package com.adobe.handson2; import; import java.rmi.ServerException; import org.apache.felix.scr.annotations.Reference; import; import; import; import; import org.slf4j.Logger; import org.slf4j.LoggerFactory; @SlingServlet(paths = "/bin/sightlyLogin", methods = "POST", metatype = true) public class LoginServlet extends { private static final long serialVersionUID = 2598426539166789515L; private Logger LOG = LoggerFactory.getLogger(LoginServlet.class); @Reference private SlingRepository repository; public void bindRepository(SlingRepository repository) { this.repository = repository; } @Override protected void doPost(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServerException, IOException { String failurePage = request.getParameter("failurepage"); String successPage = request.getParameter("successpage"); String userName = request.getParameter("user_name"); String password = request.getParameter("password");"userName: " + userName); if (password.equals(userName)) { response.sendRedirect(successPage); } else { response.sendRedirect(failurePage + "?login=logout"); } } }


My Query is: This form post is working only when I include cq.jquery to my component or template (which is present at the second line of my component code). Else it throws 403 forbidden Cannot serve request to /bin/sightlyLogin in /libs/sling/servlet/errorhandler/default.jsp. Attached the error snap with stack trace.

Is it mandatory to include cq.jquery even if I don't used any ajax calls for the form post? Or am I missing something while creating the template or component ?

PS: I am facing this issue only when I am creating a sightly based components (.html). Not with JSP based components.



Accepted Solutions (1)

Accepted Solutions (1)




This happens because of the CSRF prevention support that was added in 6.0. While making a post request you now need to provide a CSRF token as well. This support was provided ootb with granite jquery.

This question provides more information

Varun Dua