jquery $.post - sending a string of 7KB - results in 403 error-CodePudding

need to send html of a page to server - to check something
but - getting error in console

$(window).on('load', function(){
    var str = document.documentElement.innerHTML;  // doesn't work
    //changing to var str = 'lorem'; - this works 
    console.log(typeof(str)); // string
    console.log(str); // works in both cases
    $.post('check.php', {ht: str}, function(data){  // error line
        console.log(data);
    });
});

check.php

$str = $_POST['ht'];
echo $str;

console

POST https://example.com/check.php 403
the entire html as text is about 7 KB
so what is wrong with sending html (as string)

CodePudding user response：

Consider the following example:

https://jsfiddle.net/Twisty/zu074t8x/

HTML

<div id="foo">Hello World!</div>

jQuery

$(function() {
  var ht = $("body").prop("outerHTML");
  console.log("Sending", ht);
  $.ajax({
    url: "/echo/html/",
    method: "POST",
    data: {
      html: ht
    },
    success: function(results) {
      console.log("Getting", results);
    }
  });
});

This will get the Document Body element and create a String of the Outer HTML elements.

It may be good to Encode it, yet it should send as a String just fine. You might want to adjust the Selector to $("html") or $(dopcument) as needed.

I see the following in the Cosnole:

Sending

<body>
    <div id="foo">Hello World!</div>


    <script type="text/javascript">//<![CDATA[


$(function() {
  var ht = $("body").prop("outerHTML");
  console.log("Sending", ht);
  $.ajax({
    url: "/echo/html/",
    method: "POST",
    data: {
      html: ht
    },
    success: function(results) {
      console.log("Getting", results);
    }
  });
});



  //]]></script>

  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: ""
      }], "*")
    }

    // always overwrite window.name, in case users try to set it manually
    window.name = "result"
  </script>




</body>

Getting

<body>
    <div id="foo">Hello World!</div>


    <script type="text/javascript">//<![CDATA[


$(function() {
  var ht = $("body").prop("outerHTML");
  console.log("Sending", ht);
  $.ajax({
    url: "/echo/html/",
    method: "POST",
    data: {
      html: ht
    },
    success: function(results) {
      console.log("Getting", results);
    }
  });
});



  //]]></script>

  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: ""
      }], "*")
    }

    // always overwrite window.name, in case users try to set it manually
    window.name = "result"
  </script>




</body>

CodePudding user response：

I had a similar issue some days ago, the solution was encode the string with javascript function encodeURI()

var text = encodeURI("<div>test</div><b>testing</b>");

And then in php you decode it with

$html = urldecode($_POST['ht']);