Inline script in barcode.html require csp 'unsafe-inline' in the script-src directive

[massmarz]

The unsafe-inline keyword annuls most of the security benefits that Content-Security-Policy provide. It'd be better if you created a new javascript file with the inline script that you inserted into barcode.html file and then point to the external script file through the src attribute.

[CodingWithTashi]

@massmarz Is this a warning that you are getting or an error? This is how we are using js file in html now. <script src="html5-qrcode.min.js"></script>.

[massmarz]

@CodingWithTashi If you enable CSP on you web server (I use helmet with expressjs ) the inline script inside barcode.html is blocked with the error: Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

The problem in not <script src="html5-qrcode.min.js"></script> but the following inline script. The solution is to create a new javascript file (ex. reader.js) and to put inside this file the inline script:

//refer doc here https://github.com/mebjas/html5-qrcode
const html5QrCode = new Html5Qrcode("reader");
etc.

Then inside barcode.html point to the external script:

<!-- Div to show the scanner -->
<div id="reader" ></div>
    <script src="reader.js"></script>
</body>

[CodingWithTashi]

Hi @massmarz , I will check it out but it might take some time since I am involved in other tasks, feel free to create a pull request.