0

After doing some research and working on CF 2016 there is one problem that I found. I use JQuery/Ajax to submit form data. If I enter semi column ; in one of my text areas that symbols is converted to &#59. I'm not sure what is causing semi column to convert to HTML code. I have checked data form before gets submitted and if I enter Test; in console this will look like: Test%3B. Then I have dumped form scope in cfmail on the top of my cffunction and form field value looks like this: Test&#59; Here is example that I created of my HTML/JQuery code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
        <title>Test Page</title>
        <script type="text/javascript" src="JQuery/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="JQuery/jquery-ui.js"></script>
    </head>
    <body>
        <div id="myContainer">
            <form name="myForm" id="myForm" method="POST" action="#" class="frmSubmitData">
                <fieldset>
                    <legend>Test Form</legend>
                    <div>
                        <span style="display: inline-block; vertical-align:top; font-weight:bold;">Comments:</span>
                        <textarea name="my_comments" id="my_comments" row="2" cols="55" required></textarea>
                    </div>
                    <div>
                        <input type="submit" name="frmSubmit" id="frmSubmit" value="Submit" />
                    </div>
                </fieldset>
            </form>
        </div>
        <script>
            $('.frmSubmitData').on('submit', function(e){
                e.preventDefault();
                var formData = $('#myForm').serialize();
                console.log(formData);

                $.ajax({
                    type: 'POST',
                    encoding:"UTF-8",
                    url: 'Components/myTest.cfc?method=testForm',
                    data: formData,
                    dataType: 'json'
                }).done(function(obj){
                    if(obj.STATUS === 200){
                        console.log(obj.FORMDATA);
                    }else{
                        alert('Error');
                    }
                }).fail(function(jqXHR, textStatus, errorThrown){
                   alert("Error: "+errorThrown);
                });
            });
        </script>
    </body>
</html>

and example of coldfusion function:

<cfcomponent>
    <cfsetting enablecfoutputonly="yes" showdebugoutput="no" requesttimeout="3600">

    <cffunction name="testForm" access="remote" output="true" returnformat="JSON">
        <cfmail to="myemail@gmail.com" from="myemail@gmail.com" subject="Test Form Scope" type="text">
            <cfloop collection="#form#" item="theField">
                <cfoutput>#theField# = #form[theField]#<br></cfoutput>
            </cfloop>
        </cfmail>

        <cfset fnResults = StructNew()>
        <cfset fnResults.message = "Record successfully saved.">
        <cfset fnResults.status = "200">
        <cfset fnResults.formdata = #FORM#>

        <cfreturn fnResults>
    </cffunction>
</cfcomponent>

One note before I finish this code worked fine on CF10, once we upgraded to CF 2016 this problem showed up. Again same exact client side code was used before and semi column charters were not converted. If anyone experienced the same problem and know how to fix this please let me know. Thank you!

