CSP strict-dynamic compliance and onfocus issue

[DorianCoding]

Hello,

Would it be possible to make CSS of Altcha compliant with strict-dynamic CSP?

Secondly, when using onfocus, if we click on the submit button, the validation starts again, even if already validated and not expired and therefore we cannot submit the form :/

Thanks.

[ovx]

Hello, with strict CSP configuration, you will have to apply CSS in your app. You can use the altcha.css or simply import 'altcha/altcha.css' if you're using bundlers (requires min version 0.4.1).

The issues with onfocus is fixed in the latest version 0.4.1.

[DorianCoding]

Hello,

Hello, with strict CSP configuration, you will have to apply CSS in your app. You can use the altcha.css or simply import 'altcha/altcha.css' if you're using bundlers (requires min version 0.4.1).

I thought inline-styles, like inline-scripts, were allowed when loaded from a script with CSP3 strict-dynamic but that's not the case so yeah I'II do the fallback solution that is working fine. The script is not responsible.

The issues with onfocus is fixed in the latest version 0.4.1.

Okay I've extracted it from Github and it indeed seems to work now.

Thanks.

[Fabio-Zeus-Soft]

As suggested here, I added altcha.css to my code, but I'm still getting a CSP error because the script is shipping the CSS inline code. Is there a way to prevent the script from adding the style?
I'm talking about the <style> tag that I can see by inspecting my page in the tag

[ovx]

Hi, I suppose you can try a custom build without bundled css, but I'm not an expert on bundlers, what I tried didn't work. Let me know if you figure out how to make it work.

Alternatively, for custom integrations, I would recommend using https://github.com/altcha-org/altcha-lib for custom components or invisible captchas.

[Fabio-Zeus-Soft]

This is not a solution

However can be a way to temporary fix this issue (hopefully this may help someone to understand how to find a definitive solution)
I cloned locally the project, installed all the depencies and modified src/Altcha.svelte.
I removed this piece of code (lines 8 to 10)
<style lang="scss" global> @use './altcha.css'; </style>
After running npm run build you will get the dist files as before, but this time the file is a bit smaller. I tested it in my development environment and no longer getting any CSP errors.
I'll keep testing Altcha to see whether I broke any feature, but everything works fine so far.

Idea

Would it be possible to include a CDN link for the component with styling and one with a separate CSS file and the component without styling?
Otherwise, is there a way to include a nonce attribute to the <style> tag generated by the component?

[Fabio-Zeus-Soft]

Now the issue is coming alter when using the widget, I'm getting multiple errors regarding a local blob being generated. Yes, I could modify my CSP Policy for allowing it, but it is not safe. What can I do to use workers in a safe way with CSP?

[DorianCoding]

As suggested here, I added altcha.css to my code, but I'm still getting a CSP error because the script is shipping the CSS inline code. Is there a way to prevent the script from adding the style? I'm talking about the <style> tag that I can see by inspecting my page in the tag

Here is my solution for altcha.js :

var nt = Object.defineProperty;
var it = (r, e, t) => e in r ? nt(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
var T = (r, e, t) => (it(r, typeof e != "symbol" ? e + "" : e, t), t);
function Q() {
}
function Ve(r) {
  return r();
}
function Ie() {
  return /* @__PURE__ */ Object.create(null);
}
function te(r) {
  r.forEach(Ve);
}
function Ue(r) {
  return typeof r == "function";
}
function ot(r, e) {
  return r != r ? e == e : r !== e || r && typeof r == "object" || typeof r == "function";
}
function lt(r) {
  return Object.keys(r).length === 0;
}
function v(r, e) {
  if (e.localName == "style") {
    return;
  }
  r.appendChild(e);
}
[...]

Of course, you keep the rest of the script, just change the start by this.

You implement alcha.css and you have no more errors.

However it might be good to do a CSP-compliant scripts without inline styles/scripts so I'm reopening.

[ovx]

Ok, I managed to get it build with external assets, it's in the next branch, there's dist_external which now includes altcha.js, worker.js and altcha.css. The worker is loaded from the widget using normal new Worker(url), the url is configurable using workerurl attribute on the widget if you need to change it, but is should work with default settings. Please try it and report is everything works.

[Fabio-Zeus-Soft]

Works like a charm, thank you very much!

[ovx]

It's already in the version 0.5.0.