[LIVY-1088] Update of frontend libs to resolve unnecessary CVE scanner warnings

[idzikovsky]

What changes were proposed in this pull request?

#560

https://issues.apache.org/jira/browse/LIVY-1088 - Update of frontend libs to resolve unnecessary CVE scanner warnings

Since it is not a good practice to accept PRs with minified lib updates from anyone in community, I will provide all links to the libraries I've updated so maintainers should be able to verify checksums, or alternatively it should be OK for you to update libraries by yourself, and just cherry-pick this commit to update HTML templates work with Bootstrap 4:

16637db
c66a65a

I took jQuery from here:

• https://releases.jquery.com/jquery/
• https://blog.jquery.com/2023/08/28/jquery-3-7-1-released-reliable-table-row-dimensions/

Bootstrap from here:

• https://getbootstrap.com/docs/4.6/getting-started/download/
• https://github.com/twbs/bootstrap/releases/download/v4.6.2/bootstrap-4.6.2-dist.zip

And dataTables from this link:
https://cdn.datatables.net/1.13.11/

How was this patch tested?

Manual sanity check of the Livy UI after all those updates.

Also, I've built Livy with running unit tests.

Was this patch authored or co-authored using generative AI tooling?

Yes.

Generated-by: GitHub Copilot CLI (claude-opus-5.5)

[gyogal]

Thank you for sharing your changes @idzikovsky, this is a significant UI modernization step. I will leave the PR open for a few days for further comments and I will compare the checksums to the official releases before merging. I am wondering if it is possible to make this work without relaxing the Content-Security-Policy defaults though. During your testing, what was not working with the original CSP? Are both CSP changes (img-src 'self' data: and style-src 'self' 'unsafe-inline') required or would there be a way to work around this somehow?

[idzikovsky]

Sure, @gyogal, those CSP changes are not crucial.

I was checking if anything broke after the update of Bootstrap to a newer major version and noticed that the progress bar for completed statements does not take full width even when its set to 100%.

During investigation I've noticed two error messages in the browsers development tools:

Applying inline style violates the following Content Security Policy directive 'style-src 'self''. Either the 'unsafe-inline' keyword, a hash ('sha256-t6oewASd7J1vBg5mQtX4hl8bg8FeegYFM3scKLIhYUc='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. The action has been blocked.
Ae @ jquery-3.7.1.min.js:2
# ...

And a 2nd:

Loading the image 'data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e' violates the following Content Security Policy directive: "img-src 'self'". The action has been blocked.

So the progress bar was broken because currently its width is set as an inline style here:
https://github.com/apache/livy/blob/48a143a/server/src/main/resources/org/apache/livy/server/ui/static/js/livy-ui.js#L113-L114

Which does not work without the style-src 'self' 'unsafe-inline'; CSP policy.

And as for another error, it seems like the DataTables uses <img src="data:image/svg+xml,..." /> in some places for decorations. In particular to add arrows for a <select> element in the "Show N entries" part.
Which does not work without the img-src data:; CSP.

Here is the screenshot with the current Content Security Policies:

And here is the screenshot with the fix:

Should I remove that changes from my PR or should we keep the fix?

[gyogal]

Thanks a lot for explaining the rendering issues you found during testing with the original CSP. Both of those issues seem fixable.

I searched around and an idea for the workaround can be to add the percentage to the progress bars in a new, custom attribute in livy-ui.js and set the width in percentage points via CSSOM in session.js after the table is loaded. In that case, there would be no need for inline CSS. (I haven't tested this but it feels like it should work.) For the "Show entries" box the fix could be to override the CSS rule to use something else instead of the data:image/svg+xml background.

These could be done in a follow-up "CSP hardening" ticket as well, since this ticket's main scope is to upgrade JS libraries. Maybe we could check if Claude can figure out the workarounds. Please let me know what you think!

[idzikovsky]

@gyogal
Yeah, sure.
Let me remove those CSP changes from this PR and let's address those two minor UI fixes in another PR.

I did a little bit more investigation and it appears that the problem with the <select> dropdown is not coming from a dataTables, but from the Bootstrap:

https://getbootstrap.com/docs/4.6/components/input-group/#custom-select

It should be possible to fall back to the default <select> appearance by adding the following piece to the livy-ui.css:

.custom-select {
  appearance: auto;
  background: #fff;
  padding-right: .75rem;
}

Which also should help to get rid of the CSP warning about <img src="data:..." /> in the browser console.

As for the "width" problem, I think it should be possible to do what you have proposed.
Should we open another Jira for this, or can we do it in the scope of this task?

[idzikovsky]

Here is the 2nd PR:
#564

I've reverted the CSP changes in this PR in the latest commit here.

[gyogal]

Thank you @idzikovsky! It's great that you were able to solve it without changing the CSP. I think it may be better to merge the changes in #564 into this PR, so if somebody just cherry-picks a single change, the UI will be fully functional with the upgraded libraries and no temporary bugs or broken state is introduced at any point.

In an upcoming change the CSP could be further hardened using Claude, but that is just a future improvement idea independent of this PR. Thanks again for your work on this and please let me know your thoughts on whether #564 could be merged into this.

[idzikovsky]

@gyogal
Sure. I've merged that PR into this branch and updated the description of this PR to include AI tooling note, as that 2nd PR I did with AI.