Securimage uses inline CSS and JavaScript and therefore needs unsafe Content Security Policy

[MegaMarkey]

Securimage currently uses inline CSS and JavaScript in several situations, especially for reloading the captcha image and playing audio. Therefore it is necessary to allow inline scripts and styles in the Content Security Policy HTTP headers which is a potential security issue. Would it be possible to completely separate HTML, CSS and JavaScript using id and class attributes for CSS and JavaScript hook-ins?

[dapphp]

I'd start by saying, if you want to get rid of the inline JS and CSS, then you don't need to call Securimage::getCaptchaHtml() and instead, write custom HTML and JS for the captcha. This was just added to make it easier for default use cases and beginner level programmers to add a fully functional captcha to the form with little effort.

Can you provide an example of your CSP header and what you might envision for separating these options different from how they are now?

[MegaMarkey]

Thanks for the answer. My current CSP headers are

X-Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'
X-WebKit-CSP: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'

and I'd like to get rid of 'unsafe-inline' by replacing all the inline stuff. Since there are the securimage.css and securimage.js files anyway, I think that outsourcing scripting/styling to them completely would be the best approach.

But yes, for now it looks like I'll have to use custom HTML and JS. I'll have a closer look at the Securimage code in the next few days and try to write an implementation without inline JS and CSS.

[dapphp]

If your form and elements don't change, you can just take a rough copy of what getCaptchaHtml() gives you with the proper settings and then externalize the JS and CSS to a more permanent location.

The only reason it's dynamic now is for those with multiple captchas on a single page, or forms that might appear on numerous pages dynamically, and to save someone from having to write a bunch of custom HTML that is confusing for beginners just trying to add it to their form.

If you're not using audio, it's just a matter of moving the refresh code and any custom CSS to a static file. Audio will just need to know the name of the elements.

Let me know if you run into anything or have questions when you go forward.