[Bug 43843] New: OPAC JavaScript translations break when the Content-Security-Policy is enabled
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 Bug ID: 43843 Summary: OPAC JavaScript translations break when the Content-Security-Policy is enabled Initiative type: --- Sponsorship --- status: Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: major Priority: P5 - low Component: OPAC Assignee: oleonard@myacpl.org Reporter: f.demians@tamil.fr QA Contact: testopia@bugs.koha-community.org Depends on: 38365 Target Milestone: --- When the Content-Security-Policy is enabled on the OPAC (csp_mode "enabled" in koha-conf.xml) and the OPAC is displayed in any language other than English, all JavaScript translation functions fail: __(), __x(), __n(), __nx(), __p()... As a consequence, every script that translates a string breaks: DataTables tables (kohaTable) are not initialized, messages and dialogs are not displayed, etc. The browser console shows, on every page: Uncaught EvalError: Evaluating a string as JavaScript violates the following Content Security Policy directive because 'unsafe-eval' is not an allowed source of script: script-src 'self' 'nonce-...' Uncaught TypeError: Cannot read properties of undefined (reading 'gt') at i18n.js Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38365 [Bug 38365] Add Content-Security-Policy HTTP header to HTML responses -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 Frédéric Demians <f.demians@tamil.fr> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |42577 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42577 [Bug 42577] Gettext.js incorrectly located and tidied -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 Frédéric Demians <f.demians@tamil.fr> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|oleonard@myacpl.org |f.demians@tamil.fr -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 Frédéric Demians <f.demians@tamil.fr> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 --- Comment #1 from Frédéric Demians <f.demians@tamil.fr> --- Created attachment 208418 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=208418&action=edit Bug 43843: Add the Tannin gettext library Tannin is a small gettext localization library, MIT licensed, used by WordPress: https://github.com/aduth/tannin It evaluates the plural forms of the translations with its own expression parser, without eval or "new Function", so it works with a Content-Security-Policy which doesn't allow 'unsafe-eval'. This patch adds tannin.min.js 1.2.0, unchanged from https://unpkg.com/tannin@1.2.0/dist/tannin.min.js, to the lib folders of the OPAC and the staff interface, and to the licenses tab of the About page. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 --- Comment #2 from Frédéric Demians <f.demians@tamil.fr> --- Created attachment 208419 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=208419&action=edit Bug 43843: Replace Gettext.js with Tannin When the Content-Security-Policy is enabled and the interface is translated, Gettext.js builds the plural function of the Plural-Forms header with "new Function". The CSP doesn't allow 'unsafe-eval', so the browser throws an EvalError, Koha.i18n is never defined, and every translated string (__, __n, __x...) throws a TypeError: DataTables tables are not initialized, etc. This patch replaces Gettext.js, a third-party script (bug 42577), with Tannin, which evaluates plural forms without eval. i18n.js keeps the Koha.i18n.gt object and its gettext, ngettext, pgettext and npgettext functions, now based on Tannin, so __(), __n(), __p(), __np() and their __x variants don't change. The locale_data.js files don't change either: i18n.js removes the msgid_plural that misc/translator/po2json puts before the translations, as Tannin expects the translations only. So the installed translations work without being reinstalled. Only the translated templates must be updated, as usual, to load Tannin instead of Gettext.js. An untranslated plural string now uses the English plural forms: with Gettext.js, it used the plural forms of the language, and could show the English singular for several items (for instance "Show 1 claim" for 101 claims in Japanese, which has a single plural form). Compared with Gettext.js on the messages-js translations of fr-FR, fr-CA, de-DE, pl-PL, ru-RU, cs-CZ, ar-Arab and ja-Jpan-JP, for every string and counts from 0 to 101, the translations are the same, except for the untranslated plural strings above. Test plan: 1. Install a translation, for instance fr-FR: cd misc/translator && perl translate install fr-FR 2. Add it to the OPACLanguages and StaffInterfaceLanguages system preferences. 3. Check that the CSP is enabled for the OPAC in koha-conf.xml: <content_security_policy><opac><csp_mode>enabled</csp_mode> Restart Plack and flush memcached. 4. In the OPAC, in French, open a record detail page (opac-detail.pl) and open the browser console: => The console shows "EvalError: Evaluating a string as JavaScript violates the following Content Security Policy directive..." and "TypeError: Cannot read properties of undefined (reading 'gt')". => The items table is not a DataTables table: no sorting. 5. Apply the patches and update the translated templates: cd misc/translator && perl translate install fr-FR Reload the page (clear the browser cache if needed): => No error in the console. => The items table can be sorted, and its texts are in French. 6. Switch the OPAC to English: no error, no change. 7. In the staff interface, in French and in English, check pages using translated JavaScript strings, for instance the checkouts table of a patron: no error, the texts are translated. 8. Check that the About page, Licenses tab, lists Tannin. 9. Run the Cypress test: yarn cypress run --spec t/cypress/integration/i18n_spec.ts -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 --- Comment #3 from Frédéric Demians <f.demians@tamil.fr> --- Just a reminder: since version 26.05, CSP can be enabled in the OPAC, but it only works with the English interface; in every other language, the interface is broken. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #208418|0 |1 is obsolete| | Attachment #208419|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 --- Comment #4 from David Nind <david@davidnind.com> --- Created attachment 208442 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=208442&action=edit Bug 43843: Add the Tannin gettext library Tannin is a small gettext localization library, MIT licensed, used by WordPress: https://github.com/aduth/tannin It evaluates the plural forms of the translations with its own expression parser, without eval or "new Function", so it works with a Content-Security-Policy which doesn't allow 'unsafe-eval'. This patch adds tannin.min.js 1.2.0, unchanged from https://unpkg.com/tannin@1.2.0/dist/tannin.min.js, to the lib folders of the OPAC and the staff interface, and to the licenses tab of the About page. Signed-off-by: David Nind <david@davidnind.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 --- Comment #5 from David Nind <david@davidnind.com> --- Created attachment 208443 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=208443&action=edit Bug 43843: Replace Gettext.js with Tannin When the Content-Security-Policy is enabled and the interface is translated, Gettext.js builds the plural function of the Plural-Forms header with "new Function". The CSP doesn't allow 'unsafe-eval', so the browser throws an EvalError, Koha.i18n is never defined, and every translated string (__, __n, __x...) throws a TypeError: DataTables tables are not initialized, etc. This patch replaces Gettext.js, a third-party script (bug 42577), with Tannin, which evaluates plural forms without eval. i18n.js keeps the Koha.i18n.gt object and its gettext, ngettext, pgettext and npgettext functions, now based on Tannin, so __(), __n(), __p(), __np() and their __x variants don't change. The locale_data.js files don't change either: i18n.js removes the msgid_plural that misc/translator/po2json puts before the translations, as Tannin expects the translations only. So the installed translations work without being reinstalled. Only the translated templates must be updated, as usual, to load Tannin instead of Gettext.js. An untranslated plural string now uses the English plural forms: with Gettext.js, it used the plural forms of the language, and could show the English singular for several items (for instance "Show 1 claim" for 101 claims in Japanese, which has a single plural form). Compared with Gettext.js on the messages-js translations of fr-FR, fr-CA, de-DE, pl-PL, ru-RU, cs-CZ, ar-Arab and ja-Jpan-JP, for every string and counts from 0 to 101, the translations are the same, except for the untranslated plural strings above. Test plan: 1. Install a translation, for instance fr-FR: cd misc/translator && perl translate install fr-FR 2. Add it to the OPACLanguages and StaffInterfaceLanguages system preferences. 3. Check that the CSP is enabled for the OPAC in koha-conf.xml: <content_security_policy><opac><csp_mode>enabled</csp_mode> Restart Plack and flush memcached. 4. In the OPAC, in French, open a record detail page (opac-detail.pl) and open the browser console: => The console shows "EvalError: Evaluating a string as JavaScript violates the following Content Security Policy directive..." and "TypeError: Cannot read properties of undefined (reading 'gt')". => The items table is not a DataTables table: no sorting. 5. Apply the patches and update the translated templates: cd misc/translator && perl translate install fr-FR Reload the page (clear the browser cache if needed): => No error in the console. => The items table can be sorted, and its texts are in French. 6. Switch the OPAC to English: no error, no change. 7. In the staff interface, in French and in English, check pages using translated JavaScript strings, for instance the checkouts table of a patron: no error, the texts are translated. 8. Check that the About page, Licenses tab, lists Tannin. 9. Run the Cypress test: yarn cypress run --spec t/cypress/integration/i18n_spec.ts Signed-off-by: David Nind <david@davidnind.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |david@davidnind.com --- Comment #6 from David Nind <david@davidnind.com> --- Testing notes (using KTD): 1. Also enable the opaclanguagesdisplay system preference, so you can switch languages. 2. When applying the patches don't follow the dependency, otherwise you will get this error: Bug 43843 depends on bug 42577 (In Discussion) Follow? [(y)es, (n)o] y ⠸ Fetching bug 42577 attachments...Error: Apply failed: Cannot apply cleanly patches from bug 42577. Everything will be left dirty. No patch attachments found for bug 42577 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dcook@prosentient.com.au -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 --- Comment #7 from David Cook <dcook@prosentient.com.au> --- I'm so glad that this issue has been caught. Just for interest's sake, Frédéric did you find it in KTD or in your own testing/production? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 --- Comment #8 from Frédéric Demians <f.demians@tamil.fr> --- (In reply to David Cook from comment #7)
Just for interest's sake, Frédéric did you find it in KTD or in your own testing/production?
At first step, I was discovering the new CSP protection, and tried to implement it on a production box. I added the csp section on koha-conf, and then added that to my plack.psgi: enable '+Koha::Middleware::ContentSecurityPolicy'; It collapsed with French OPAC. Investigating, I reproduced the bug on KTD with the default configuration. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 Frédéric Demians <f.demians@tamil.fr> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on|42577 | Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42577 [Bug 42577] Gettext.js incorrectly located and tidied -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 --- Comment #9 from Frédéric Demians <f.demians@tamil.fr> --- EXPLANATION AND REASONING This bug prevents deploying an OPAC protected by CSP with a language other than English: the JavaScripttranslation mechanism breaks. The culprit is Gettext.js. Rather than fixing it, the patches switch to another library: Tannin. Why replace Gettext.jsrather than fix it? * eval is in the design of Gettext.js. It builds a function to process plural forms. Fixing it means maintaining our own fork of a library from 2008. * Fixing it means writing our own code. To drop eval, Koha would have to writea parser of the Plural-Forms expressions, and maintain it. Tannin does exactly that, and is already widely tested: it is the engine of @wordpress/i18n. * Adding 'unsafe-eval' to the CSP is not an option: it would defeat what CSP is for. The CSP blocks eval and "new Function" because they turn a string into code. * Less code: Tannin is small (2 KB), Gettext.js is huge (45 KB). * Low risk: the JavaScript translation API (__(), __n(), etc.) doesn't change. The po and locale_data.js files don't have to be regenerated: only the translated templates must be updated, as for any template change. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 --- Comment #10 from David Cook <dcook@prosentient.com.au> --- (In reply to Frédéric Demians from comment #9)
* Low risk: the JavaScript translation API (__(), __n(), etc.) doesn't change. The po and locale_data.js files don't have to be regenerated: only the translated templates must be updated, as for any template change.
I think this is the key thing for me. If it's a drop-in replacement, that sounds great. When you say the translated templates must be updated, what do you mean? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 --- Comment #11 from Frédéric Demians <f.demians@tamil.fr> --- (In reply to David Cook from comment #10)
When you say the translated templates must be updated, what do you mean?
That's the 7 .tt and .inc files. They have to be updated. In the test plan: cd misc/translator && perl translate install fr-FR -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 Marcel de Rooy <m.de.rooy@rijksmuseum.nl> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |m.de.rooy@rijksmuseum.nl -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43843 Lisette Scheer <lisette@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|testopia@bugs.koha-communit |katrin.fischer@bsz-bw.de |y.org | -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon@bugs.koha-community.org