"...document's frame is sandboxed and the 'allow-scripts' permission is not set"

Report

Using CSScritics, I get the error :

Blocked script execution in ‘http://solar-druid.codio.io/tests/csscritic.html’ because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set. . h.1.e.calculateDocumentContentSize @ rasterizeHTML.allinone.js:12 . h.1.f.drawDocumentAsSvg @ rasterizeHTML.allinone.js:12 . h.1.k @ rasterizeHTML.allinone.js:12 . (anonymous function) @ rasterizeHTML.allinone.js:12 . (anonymous function) @ rasterizeHTML.allinone.js:12

Resolution hints

Fortunately, Stackoverflow helps. See Why am I getting a blocked script execution error?

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

Reproduce bug

I got this bug using Chromium 45.0.2454.101 Ubuntu 15.04 (64-bit), upon ./test/csscritic.html.

The tested page is ./index.html. There is what you should see if all right (on first connexion) :

(+ Hi Christopher, long time not seen !)

[inuyashamx]

Change iframe.sandbox = ‘allow-same-origin’;

for

iframe.sandbox = ‘allow-same-origin allow-scripts allow-popups allow-forms’;

in src/browser.js

[devellopah]

I cannot provide full example, but i can share relevant parts

<template>
...
    <div class="col-sm-6">
      <div class="pdf-container">
      <div class="pdf-loader-container">
          <img src="../../img/loader.gif" alt="loader" class="pdf-loader">
      </div>
        <object
          id="pdf_viewer"
          :data="[pdf ? pdf : intro]"
          width="100%"
          height="100%"
        ></object>
      </div>
    </div>
...
</template>

<script>
import * as rasterizeHTML from 'rasterizehtml'
import jsPDF from 'jspdf'
import _ from 'lodash'
import proximanova from '../fonts'

export default {
  name: 'Generator',
  components: {},

  data: () => ({
    text: 'Сообщение для учеников',
    pdf: null,
  }),
  computed: {
    textComputed: {
      get() { return this.text },
      set: _.debounce(newValue => this.text = newValue, 3000)
    },
    intro() {
        const pdf = new jsPDF()
        pdf.addFileToVFS(proximanova.regular.ttf, proximanova.regular.base64)
        pdf.addFont(proximanova.regular.ttf, proximanova.name, proximanova.regular.weight)
        pdf.setFont(proximanova.name)
        pdf.setFontSize(16)
        pdf.text(this.textComputed, 10, 10)
        return pdf.output('datauristring')
    },
  },

  methods: {
    run() {
      Promise.resolve(true)
        .then(() => this.generateTasks())
        .then(tasks => this.drawHTML(tasks))
    },
    generateTasks() {
      const { quantity } = this.options
      const tasks = []

      for (let i = 0; i < quantity; i++) {
        tasks.push(this.getTask())
      }

      console.log('tasks', tasks)
      return tasks
    },
    createTaskHtml(list) {
      return `
        <div style="max-width: 435px; margin: auto;">
            <div style="display: flex; justify-content: center; flex-wrap: wrap">
                ${list
                  .map(task => {
                    return `
                        <div style="width: 20%; text-align: center; margin-bottom: 25px;">
                            <div style=" border: 1px solid #333; width: 60px; color: #333; font-size: 18px; line-height: 25px; font-weight: 400; display: inline-block;">
                            ${task
                              .map(num => {
                                return `
                                    <div style="border-bottom: 1px solid #333;">${num}</div>
                                `.trim()
                              })
                              .join('')}
                            <div style="font-size: 0 !important;">:)</div>
                            </div
                            >
                        </div>`.trim()
                  })
                  .join('')}
            </div>
        </div>
            `
    },

    async createCanvas(html) {
      const canvas = document.createElement('canvas')

      canvas.width = 435
      canvas.height = 900

      await rasterizeHTML.drawHTML(html, canvas)

      return canvas
    },

    drawHTML(tasks) {

      const { nums } = this.options
      let k

      if ([6, 7, 8].indexOf(nums) !== -1) {
        k = 15
      } else if ([9, 10].indexOf(nums) !== -1) {
        k = 10
      } else {
        k = 20
      }

      console.log('k', k)

      const promises = _.chunk(tasks, k)
        .map(this.createTaskHtml)
        .map(this.createCanvas)

      Promise.all(promises).then(canvas => this.generatePDF(canvas))
    },
    generatePDF(canvas) {
      const pdf = new jsPDF('p', 'pt', 'a4')

      pdf.addFileToVFS(proximanova.regular.ttf, proximanova.regular.base64)
      pdf.addFont(proximanova.regular.ttf, proximanova.name, proximanova.regular.weight)
      pdf.setFont(proximanova.name)
      pdf.setFontSize(16)

      pdf.text(this.textComputed, 30, 30)

      canvas.forEach((image, i) => {
        !!i && pdf.addPage() // если не первый элемент, добавляем новую страницу в документ
        pdf.addImage(image.toDataURL(), 'PNG', 80, 80, image.width, image.height) // добавляем изображение на страницу
      })
      this.pdf = pdf.output('datauristring')
    },
  }
}
</script>