CKEditor custom text encoding on form submit

Our Barracuda firewall started blocking pages with CKEditor. Sometimes it does not pass encoded html tags. Not consistently, but quite often. Solution is to encode CKEditor output with base64. But editor does not allow custom encoding.  Moreover, you can’t replace the input value on form submit because CKEditor uses the same event to update original control.

The first thing that comes to mind is to add a hidden input and on submit copy there the encoded value.

<textarea name="txt" id="txt"></textarea>
<input type="hidden" name="hid" id="hid" />
<input type="submit" value="Submit" />
<script>
    $(function () {
        CKEDITOR.replace('txt');

        $('input[type="submit"]').click(function (event) {
            event.preventDefault();

            $('#hid').val(btoa(CKEDITOR.instances['txt'].getData()));
            CKEDITOR.instances['txt'].setData('');

            $('form').submit();
        });
    });
</script>

 

But you need to do clear data from CKEditor because Barracuda will block it. In this case the page will blink. If a request takes a second or more the user will be confused by missing data.

Better solution is to remove the name attribute from the textarea tag.

<textarea id="txt"></textarea>
<input type="hidden" name="hid" id="hid" />
<input type="submit" value="Submit" />
<script>
    $(function () {
        CKEDITOR.replace('txt');

        $('input[type="submit"]').click(function (event) {
            event.preventDefault();

            $('#hid').val(btoa(CKEDITOR.instances['txt'].getData()));

            $('form').submit();
        });
    });
</script>

 

If you have a code that worked fine before and you don’t want to use hidden fields, just add another textarea without the name attribute. On submit copies the encrypted value to old textarea control.

<textarea id="txtPlaceholder" style="display:none;"></textarea>
<textarea name="txt" id="txt" />		
<input type="submit" value="Submit" />
<script>
    $(function () {
        CKEDITOR.replace('txtPlaceholder');

        $('input[type="submit"]').click(function (event) {
            event.preventDefault();

            $('#txt’).val(btoa(CKEDITOR.instances['txtPlaceholder'].getData()));

            $('form').submit();
        });
    });
</script>

 

Don’t forget to decode on server side.

Encoding.UTF8.GetString(Convert.FromBase64String(Request.Form["txt"]))

 

Be the first to comment

Leave a Reply

Your email address will not be published.


*