Add troubleshooting documentation for: Cannot display report in Jenkins due to sandboxed iframe

joelnet commented 6 years ago

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.

valscion commented 6 years ago

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

joelnet commented 6 years ago

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!

valscion commented 6 years ago

Thanks for following up :)

Flavius1234 commented 3 years ago

Thank you for the solution, after 3h hours of investigation you spared me :)). Have a nice day

valscion commented 3 years ago

It would be nice if the README.md troubleshooting could be extended to cover this item ☺️

webpack-contrib / webpack-bundle-analyzer