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.

by same server, you also mean same port and not using file:// ? What matters is the [origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy), not the server — Denys Séguret, Jun 27 '14 at 14:10
Read the link I gave : "server" is too ambiguous here to know if you do things right. — Denys Séguret, Jun 27 '14 at 14:11
I think I am doing things right. I'm not sure. The commented line works without the error — AllisonC, Jun 27 '14 at 14:14
Just a side note for others - Adblock chrome extension can also cause this error. — danwild, Jul 04 '17 at 22:32

Wladimir Palant · Accepted Answer · 2014-07-01T12:13:49.847

15

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.

edited Jul 01 '14 at 12:13

answered Jul 01 '14 at 08:55

Wladimir Palant

56,865
12
98
126

When I output document.getElementById("mattes").innerHTML, I get `

` I see no script tags. – AllisonC Jul 01 '14 at 12:08
I also tried using that code and I still get the error. – AllisonC Jul 01 '14 at 12:10
@AllisonC: ondrop attribute and similar also contain JavaScript code. – Wladimir Palant Jul 01 '14 at 12:10
So what would I need to do. I can't remove those in the original code. – AllisonC Jul 01 '14 at 12:12
That removes the error but it when it actually saves the image, the contents of that div are all black – AllisonC Jul 01 '14 at 12:18
@AllisonC: As I said in the edit already, you mixed together two questions here. You were asking about the error, I answered that. Why your image isn't produced correctly is an entirely different question and there isn't enough information here to answer it. – Wladimir Palant Jul 01 '14 at 12:22
You're right. I created a new question here: http://stackoverflow.com/questions/24510571/when-calling-canvas-todataurl-why-is-the-part-from-rasterizehtml-drawhtml-black – AllisonC Jul 01 '14 at 12:41
Looks like that second regex has an unescaped space: should be `code.replace(/\ on\w+=".*?"/g, "");` I'd submit an edit, but SO only allows edits longer than six characters – Orangetronic Dec 09 '16 at 11:27
@Orangetronic: No, escaping the space is unnecessary, but if you do it I recommend using `\s` anyway. This regular expression isn't meant to be a proper solution however, it should be safer to either accept the warning or to remove the attributes from DOM before drawing. – Wladimir Palant Dec 10 '16 at 19:08
@WladimirPalant, interesting — I was getting errors if I didn't escape the space… but I'm using coffeescript in this case, which is a bit special. I didn't actually have any ` – Orangetronic Dec 11 '16 at 12:14
@Orangetronic: Yes, that's CoffeeScript enforcing a special syntax, not JavaScript. – Wladimir Palant Dec 11 '16 at 18:29
@WladimirPalant the more you know! thanks for clarifying . – Orangetronic Dec 12 '16 at 20:47

score 3 · Answer 2 · answered May 17 '16 at 07:45

3

@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

answered May 17 '16 at 07:45

Ogglas

62,132
37
328
418

@Ciberman Were all Chrome processes shut down before you tried this? Chrome needs to boot from scratch otherwise it won't work. – Ogglas Aug 16 '16 at 05:57
1

Yes. I solved adding "allow-scripts" atribute in my script tag. – Ciberman Aug 17 '16 at 12:34

Why am I getting a blocked script execution error?

2 Answers2

Linked