Issues with custom-built CAPTCHA

[WolfShade]

Hello, all,

We recently had our CAPTCHA bypassed (not surprising, as I kind of had to do a hack-ish job with it due to some security restrictions) and I custom-built a new one.

Apparently, our production environment is not 100% identical to our dev or staging environments, as it works well in those.

I just received an email from the customer stating that 1) the CAPTCHA is not matching in FireFox (possibly due to a constantly changing JSESSIONID), and 2) IE11 will not display the image, at all.  I checked for #2, and in production IE11 does, indeed, _not_ display the image.

On the code level, the image is being created like the following:

<img style="width: 200px; height: 85px;" src="data:image/*;base64,{and a long string of blob data}" />

Any suggestions?  I am at the end of my rope on this one.

V/r,

^ _ ^

[EddieLotter]

Navigate to the page that should display the image.

Press F12 to open Developer Tools.

Click the "Network" tab.

Refresh the Web page.

In the "Result/Description" column of the "Network" tab, do you see any error result codes?

[WolfShade]

The _only_ thing that doesn't come back as 200 is favicon.ico.  Everything else is 200.

V/r,

^ _ ^

UPDATE:  favicon.ico has been fixed.

[Charlie Arehart]

Are you saying you MUST stay with that custom-built captcha? Or are your asking for recommendations of ones that have worked?

[WolfShade]

I _have_ to stay with my custom-built CAPTCHA, or build another one, because we are proscribed from using third-party turnkey solutions.  Rare exceptions are allowed, such as jQuery and Bootstrap (neither of which is CDN, must be local).  But we cannot use anything like Google's reCAPTCHA, or any other company's CAPTCHA product.

