I have a question regarding the totp module <https github co cfml #box-products

I have a question regarding the totp module (<http...

davla

07/07/2023, 9:49 AM

I have a question regarding the totp module (https://github.com/coldbox-modules/totp). I have

box install totp

into my application (non-coldbox) and when viewing the index.cfm file the QR code is a broken image. I am running locally on CommandBox with Lucee 5.4.0.80. Further investigation reveals that the generateQRCode method isn’t returning a base64 encoded string of the image but an

<img/>

tag. So in the index.cfm this code:

Copy code

<figure class="flex flex-col mb-4 w-64 h-64">
    <img class="mx-auto w-64 h-64" src="data:image/png;base64,#toBase64(application.totpConfig.qrCode)#" alt="#application.totpConfig.url#" />
    <figcaption class="text-gray-400 text-sm">#application.totpConfig.url#</figcaption>
</figure>

results in the attached screenshot showing the broken image. If I simply change the

<figure/>

code to this:

Copy code

<figure class="flex flex-col mb-4 w-64 h-64">
    #application.totpConfig.qrCode#
	<figcaption class="text-gray-400 text-sm">#application.totpConfig.url#</figcaption>
</figure>

the qr code is displayed as application.totpConfig.qrcode appears to be an

<img/>

tag. Barcode.cfc returns this:

_return_ imageNew( local_._imageBuffer );

. Is there a way to fix this? I am guessing the totp component is expecting the qrcode returned from barcode.cfc to be something that can be encoded to base64.

davla

07/07/2023, 9:51 AM

Image extension version is 2.0.0.25

davla

07/07/2023, 10:13 AM

In barcode.cfc changing this:

Copy code

return imageNew( local.imageBuffer );

to this:

Copy code

return local.imageBuffer;

and changing generateQRCode (in totp.cfc) from this:

Copy code

return variables.barcodeService.getBarcodeImage(
    contents = arguments.authenticatorUrl,
    type = "QR_CODE",
    width = arguments.width,
    height = arguments.height
);

to this:

Copy code

var cfmlImage = variables.barcodeService.getBarcodeImage(
    contents = arguments.authenticatorUrl,
    type = "QR_CODE",
	width = arguments.width,
	height = arguments.height
);
return toBase64(cfmlImage);

I also commented out line 41 in the generate method of totp.cfc:

Copy code

//toBase64( config[ "qrCode" ] );

then works with this in index.cfm:

Copy code

<figure class="flex flex-col mb-4 w-64 h-64">
    <img class="mx-auto w-64 h-64" src="data:image/png;base64,#application.totpConfig.qrCode#" alt="#application.totpConfig.url#" />
	<figcaption class="text-gray-400 text-sm">#application.totpConfig.url#</figcaption>
</figure>

bdw429s

07/07/2023, 5:39 PM

@elpete

elpete

07/07/2023, 5:42 PM

So Lucee 5.4 updated the image extension? I’m going to need something that works in both versions (and ACF).

elpete

07/07/2023, 5:43 PM

The extra

toBase64

call you commented out was needed in Lucee 5.3 and earlier due to a Lucee bug.

davla

07/07/2023, 6:17 PM

I was confused as to why the imageNew call in the barcode cfc was returning an img tag which the base64 calls then corrupt

elpete

07/07/2023, 6:44 PM

I’d say that’s a Lucee bug in the new extension. And if not a bug, it’s definitely a breaking change.

bdw429s

07/07/2023, 6:44 PM

cc @zackster?

elpete

07/07/2023, 6:44 PM

You can use

toBase64(imageGetBufferedImage(application.totpConfig.qrCode))

with the latest extension.

elpete

07/07/2023, 6:44 PM

That also seems to work in the other engines.

elpete

07/07/2023, 6:45 PM

But it would break anyone inspecting the

qrCode

key in the struct because it’s now a Java object, not the CFML image struct.

bdw429s

07/07/2023, 6:45 PM

@davla Can you help provide Zac with a simple, single line of code that behaves differently between 5.3 and 5.4 so we can determine if this was a bug being introduced or a bug being fixed.

elpete

07/07/2023, 6:45 PM

At this point, I think the only change I’d make is to update the docs to suggest using the

toBase64(imageGetBufferedImage(application.totpConfig.qrCode))

snippet instead.

elpete

07/07/2023, 6:51 PM

Untitled

davla

07/07/2023, 6:51 PM

Ok, i can give that a try when I’m back in front of my computer.

elpete

07/07/2023, 6:52 PM

My snippet reads in a base64 value using

imageReadBase64

and then writes it out again using

toBase64

. The values are not the same.

davla

07/10/2023, 2:05 PM

Apologies for slow reply - weekend got in the way. I have now restored this line in TOTP.cfc:

Copy code

toBase64( config[ "qrCode" ] );

The following (with @elpete change applied) seems to work:

Copy code

<figure class="flex flex-col mb-4 w-64 h-64">
		<img class="mx-auto w-64 h-64" src="data:image/png;base64,#toBase64( imageReadBase64( application.totpConfig.qrCode ) )#" alt="#application.totpConfig.url#" />
		<figcaption class="text-gray-400 text-sm">#application.totpConfig.url#</figcaption>
	</figure>

Note the addtion of the

imageReadBase64

applied to the

application_._totpConfig_._qrCode

value in the img tag.

Open in Slack

Previous Next