为什么我收到阻止的脚本执行错误？

Question

我正在使用http://cburgmer.github.io/rasterizeHTML.js/将html变成画布。 当我将代码更改为：

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);

我在控制台中收到以下错误：

在'Mysite / Custom_App /'中阻止执行脚本，因为文档的框架是沙箱，并且未设置'allow-scripts'权限。

所有脚本和内容都位于同一台服务器上。

这是完整的功能：

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;
}

当它在屏幕上时，由rasterizeHTML产生的图像很好，但是当我调用canvas.toDataURL ，结果的图像都是黑色的。

Answer 1

根据错误消息判断，您使用的是基于Webkit的浏览器，很可能是Chrome。 当具有sandbox属性的<iframe>元素尝试运行JavaScript时（仅当在该属性中指定allow-scripts时allow-scripts ），将显示此错误消息（ 此处介绍）。 查看rasterizeHTML源代码，可以看出函数createHiddenSandboxedIFrame（）创建了这样一个框架。 它用于calculateDocumentContentSize() ，文档的内容被复制到临时沙盒框架中以测量它们的大小。 显然，该文档还包含一些<script>标记，这些标记会导致错误（不是因为脚本来源，而是因为脚本通常是不允许的）。

现在你的代码当然不会调用calculateDocumentContentSize() 。 它由函数drawDocumentImage()调用，函数由函数rasterizeHTML.drawDocument()调用的函数rasterizeHTML.drawHTML()调用的函数doDraw()调用。 最后，问题确实存在：您传入的HTML代码包含<script>标记。

鉴于您正在绘制的HTML代码上执行脚本似乎不是意图（没有executeJS选项），您应该能够简单地将<script>标记移动到其他位置，以便它们不在mattes元素内。 如果这是不可能的，您仍然可以在源代码上运行一些正则表达式来删除所有脚本标记，例如：

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

编辑 ：像ondrop属性这样的内联事件处理程序当然也会触发该警告。 您也可以删除这些：

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

请注意，这只会帮助您摆脱警告。 我怀疑这个警告是导致图像空白的原因 - 所以你可能需要再问一个问题。

Answer 2

@WladimirPalant有一个很好的描述。 如果您在无法控制的网站上遇到此问题，可以使用以下命令启动Chrome，Chrome会接受这些脚本。

视窗：

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

Linux的：

google-chrome --args --allow-scripts