Captcha sessions are not being created

[Joel-James]

I have implemented Visual captcha using Laravel and jQuery. It was working fine in my localhost. But when it goes to live server, captcha sessions are not being created. My captcha serverside domain and front end are using different domains(sub domains).

Frontend -  http://front.example.com
Backend - http://back.example.com

I think the issue is with Ajax call that goes to the server to generate captcha. When I simple access http://back.example.com/start/5 link though my browser directly, sessions are being created.

Any idea why?

[BrunoBernardino]

Hmm. It seems something related to CORS, at a glance. When you say the sessions are not being created, do you mean in the server, or being defined in the browser properly?

Is there any warning in chrome dev tools?

[Joel-James]

I mean in the server. I found that sessions are being created when we access that /start url directly through browser. So I have added an iframe request using jQuery to the same link just before /start request from the plugin. That creates the session and images are showing from that session. But the issue is that 'Click on Car' text is wrong. Because that text is updated from plugins /start call response. Not from iframe call. I cann see correct text in iframe output. But could not append that text from iframe to oour captcha. Any thoughts? Everything works fine when I use iframe. Only that text should be changed to the real answer :( See the screenshot below.

I really appreciate your effort developing this (y)

[BrunoBernardino]

We'll get to the bottom of this :)

I don't understand why are you making that iframe request? visualCaptcha will make one on initialization automatically. It seems that's probably messing up the session.

Can you show me a list of ajax requests made when opening the page?

And what happens when you refresh the captcha? Does it work fine from that point on? If so, you can programmatically call it using .refresh()

[Joel-James]

No. It won't work. The ajax call generated by the plugin core is not creating or updating the sessions. That is our issue! Why I call an iframe is, iframe acts like a direct browser call. So it generates sessions! Otherwise no images. Just few ajax calls only.

These are the urls http://example.com/captcha/start/5 (My iframe call) http://example.com/captcha/start/5?r=y0f6rydg5ta http://example.com/captcha/image/0?r=y0f6rydg5ta http://example.com/captcha/image/1?r=y0f6rydg5ta http://example.com/captcha/image/2?r=y0f6rydg5ta http://example.com/captcha/image/3?r=y0f6rydg5ta http://example.com/captcha/image/4?r=y0f6rydg5ta

For my iframe call I get response as

{"values":["d75144cf2ae7bf9bf4b5","662be1a92ad562a2d413","b8ecd574cf730d918e27","90935dc39d54cc4609c4"
,"c228a3a6ca32ea6f4043"],"imageName":"Lock","imageFieldName":"f81de9316f29f681fe2e","audioFieldName"
:"a616864707f8667dd921"}

And Lock is there in the captcha images.

For plugins ajax call I get the response as,

{"values":["af73e559ef218d75a85c","0bb50a2090964f22899a","610a547b5e2e2f558ca7","d53cf7009a7c8d05e6b4"
,"f6d1df9da75f1bcec9ec"],"imageName":"Truck","imageFieldName":"cc8525bbe11062b129f8","audioFieldName"
:"c4b473ec75f3beacaa46"}

Truck is not in the captcha images (Because these image session names are generated by iframe call, not plugins ajax call).

[BrunoBernardino]

I see. I'd still prefer to understand and fix the initializing call's issue, but you didn't answer me if refreshing works? Seems like it'd be the quickest option there.

[BrunoBernardino]

Otherwise, if the plugin's requests are "different" (as in they're not tapping into the same session as the iframe), you'll always have issues with the images and audio options :|

[Joel-James]

No. refreshing will not work. Refresh also calls same ajax call right? So no sessions :(

[Joel-James]

Can you suggest other options for request option? I can see that default option is xhrRequest

[BrunoBernardino]

No warnings, no nothing in the server? Is there a public URL so I can see this?

As for alternatives, https://github.com/ForbesLindesay/ajax or https://github.com/then/then-request come to mind.

[Joel-James]

No :( I develop this using Laravel homestead in local machine. Front end and back ends are in different virtual domains. No error from server. We are getting response from server (as you can see above), for both ajax and iframe calls. If we do not call iframe, session retuns null.

May be CORS right? :(

[BrunoBernardino]

If it was CORS, you should get a warning or error in the AJAX requests, though. On Mon, 11 Jan 2016 at 13:52 Joel James notifications@github.com wrote:

No :( I develop this using Laravel homestead in local machine. Front end and back ends are in different virtual domains. No error from server. We are getting response from server (as you can see above), for both ajax and iframe calls. If we do not call iframe, session retuns null.

May be CORS right? :(

— Reply to this email directly or view it on GitHub https://github.com/emotionLoop/visualCaptcha/issues/21#issuecomment-170555866 .

http://brunobernardino.com

[Joel-James]

Hi, Could you please try this with cross domain? (front end and back end are in different domains). I have tried this in same domain and it works. But not working for different domains.

ps: Ignore the iframe comments. I have removed that

[BrunoBernardino]

I can get it working with CORS enabled. See if http://enable-cors.org/server.html and http://enable-cors.org/client.html help you.

[Joel-James]

Hi, I found that CORS is not the exact issue, but CORS is the issue. May be in Laravel? Our /start/ call is an xhr request and all /image/ calls are normal HTTP requests (it calls as img src). I think the issue is normal http requests (/image/) are not able to access the session created by xhr request. I don't know why but it happens only when I use it cross dmain :(

[Joel-James]

Finally found a solution by adding 2 new HTTP calls :) Inside Loading callback I have called start to create session. That created all required session data. Then called a custom jsonp call to get answer image details and replaced that text with captcha text in front end.. Hoooo.. :+1:

@BrunoBernardino Thank you for this amazing captcha solution.

[BrunoBernardino]

I'm glad you found a solution, thanks!