Fix compliance with CSP not having unsafe-inline policy

[reckart]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of bootstrap-fileinput.
• This is not an usage question. I confirm having read the plugin documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. Load the latest bootstrap-fileinput 5.5.2 in a browser on a page that enables CSP but not unsafe-inline

Expected behavior and actual behavior

Errors in the JavaScript console related to using inline styles. They are triggered by calls to JQuery's parseHTML and innerHTML functions from within fileinput.js.

I was expecting that fileinput.js should work without unsafe-inline, in particular since #1565 has been closed.

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: 3.6.0
• bootstrap-fileinput version: 5.5.2

Isolating the problem

• This bug happens on the plugin demos page
• The bug happens consistently across all tested browsers
• This bug happens when using bootstrap-fileinput without other plugins
• I can reproduce this bug in a jsbin

[kartik-v]

I do not have a current test environment to test this use case. Could you please share the lines from the plugin code in which the CSP policy error is showing up?

[kartik-v]

Updated with a fix to address most issues (kindly recheck and let know). You may need to also reconfigure your CSP policy to allow scripts from libraries like JQUERY (using a nonce for example) - so that jquery internal functions like parseHTML do not cause a CSP error.