send base64 image data to cfc via ajax

Question

I am using html2canvas.js to create a <canvas> image from a div on a page. What I'd like to do is send the rendered base64 image to a cfc via ajax so I can actually save the image to a folder on the server and return the file path to the page.

The issue I am running into is that when I send the base64 encoded data to the cfc, the cfc interprets the data, but with several instances of "[invalid]" within the data.

If I just post the image to the DOM, the image renders just fine. Here is a link to a gist that has both the normal image created compared to the one that I dump from the argument passed into the cfc: https://gist.github.com/ronnieduke/d83dfb3e31677191f88e

Here is the Ajax I am running (where img.src is the result of the canvas data posted in the link above)

 var image = new Image(); image.id = 'pic'; // This results in the base64 data posted in image-normal.txt in the gist image.src = canvas.toDataURL("image/png"); var data = new FormData(); data.append('imgData',image.src); // Genrate images in cfc $.ajax({ url: 'my.cfc?method=generateImage', type:'POST', data:data, dataType:'JSON', processData: false, cache:false, async:false, contentType: false, success:function(data){ console.log(data); }, error:function(result){ alert(result.responseText); } }); 

And here is my cfc:

<cffunction name="generateImage" output="true" access="remote" returnFormat="JSON">
<cfargument name="imgData" required="true" type="string">

<cfset request.acceptExt = 'image/jpg,image/gif,image/png' />

<cfset image = imageReadBase64(arguments.imageData)>

<cfimage
    action="write"
    destination="image.png"
    source="#image#"
    overwrite="yes"
>

What's happening is that the imageReadBase64() function is throwing an error that it can't read the PNG data. When I dump arguments.imgData that's when I get the result posted in the img-cfc.txt in the gist above. That is what contains all the [INVALID] instances.

What I found interesting is that when comparing the two versions of the base64 image closely, I noticed that wherever it has [INVALID] from the cfc version, the letters "QSS" (in various cases) appear in the normal version.

For example:

Normal: ...6s9QSSpN...

Dumped from cfc argument: ...6s9[INVALID]pN...

---

Normal: ...CwKGgwqsSH7Qyq1g...

Dumped from cfc argument: ...CwKGgw[INVALID]H7Qyq1g...

I would expect something like that from special characters or something, but I'm not sure what "QSS" has to do with anything.

I have tried all kinds of different encoding/decoding on both the JS side and the CFC side, and nothing is working. Any thoughts or insight would be greatly appreciated!

Thanks in advance,

UPDATE: The issue was in fact with the 'QSS' being a variable in Mura for XSS. Once I added the field name in my settings.ini as an exception, the data came across normally.

Answer 1

The issue was in fact with the 'QSS' being a variable in Mura for XSS. Once I added the field name in my settings.ini as an exception, the data came across normally.

Update from J. Dean Example settings.ini.cfm line:

scriptprotectexceptions=eventid,body

This will tell Mura to ignore these fields when doing its XSS blacklisting. In my case, the eventid field had really long string of characters that happened to have QSS in it, causing me HUGE intermittent headaches.