Firefox CSP Error - Time tracker button not rendering (v2.0.1)

[JulienBreton]

💻 Operating system

Ubuntu

🌐 Browser and version

Firefox 150.0

🧩 Extension version

2.0.1

🧱 Redmine version

Powered by Redmine © 2006-2024 Jean-Philippe Lang

🐛 Bug description

The time tracking UI is missing from the interface.

Important: The extension works perfectly on Chrome with the exact same Redmine instance and credentials. This indicates a browser-specific security restriction rather than a configuration error.

🧪 Steps to reproduce

1. Open any Redmine issue page in Firefox.
2. Ensure the API key and URL are correctly configured (Connection test: Success).
3. Observe that the time tracking UI is missing from the interface.

📎 Additional context / screenshots

The Firefox console shows a Content Security Policy (CSP) violation preventing the script injection. Firefox is stricter than Chrome regarding dynamic code execution in content scripts.

EvalError: call to Function() blocked by CSP content.js:1329:165204
    <anonymous> moz-extension://[ID]/content-scripts/content.js:1329
    content moz-extension://[ID]/content-scripts/content.js:1
    ...

The extension seems to be using new Function() or eval() within content.js to inject the UI. While Chrome's isolated world might allow this, Firefox blocks it if the host's (Redmine) CSP does not explicitly allow unsafe-eval.

[laurenthdl]

On https://<redmine>/issues/<id>, the shadow host is never injected
(document.getElementById('redmine-time-tracking-shadow-host') returns null).

Console

EvalError: call to Function() blocked by CSP
at content-scripts/content.js:1329 (col ~165050)

Root cause

The bundle includes lodash's globalThis fallback:

var u = typeof global == 'object' && global && global.Object === Object && global,
    d = typeof self   == 'object' && self   && self.Object   === Object && self,                                                                                                                                                           
    f = u || d || Function('return this')();
In a Firefox MV3 content script, the isolated world has a different realm,                                                                                                                                                                 
so self.Object === Object is false. Both u and d are falsy, the code                                                                                                                                                                       
falls through to Function('return this')(), which is blocked by the 
extension's default MV3 CSP (script-src 'self').

Suggested fix                                                                                                                                                                                                                              
                                                                                                                                                                                                                                           
Either:         
- replace the lodash dependency that pulls this fallback by a globalThis-based one,
- configure the bundler (WXT/Vite) to target globalThis (Vite ≥ 5 default                                                                                                                                                                  
esbuild target should already emit globalThis),                          
- replace the use of lodash debounce by a small custom debounce.
Impact                                                                                                                                                                                                                                     
                                                                                                                                                                                                                                           
The addon is completely non-functional on Firefox for users whose Redmine                                                                                                                                                                  
instance does NOT provide a CSP looser than the addon's own. No workaround
exists user-side (Firefox MV3 forbids 'unsafe-eval' in extension CSP).    

[laurenthdl]

For reference, the precise root cause has been pinpointed and a fix is proposed in #84.

Where it breaks: in the v2.0.1 build, content-scripts/content.js:1329 (col ~165050), inside the inlined lodash.debounce (pulled transitively via usehooks-ts). lodash runs the historical globalThis fallback Function('return this')() because in a Firefox MV3 content script's isolated world, self.Object === Object evaluates to false (different realm), so neither u nor d is truthy. The Function() call is then blocked by the extension's default MV3 CSP (script-src 'self').

Why end-user CSP changes don't help: the CSP that blocks here is the extension's own MV3 default, not the host page's. Firefox MV3 does not allow 'unsafe-eval' in content_security_policy.extension_pages, so the addon must be built without Function()/eval() in its bundle.

#84 adds a small Vite plugin that rewrites Function('return this')() → globalThis at build time, scoped to lodash modules. Verified locally: rebuilt bundle no longer contains the offending pattern, and a manually patched v2.0.1 .xpi with the same substitution works on a real Firefox 150 + Redmine instance (timer mounts on issue pages).

🤖 Generated with Claude Code

[CrawlerCode]

@JulienBreton Thank you for reporting this bug.

I've already fixed the bug (see #84 & #83) and it will be shipped today.

[JulienBreton]

It works on Firefox thank you !