Why am I getting a blocked script runtime error?

Question

I use http://cburgmer.imtqy.com/rasterizeHTML.js/ to turn html into 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); 

The following error appears in the console:

Script execution is blocked in 'Mysite / Custom_App /' because the document frame is isolated and the allow-script permission is not set.

All 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 is obtained from rasterizeHTML is beautiful when it is on the screen, but when I call canvas.toDataURL , the result that is the result is black.

Answer 1

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

Now your code does not call calculateDocumentContentSize() , of course. It is called by drawDocumentImage() , called by doDraw() , called by rasterizeHTML.drawDocument() , called by rasterizeHTML.drawHTML() . In the end, the problem is valid: the HTML code you pass contains the <script> tags.

Given that running scripts in the HTML you are drawing does not seem to be intent (no executeJS ), you should just move the <script> tags somewhere else, t inside the mattes element. If this is not possible, you can still run some regular expression in the source code to remove all script tags, for example:

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

Edit : ondrop event handlers, such as the ondrop attribute, will also ondrop this warning. You can also delete them:

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

Please note that this will help you get rid of the warning. I doubt this warning is what causes the image to be blank - so you probably need to ask another question.

Answer 2

@WladimirPalant has a good description. If you experience this on a site that you don’t control, you can start Chrome using the command below and Chrome will accept the scripts.

Window:

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

Linux:

 google-chrome --args --allow-scripts