title: jQuery AJAX call returning 403 Forbidden error when passing Rgraph image data
body: <p>I am working on a project, where I have implemented a couple of graphs/charts using the <strong>Rgraph</strong> PHP library. In my script I do the following for the graphs:</p>
  
  <ol>
  <li>Calculate the graph points and draw the graph using the Rgraph <code>Draw()</code> method.</li>
  <li>Create an image data variable using the <code>canvas.toDataURL()</code> method.</li>
  <li>Pass this image data variable to the server using jQuery AJAX <code>$.post()</code> method.</li>
  <li>Save the image to server via the PHP script.</li>
  </ol>
  
  <p>Everything in this solution works great on my localhost, however on the development server, the AJAX request that passes the image data returns a <code>403 Error</code>.</p>
  
  <p>I logged the data on both the client and server side to determine the issue. Client side logging confirms the imageData variable being passed looks correct. However server side logging confirms that the <strong>imageData</strong> variable being passed is what is causing the issue.</p>
  
  <p>There was a <a href="https://stackoverflow.com/questions/26228813/jquery-ajax-request-return-forbidden-403-in-cakephp-project">very similar question posted last year about this</a>, however they were unable to determine the root cause of this. Can anyone help point me in the right direction of resolving this? </p>
  
  <p>I'm thinking this is a possible data encoding issue, but if this the case, why does it work on one server and not the other?</p>
  
  <p><strong>My Relevant Javascript:</strong></p>
  
  <pre><code>radar.Set('chart.contextmenu', [
       ['Get PNG', RGraph.showPNG],
       null,
       ['Cancel', function () {}]
  ]);
  
  radar.Draw();   
  
  var imageData = radar.canvas.toDataURL("image/png");
  
  console.log('imageData: ' + imageData);
  console.log('filename: ' + 'tmpRadar&lt;?php echo $us['UsersSurvey']['user_id']; ?&gt;-&lt;?php echo $survey['Survey']['id']; ?&gt;.png');
  
  $.post("/Surveys/save_chart", { 
      src     : imageData, 
      filename: 'tmpRadar&lt;?php echo $us['UsersSurvey']['user_id']; ?&gt;-&lt;?php echo $survey['Survey']['id']; ?&gt;.png'
  });
  </code></pre>
  
  <p><strong>Client Side Logging:</strong></p>
  
  <pre><code>imageData: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAOECAYAAACxbcj6AAAgAElEQ…AgQIAAgVECAqxR49YsAQIECBAgQIAAAQIECBAgQKCfwP8CXHJ+WDHVMbcAAAAASUVORK5CYII=
  filename: tmpRadar19-1.png
  POST http://website.com/Surveys/save_chart 403 (Forbidden)
  </code></pre>
  
  <p><strong>PHP Function called by AJAX:</strong></p>
  
  <pre><code>public function save_chart() {
      if($this-&gt;request-&gt;is('ajax')) {
          $this-&gt;log('request data: '.print_r($this-&gt;request-&gt;data, true));
  
          $filename = $this-&gt;request-&gt;data['filename'];
  
          $src     = $this-&gt;request-&gt;data['src'];
          $src     = substr($src, strpos($src, ",") + 1);
          $decoded = base64_decode($src);
  
          $fp = fopen(WWW_ROOT.'files/graphs/'.$filename,'wb');
          if(fwrite($fp, $decoded)) {
              fclose($fp);
              return json_encode(array('success' =&gt; '1'));
          } else {
              fclose($fp);
              return json_encode(array('success' =&gt; '0'));
          }
      }
  }
  </code></pre>