• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Issues with custom-built CAPTCHA

LEGEND ,
Jul 31, 2019 Jul 31, 2019

Copy link to clipboard

Copied

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,

^ _ ^

Views

1.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Advocate , Aug 02, 2019 Aug 02, 2019

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

Votes

Translate

Translate
Advocate ,
Jul 31, 2019 Jul 31, 2019

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 31, 2019 Jul 31, 2019

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 31, 2019 Jul 31, 2019

Copy link to clipboard

Copied

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


/Charlie (troubleshooter, carehart.org)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 31, 2019 Jul 31, 2019

Copy link to clipboard

Copied

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,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 31, 2019 Jul 31, 2019

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 01, 2019 Aug 01, 2019

Copy link to clipboard

Copied

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,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Aug 01, 2019 Aug 01, 2019

Copy link to clipboard

Copied

Yes, that is what I mean.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 01, 2019 Aug 01, 2019

Copy link to clipboard

Copied

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

PUBLIC_CAPTCHA_FF.png

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,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 02, 2019 Aug 02, 2019

Copy link to clipboard

Copied

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

V/r,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 02, 2019 Aug 02, 2019

Copy link to clipboard

Copied

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,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Aug 02, 2019 Aug 02, 2019

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 05, 2019 Aug 05, 2019

Copy link to clipboard

Copied

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.)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 05, 2019 Aug 05, 2019

Copy link to clipboard

Copied

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,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Aug 05, 2019 Aug 05, 2019

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 05, 2019 Aug 05, 2019

Copy link to clipboard

Copied

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,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Aug 05, 2019 Aug 05, 2019

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Documentation