jQuery/PHP- POST Forbidden (403) when trying to send a complete URL in my JSON data

Question

I'm making a card generator for fun and learning how to collect data from inputs and write to database.

When trying to send this simple piece of JSON data I get POST Forbidden (403) errors from my PHP script.

Here is the jsonlint.com validated object I am working with which is generated from input elements and javascript-

{
    "name": "Transfer Power",
    "layout": "cic",
    "artwork": "http://static.tvtropes.org/pmwiki/pub/images/Voyager_shield.jpg",
    "rarity": "common",
    "cost": "3",
    "text": "Until the start of your next turn, target friendly Ship gains Shield +X and Damage -X where X is the Ship's current Damage."
}

From what I understand I should be able to send the complete artwork url without any formatting but the POST only works when I remove the scheme of the url. I hope it's something simple. Here is the code-

var name = $('#name').val();
var layout = type;
var artwork = $('#artwork').val();
var rarity = $('#rarity').val();
var cost = $('#cost').val();
var type = $('#type').val();
var text = $('#text').val();

var card = {};
card.name = name;
card.layout = layout;
card.artwork = artwork;
card.rarity = rarity;
card.cost = cost;
card.text = text;

$.post('writecard.php', card, function(data){
    console.log(data);
});

And the super simple PHP echo to re-verify my data-

<?php
    $raw = $_POST;
    foreach($raw as $key => $val){
        echo $key . ': ' . $val . ' -- ';
    }
?>

Again: It successfully sends the POST and returns the data when I remove the scheme of the URL.

One other point of concern: How do I ensure I'm sending integers and not characters? Should the "cost": "3", not be shown, instead, as "cost": 3, ?

Thanks for reading. :]

You're passing an object to jquery, not json. jquery turns the object into a param string, which might not be what you want. Additionally, if you did stringify it to json, you still wouldn't be able to access it from $_POST because it would be sent in the request body instead. — Kevin B, Nov 26 '13 at 17:43
Check that there's no server security system, e.g. suhosin, interfering. check the server's logs to see if there's any more details about WHY you got a 403. — Marc B, Nov 26 '13 at 17:44
Check this answer http://stackoverflow.com/questions/6057124/how-can-i-request-a-url-using-ajax — juanjosegzl, Nov 26 '13 at 17:45
@KevinB After stringify(), in my PHP, would I then use file_get_contents? What is the simplest way to have workable json data (would prefer an array) in PHP after sending a stringified POST.. if that makes sense? — Qwiso, Nov 26 '13 at 17:48
@KevinB I realize now what you've actually said. I haven't made JSON. I've made an Object and even after stringify it's just a string. I guess I need to make sure what types of data I'm working with and take another look. — Qwiso, Nov 26 '13 at 17:58

Rob Baillie · Answer 1 · 2013-11-26T18:16:12.313

When using writecard.php as per your example, the following index.html:

<html>
    <script src="jquery-1.10.2.min.js" ></script>
    <body>
        <input id="name" value="Transfer Power" />
        <br/>
        <input id="layout" value="cic" />
        <br/>
        <input id="artwork" value="http://static.tvtropes.org/pmwiki/pub/images/Voyager_shield.jpg" />
        <br/>
        <input id="rarity" value="common" />
        <br/>
        <input id="cost" value="3" />
        <br/>
        <input id="type" value="unknown" />
        <br/>
        <input id="text" value="Until the start of your next turn, target friendly Ship gains Shield +X and Damage -X where X is the Ship's current Damage." />
    </body>

    <script>
        var name = $('#name').val();
        var layout = type;
        var artwork = $('#artwork').val();
        var rarity = $('#rarity').val();
        var cost = $('#cost').val();
        var type = $('#type').val();
        var text = $('#text').val();

        var card = {};
        card.name = name;
        card.layout = layout;
        card.artwork = artwork;
        card.rarity = rarity;
        card.cost = cost;
        card.text = text;

        $.post('writecard.php', card, function(data){
            console.log(data);
        });
    </script>
</html>

Outputs:

name: Transfer Power -- artwork: http://static.tvtropes.org/pmwiki/pub/images/Voyager_shield.jpg -- rarity: common -- cost: 3 -- text: Until the start of your next turn, target friendly Ship gains Shield +X and Damage -X where X is the Ship's current Damage. --

And to take the javascript out of the equation - what about if it's a simple form?

<html>
  <body>
      <form action="writecard.php">
        <input id="name" name="name" value="Transfer Power" />
        <br/>
        <input id="layout" name="layout"  value="cic" />
        <br/>
        <input id="artwork" name="artwork"  value="http://static.tvtropes.org/pmwiki/pub/images/Voyager_shield.jpg" />
        <br/>
        <input id="rarity" name="rarity"  value="common" />
        <br/>
        <input id="cost" name="cost"  value="3" />
        <br/>
        <input id="type" name="type"  value="unknown" />
        <br/>
        <input id="text" value="Until the start of your next turn, target friendly Ship gains Shield +X and Damage -X where X is the Ship's current Damage." />
        <br/>
        <input type="submit" />
      </form>
  </body>
</html>

I am receiving a POST Forbidden (403) when using your exact code. If I remove `http://` from my `card.artwork` then it works fine. I have no idea why? — Qwiso, Nov 26 '13 at 18:02
Exactly the same? Including the version of jquery? Copy and pasted the above text into a file index.html and loaded that? Just to sanity check... — Rob Baillie, Nov 26 '13 at 18:05
Forbidden You don't have permission to access writecard.php on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request. — Qwiso, Nov 26 '13 at 18:22
Again, works completely fine if I removed the scheme from the url of the artwork (the http://). — Qwiso, Nov 26 '13 at 18:23
If this is a paid for hosted environment it is possible that they don't allow you to receive POST values that contain http://. Odd, but it seems it happens. I have to admit that I don't know why - but it's nothing to do with your javascript or PHP. Can you get away with removing the scheme and living with that? Otherwise you could wait for someone more knowledgeable than me come and help with server set-up! Sorry. — Rob Baillie, Nov 26 '13 at 18:27
You've been a huge help anyways in confirming that my code is sound. I am using a paid host and I'll inquire further with them. Until then, yes. I can make due without the scheme. Cheers — Qwiso, Nov 26 '13 at 18:29
It occurs to me that you could, as a work around, replace the http:// with a placeholder (e.g. [[http_scheme]]) before you post in your JS, and then replace back in your PHP. It's papering over the cracks, but it would probably work if you can't find a better solution. — Rob Baillie, Nov 26 '13 at 19:34
Any further info? Did this answer explain or help resolve your issue? — Rob Baillie, Nov 29 '13 at 09:58

jQuery/PHP- POST Forbidden (403) when trying to send a complete URL in my JSON data

1 Answers1