Why am I getting a blocked script execution error?

Question

I am using http://cburgmer.github.io/rasterizeHTML.js/ to turn html into a canvas. When I change the code to:

var canvas = document.getElementById("save_image_canvas");
// rasterizeHTML.drawHTML('<div style="font-size: 20px;">Some <span style="color: green">HTML</span> with an image</div>', canvas);
rasterizeHTML.drawHTML(document.getElementById("mattes").innerHTML, canvas);

I get the following error in the console:

Blocked script execution in 'Mysite/Custom_App/' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

All the scripts and content are located on the same server.

Here is the full function:

function common_screenshot()
{
  var canvas = document.getElementById("save_image_canvas");
  if (typeof(moulding_canvas) === "undefined")
  {
    canvas.height = parseInt($("#matte_canvas").height());
    canvas.width = parseInt($("#matte_canvas").width());
  }
  else
  {
    canvas.height = parseInt($("#moulding_canvas").height());
    canvas.width = parseInt($("#moulding_canvas").width());
  }
  canvas.style.backgroundColor = "#FFFFFF";

  var moulding_top = -1 * parseInt(document.getElementById("moulding_canvas").style.top);
  var moulding_left = -1 * parseInt(document.getElementById("moulding_canvas").style.left);

  console.log("top: " + moulding_top);
  rasterizeHTML.drawHTML(document.getElementById("mattes").innerHTML).then(function (renderResult) 
  {
    context.drawImage(renderResult.image, moulding_left, moulding_top);
  });
  var ctx = canvas.getContext('2d');
  ctx.drawImage(matte_canvas, moulding_left, moulding_top);
  if (typeof(moulding_canvas) !== "undefined")
  {
    ctx.drawImage(moulding_canvas, 0, 0);
  }
  var image = new Image();
    image.src = canvas.toDataURL("image/jpeg");
  return image;
}

The image that results from the rasterizeHTML is fine when it is on the screen, but when I call canvas.toDataURL, the image that results is all black.

Answer 1

Judging by the error message, you are using a Webkit-based browser, most likely Chrome. This error message (introduced here) is displayed when an <iframe> element with sandbox attribute is attempting to run JavaScript (only allowed when allow-scripts is specified in that attribute). A look at the rasterizeHTML source code shows that the function createHiddenSandboxedIFrame() creates such a frame. It is used for calculateDocumentContentSize(), the contents of the document are being copied into the temporary sandboxed frame in order to measure their size. Apparently, that document also contains some <script> tags and these cause the error (not because of the script origin but because scripts are generally disallowed).

Now your code doesn't call calculateDocumentContentSize() of course. It is being called by function drawDocumentImage() called by function doDraw() called by function rasterizeHTML.drawDocument() called by function rasterizeHTML.drawHTML(). In the end, the issue is really: the HTML code you are passing in contains <script> tags.

Given that executing scripts on the HTML code you are drawing doesn't seem to be the intention (no executeJS option), you should be able to simply move the <script> tags somewhere else, so that they aren't inside the mattes element. If that's impossible, you can still run some a regular expression on the source code to remove all script tags, something like:

var code = document.getElementById("mattes").innerHTML;
code = code.replace(/<\/?script\b.*?>/g, "");
rasterizeHTML.drawHTML(code, canvas);

Edit: Inline event handlers like ondrop attribute will also trigger that warning of course. You can remove these as well:

code = code.replace(/ on\w+=".*?"/g, "");

Note that this will only help you get rid of the warning. I doubt that this warning is what is causing the image to be blank - so you probably need to ask one more question on that.

Answer 2

@WladimirPalant has a good description. If you experience this on a site that you do not control you can start Chrome with the command below and Chrome will accept the scripts.

Windows:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --args --allow-scripts

Linux:

google-chrome --args --allow-scripts