We cannot use CFIMAGE to create the CAPTCHA because something in our settings/configuration/security is preventing CFIMAGE from being used (I think that access to the CFFileServlet folder is being denied, but don't know for sure.)

V/r,

^ _ ^

[EddieLotter]

Would you be allowed to do the following:

<img style="width: 200px; height: 85px;" src="imagedata.cfm" />

and return the custom image as a binary resource from imagedata.cfm instead of encoding it?

[WolfShade]

I can give that a shot.  You mean like using CFHEADER to deliver the image?  I know that CFHEADER and CFCONTENT work delivering images.  We use that on part of the news section of our site.  I can try that and see if IE will work with it.

V/r,

^ _ ^

[EddieLotter]

Yes, that is what I mean.

[WolfShade]

Okay, I'm obviously doing something incorrectly, here. 

This is in FireFox with DevTools open.  The image is showing that it's broken.  Here's my "funcimg.cfml" code:

<cfsilent>
    <cfparam name="variables.columnClass" default="" />
    <cfset alphaNum = ['6','F','@','G','H','J','K','L','M','N','P','Q','R','S','T','B','U','V','W','X','$','Y','5','2','Z','a','b','?','c','d','D','8','e','f','g','h','A','j','k','m','n','o','p','q','7','r','9','s','&','E','4','t','u','v','w','x','3','y','C','z'] />
    <cfset anLen = ArrayLen(alphaNum) />
    <cfset session.captchaText = "" />
    <cfloop from="1" to="6" index="idx">
        <cfset session.captchaText &= alphaNum[RandRange(1,anLen,'xxxxx')] />
    </cfloop>
    <cfset funcimg = ImageCreateCaptcha(85,250,session.captchaText,"medium","serif", "30")>
</cfsilent><cfheader name="content-disposition" value="inline;filename=captchaimage.png" /><cfcontent type="image" variable="#funcimg#" reset="yes" /><cfflush />

Do I need to encode this before using?

V/r,

^ _ ^

[WolfShade]

Did I miss a critical function like imageWriteBase64() or something else?  (I tried the imageWriteBase64(), it didn't make a difference.)

V/r,

^ _ ^

[WolfShade]

Okay, so I've done some research on this, and according to a Raymond Camden blog post what I am trying to do will only work if the image being served was from an existing image file because it will have a file extension indicating what kind of image file it is (.gif, .jpg, .png, etc.)  Since CF imageCreateCaptcha() is being used, there is apparently no default image type, so there's no file extension.

Okay, that makes sense, but still you'd think that CFCONTENT could detect the type and use that.  Right?  Guess not.

I tried following Raymond's example to print a blank space on the image, so as not to interfere with the CAPTCHA letters/numbers/symbols, but it isn't working.  The last error message I got was: "Verify your inputs. The source file should contain an extension,so that ColdFusion can determine the image format. "

I'm using CFHEADER to name the file 'captchaimage.png' (also tried .gif and .jpg) but I guess that isn't good enough.

Any other thoughts?

V/r,

^ _ ^

[EddieLotter · Accepted solution]

In your cfcontent tag, the "type" parameter must be a MIME type. Try "image/jpeg" or "image/png" and see what works.

[WolfShade]

Thanks for the thought, Eddie.  I'll give that a shot.. I just assumed that image/* would be sufficient.

V/r,

^ _ ^

UPDATE:  Waitaminnit.. I'm getting ahead of myself.  The previous version of using src="data:image/*" wasn't working in IE.  I'll still give it a shot, but if there's a way around my CFCONTENT/CFHEADER issue, I'd rather try that.

UPDATE2: Okay, it's been a REALLY rough morning.. I misinterpreted what you said, and put the previous method into play using image.png instead of image/* and believe it or not, IT WORKED!  (I'm still going to try what you said, though.)

[WolfShade]

Okay, I tried it, and in IE if I changed the CFCONTENT type from "image" to "image/png" it didn't work.

HOWEVER, your suggestion did get me on the right path, because I totally misunderstood what you were suggesting and tried the previous way of using src="data:image/png{blah blah blah}" in IE and it worked.  So.. I'm going to go ahead and mark your answer as correct and hope that anyone else having this issue reads further down to see what I finally wound up doing. 

V/r,

^ _ ^

[EddieLotter]

Glad you got it sorted.

If you want the standalone funcimage.cfm script to work, its contents will need to be something like this:

<cfsetting enablecfoutputonly="true" showdebugoutput="false">
<cfscript>
  alphaNum = ['6','F','@','G','H','J','K','L','M','N','P','Q','R','S','T','B','U','V','W','X','$','Y','5','2','Z','a','b','?','c','d','D','8','e','f','g','h','A','j','k','m','n','o','p','q','7','r','9','s','&','E','4','t','u','v','w','x','3','y','C','z'];
  anLen = alphaNum.len();
  lock timeout="30" scope="Session" type="exclusive" {
    session.captchaText = "";
    for ( idx=1; idx < 7; idx++) {
      session.captchaText &= alphaNum[RandRange(1,anLen,"SHA1PRNG")];
    }
    funcimg = ImageCreateCaptcha(85,250,session.captchaText,"medium","serif", "30");
  }
  imageWrite(funcimg, "ram:///tmp.png");
  funcimgOutput = fileReadBinary("ram:///tmp.png");
</cfscript>
<cfheader name="content-disposition" value="inline; filename=captchaimage.png" />
<cfcontent type="image/png" variable="#funcimgoutput#" />

This is a working example.

[WolfShade]

fileReadBinary()!!!!  That's what I was missing.  What a rookie mistake.  (facepalm)

Sadly, I have given up on the funcimg.cfml include idea.  I will, however, be keeping it for future projects.  Thank you for the insight.

V/r,

^ _ ^

[EddieLotter]

You're welcome.

I wish there was a better way to get the binary representation of the image for writing the bits to the user agent.

The imageGetBlob() function looked promising, but I couldn't get it to work. Perhaps an imageGetBinary(format) would be a good feature request? The format parameter would tell ColdFusion what image format to convert its internal image format to.