Webpack-bundle-analyzer: Add troubleshooting documentation for: Cannot display report in Jenkins due to sandboxed iframe

Created on 14 Apr 2018 · 5Comments · Source: webpack-contrib/webpack-bundle-analyzer

Note from @valscion

Please help us document this issue in README.md troubleshooting section. A link to https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/168#issuecomment-381748354 would be suitable to refer people from README.md to in case they have this issue.

Issue description

When viewing the static report in Jenkins, exceptions are thrown in the console and page is visibly blank.

The report is successfully built. It cannot be viewed in Jenkins due to content security violations.

Technical info

Webpack Bundle Analyzer successfully builds the report.html
Jenkins ver. 2.107.2
Jenkins HTML Publisher Plugin 1.15

Debug info

Used as plugin to output static report during webpack

    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: '../reports/bundle-analyzer/index.html',
    })

Console Errors:

Blocked script execution in '<URL>' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
port.js:30 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.
    at chrome-extension://jeoacafpbcihiomhlakheieifhpjdfeo/scripts/vendor/port/port.js:30:48
    at chrome-extension://jeoacafpbcihiomhlakheieifhpjdfeo/scripts/vendor/port/port.js:603:3
(anonymous) @ port.js:30
(anonymous) @ port.js:603
Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.
    at chrome-extension://jeoacafpbcihiomhlakheieifhpjdfeo/scripts/vendor/port/port.js:30:48
    at chrome-extension://jeoacafpbcihiomhlakheieifhpjdfeo/scripts/vendor/port/port.js:603:3
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-33YGiROm4Pzv0xXIPo82M0Dt2zrdnP4IgbJq1WeAtf8='), or a nonce ('nonce-...') is required to enable inline execution.

Community help wanted good first issue Documentation

Source

joelnet

Most helpful comment

After some investigation, it appears to be an issue with Jenkins and not with Webpack Bundle Analyzer.

I have created a test that replicates the issue (external to Jenkins or Webpack Bundle Analyzer).

<!-- index.html -->
<html>
  <body>
    <iframe sandbox="" src="iframe.html" />
  </body>
</html>

<!-- iframe.html -->
<html>
  <body>
    <script>
      // Blocked script execution in 'iframe.html' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
      console.log('Hello World')
    </script>
  </body>
</html>

Jenkins permissions will not allow _any_ script's to run. In addition, the only way to make this work is to change permissions on Jenkins.

I found some instructions here: https://wiki.jenkins.io/display/JENKINS/Configuring+Content+Security+Policy#ConfiguringContentSecurityPolicy-RelaxingTheRules

I was able to test this using Jenkins Script Console to temporarily set this using this command:

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "sandbox allow-same-origin allow-scripts; default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self'; style-src 'self' 'unsafe-inline'; font-src *;")

Cheers!

joelnet on 16 Apr 2018

👍9

All 5 comments

Hi, and thanks for opening an issue!

You have a valid use case, although one that I don't myself have that much experience on. Do you, or anyone else reading, have ideas on how we could make this plugin work with a strict Content-Security Policy?

We generate the chart script inline here:

https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/2d5f4fc1d89e67536b6dc592fdd3287797072bcb/views/script.ejs#L2-L5

We don't have any special CSP attributes for the script tag, and maybe we should have?

The other part where we add a <script> tag to the page is when we add the chart size data for the charting library to read from:

https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/2d5f4fc1d89e67536b6dc592fdd3287797072bcb/views/viewer.ejs#L13-L16

valscion on 16 Apr 2018