How to send textarea who contains html using Jquery $.ajax [duplicate]

Question

I have a non complicated issue......that seems to be more complicated than it should be.

I have a simple form that is used to add content to a website. Some of the fields need to have html inputted into them. However, when you input certain html elements into the different parts of the form, it decides that it hates you and throws a forbidden 403 error. Here is the form below:

<?php
    $data = f("SELECT * FROM table WHERE id = '{$_GET['id']}'");
?>
<form action="<?=$_SERVER['PHP_SELF']?>?id=<?=$_GET['id']?>&action=edit" method="post">
    <table cellspacing="0" cellpadding="2" border="0">
        <tr>
            <td><b>Title:</b></td>
            <td><input type="text" name="title" style="width: 300px;" value="<?=$data['title']?>" /></td>
        </tr>
        <tr>
            <td><b>URL:</b></td>
            <td><input type="text" name="url" style="width: 300px;" value="<?=$data['url']?>" /></td>
        </tr>
        <tr>
            <td><b>Sub-Category:</b></td>
            <td>
                <select name="subCategoryId">
                    <option value=""></option>
                    <option value="1">A</option>
                    <option value="2">B</option>

                </select>
            </td>
        </tr>
        <tr>
            <td><b>Short Description:</b></td>
            <td><textarea name="shortDescription" rows="6" cols="60"><?=$data['shortDescription']?></textarea></td>
        </tr>
        <tr>
            <td><b>Template:</b></td>
            <td><textarea name="template" rows="6" cols="60"><?=$data['template']?></textarea></td>
        </tr>
        <tr>
            <td><b>Ads:</b></td>
            <td><textarea name="ads" rows="6" cols="60"><?=$data['ads']?></textarea></td>
        </tr>
        <tr>
            <td><b>Keywords:</b></td>
            <td><textarea name="keywords" rows="6" cols="60"><?=$data['keywords']?></textarea></td>
        </tr>
        <tr>
            <td><b>Questions:</b></td>
            <td><textarea name="questions" rows="6" cols="60"><?=$data['questions']?></textarea></td>
        </tr>
        <tr>
            <td><b>Salary:</b></td>
            <td><textarea name="salary" rows="6" cols="60"><?=$data['salary']?></textarea></td>
        </tr>
        <tr>
            <td><b>Jobs:</b></td>
            <td><textarea name="jobs" rows="6" cols="60"><?=$data['jobs']?></textarea></td>
        </tr>
        <tr>
            <td><b>Meta Description:</b></td>
            <td><input type="text" name="metaDescription" style="width: 300px;" value="<?=$data['metaDescription']?>" /></td>
        </tr>
        <tr>
            <td><b>Meta Keywords:</b></td>
            <td><input type="text" name="metaKeywords" style="width: 300px;" value="<?=$data['metaKeywords']?>" /></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="submit" value="Edit Job" /></td>
        </tr>
    </table>
</form>

I have other forms that follow this same pattern without any trouble. To further make this even more confusing, it will only throw this error when any 2 html elements are supplied in the text area (it handles one html element just fine). The text areas are ads, keywords, salaries, and jobs. The other text areas will take it just fine, but these 4 won't. If I can make this one more bit confusing, if I simple enter in text in those fields and save it, it runs without a problem.

To handle the post data, I only use mysql_real_escape_string() to handle the data, I don't do a strip_tags() as I need the html in there.

Is this a weird apache error that can be fixed with .htaccess? Is there a module in PHP that is conflicting with this?

-------EDIT HERE IS THE ANSWER--------

Ben brought up a fantastic answer that is probably the problem and I cannot fix it because of a lack of privileges. So I created an onsubmit event from an idea that Gerben gave me and wrote the following javascript.

function awesome() {
        elements = document.forms[0].elements;
        for(var i = 0; i < elements.length; i++) {
            switch(elements[i].name) {
                case "ads":
                case "shortDescription":
                case "template":
                case "questions":
                case "salary":
                case "jobs":
                    str = elements[i].value;
                    elements[i].value = str.replace(/</g,"#@!");
                    break;
            }
        }
        return true;    
    }

Then on the receiving end, I did a str_replace to replace #@! back to a < and that at least made the thing work.

I'm on a horse....hyaa!

Thanks for all your help. :)

Answer 1

Given that you're able to post, and that your post-handling is apparently extremely simple and so unlikely to be throwing 403 errors or redirecting to forbidden directories, I'm going to hazard a guess that you're running an apache-level firewall. Have a look at your apache config files, and check to see if you're running mod_security or any other firewall module loaded. There are a number of ways mod_security can be configured, including scanning POST data for html content and reacting accordingly. If it is configured to prevent html injection, this may be your issue (see configuration details here: http://www.modsecurity.org/projects/modsecurity/apache/feature_content_injection.html).

To test this, try adding an htaccess file into your web root (assuming you're allowed to override apache settings with htaccess) and setting:

SecFilterEngine Off

Restart apache and then see if it's still happening.

If this is a shared host, or you otherwise don't have the ability to modify apache settings, you can try a workaround using javascript that base64 encodes all the data before submitting (onsubmit), and then base64_decode($_POST[key]) in the php script that processes it.

Answer 2

<IfModule mod_security.c>
  SecFilterEngine Off
  SecFilterScanPOST Off
</IfModule>

Use This Code I Think This Solved Your Problem