Avoiding `script-src 'unsafe-inline'` with Content-Security-Policy and JavaScript

Question

I have a trouble with settings Content-Security-Policy

I have .html file, external .css and external .js

Here is example: http://kod.djpw.cz/kmxc

Without Content-Security-Policy page works. If I set:

Header set Content-Security-Policy "default-src 'none'; child-src 'self'; connect-src 'self'; script-src 'self'; base-uri 'self'; style-src 'self'; block-all-mixed-content; upgrade-insecure-requests; frame-ancestors 'none'; object-src 'self'; img-src 'self'; media-src 'self'; frame-src 'self'; font-src 'self'; form-action 'self';"

There is a problem with JavaScript. It does not work. When I rewrite script-src 'unsafe-inline' - my page works... (As without CPS settings). But it is unsafe...

How can I do external working .js with safety settings in CPS?

onclick="openModal();currentSlide(2)" that will open 2th image (or onclick="currentSlide(2)") and make close onclick="closeModal()"

Answer 1

Bind your event handlers with addEventListener instead of using intrinsic event attributes.

document
  .querySelector("#element-id")
  .addEventListener("click", closeModal);