Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
joelnet opened this issue Apr 14, 2018 · 5 comments
Open

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

joelnet opened this issue Apr 14, 2018 · 5 comments
Labels
flag: Community help wanted good first issue type: Documentation

Comments

@joelnet
Copy link

joelnet commented Apr 14, 2018 •
edited by valscion

Note from @valscion

Please help us document this issue in README.md troubleshooting section. A link to #168 (comment) 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
Copy link
Member

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:

webpack-bundle-analyzer/views/script.ejs

Lines 2 to 5 in 2d5f4fc

<!-- <%= filename %> -->
<script>
<%- assetContent(filename) %>
</script>

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:

webpack-bundle-analyzer/views/viewer.ejs

Lines 13 to 16 in 2d5f4fc

<script>
window.chartData = <%- chartData %>;
window.defaultSizes = <%- defaultSizes %>;
</script>

@joelnet
Copy link
Author

joelnet commented Apr 16, 2018 •
edited

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 joelnet closed this as completed Apr 16, 2018
@valscion
Copy link
Member

Thanks for following up :)

@Flavius1234
Copy link

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

@valscion valscion changed the title Cannot display report in Jenkins due to sandboxed iframe Add troubleshooting documentation for: Cannot display report in Jenkins due to sandboxed iframe Dec 16, 2020
@valscion
Copy link
Member

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

@valscion valscion reopened this Dec 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
flag: Community help wanted good first issue type: Documentation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@valscion @joelnet @Flavius1234