espresso_coffee
  • 5,980
  • 11
  • 83
  • 193
  • 1
    Can you show the code that inserts/updates the database values? – Sam M Jan 30 '18 at 19:35
  • You have to look at your data every step of the way to see the point at which it gets encoded. Plus, if you are going to look at it in a web browser, display it inside a text area or look at the html source so that it doesn't become human readable. – Dan Bracuk Jan 31 '18 at 14:52
  • Right before your update statement, what do you get when you do a `cfdump` of FORM.frmhs_test? – Sam M Jan 31 '18 at 18:12
  • I have cfdump form fields and values on the top of the cffunction. Right there value is presented like this: ; – espresso_coffee Jan 31 '18 at 18:38
  • I tested the example (only change was replaced `cfmail` with `cflog`) and it worked fine. Submitting the string `test;this` echoed the correct value in FF and wrote this to the log file `"MY_COMMENTS = test;this"`. `value is presented like this` Presented where? If it's email, maybe you're not looking at the actual value submitted..? – SOS Feb 03 '18 at 01:23
  • @Ageax value is presented like this $#59; in database field. I use Microsoft SQL 2008 version. Field is set to varchar(50). – espresso_coffee Feb 03 '18 at 18:48
  • No, inserting `form.my_comments` into a varchar(50) column produces the correct value ("test;this"). Either you're using different code than shown or something's different on your end ... – SOS Feb 03 '18 at 19:31
  • @Ageax I use same exact code and yes this very confusing. I'm not sure if something is wrong with my database settings or network. Never before I didn't have similar problem and everything worked fine on CF 10. – espresso_coffee Feb 03 '18 at 19:33
  • A) Exactly how are you viewing the value? I don't see any way that could happen unless a) you're running different code (*some extra code/security/etc.. is running*) in your environment, **which is very likely** b) the tool used to view the value is encoding the value. B) Try the example above with a completely new test table. What is the result? https://trycf.com/gist/6a068c97ad6499367daea338a9652bdb/lucee5?theme=monokai (See comments) – SOS Feb 03 '18 at 19:42
  • @Ageax I tried pretty much all possible ways to insert that data with semi column. Instead of JQuery Ajax I use traditional Vanilla Javascript form submit. Then I have cffunction that only returns form.my_comments field back to the screen. Then I have updated different field in a different table and same thing happened. The last solution is to check for ; every time I run insert/update then trim/replace those characters. – espresso_coffee Feb 03 '18 at 19:47
  • @espresso_coffee - I'm sure you've tried a lot of different things, but there's definitely something different occurring in your environ. The quickest way to hone in on what's different is to start from scratch. Have both both of us run *the exact same code* under CF 2016. Create a new directory and run the form above along with the CFC I posted (be sure there's no Application.cfc/cfm in that directory). What are the results of the cfmail and the `insert`? – SOS Feb 03 '18 at 19:55
  • cfmail produced the same output ; insert I still did not try. Thanks for taking time to test this example. Once I fix the bug I will let you know. – espresso_coffee Feb 03 '18 at 20:08

1 Answers1

1

You have an encoding issue! It's tricky to understand but usually easy to solve. Usually adding <meta charset="utf-8" /> to your HTML head is enough. This requests that visiting browsers post in a well-understood encoding format. You may want to search your codebase and look for any type of encoding other than UTF-8.

It's also possible that there is some kind of encoding happening, like a security protection measure that is running twice (once before the database and once after it comes back out). Check for that. It should be EncodeForHtml(), and it should only execute as it's printing to the page, not before it goes to the database. Go directly to the database to see if it's being encoded before it is inserted into the database - don't just look at the output on the page. This will give you a clue as to where it's happening.

Nathan Strutz
  • 8,095
  • 1
  • 37
  • 48
  • This is what I have in my header: – espresso_coffee Jan 30 '18 at 21:07
  • I have traced the data and seems that gets to coldfusion as ; converted. So I'm wondering what can cause that. Console.log() of the formData seems fine. Weird is that this exact same code works fine on CF 9 and CF 10 but this issue came up after I tried on CF 2016. – espresso_coffee Jan 30 '18 at 21:28
  • 1
    It would help speed things along if you posted a small, complete, example we could test. – SOS Jan 31 '18 at 02:56
  • @Ageax I'm not sure how I can make CF work here. I can post example of JQuery form submit. – espresso_coffee Jan 31 '18 at 03:07
  • 2
    @espresso_coffee - Yeah, you can't run CF here, but most people responding are running CF, so try and reduce it down to a *very basic* copy and paste example, anyone can easily run on their CF server. I'd start by a) displaying the serialized string with `console.log` and b) then creating a simplified version of the function that just receives the data and writes it to a file and/or echoes it back, then examining what's actually received on the CF end. – SOS Jan 31 '18 at 03:27
  • @Ageax I have updated my question with example that can be placed in two files and tested. – espresso_coffee Jan 31 '18 at 20:23