This thread is resolved. Here is a description of the problem and solution.
Problem:
If you're experiencing issues with the Advanced Translation Editor not loading text from our servers due to Content Security Policy (CSP) restrictions, and it's showing variable names instead, you might need to adjust your CSP rules.
Solution:
We recommend adding "ams.wpml.org" to the following CSP rules to ensure proper functionality of WPML's Translation Management:
connect-src https://ams.wpml.org
style-src https://ams.wpml.org
script-src https://ams.wpml.org
Please note that as this is an advanced development topic, the developer implementing CSP should be responsible for whitelisting all required APIs. We can only take responsibility for our APIs in this matter.
Keep in mind that this solution might be irrelevant if it's outdated or not applicable to your case. If after trying these steps you're still facing issues, we highly recommend checking related known issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If the problem persists, please open a new support ticket with us.
This is the technical support forum for WPML - the multilingual WordPress plugin.
Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.
You missed the point: the page "Translation Management > Tools" didn't work because the strict initial CSP header of my plugin was working and blocking loading of scripts, CSSs, fonts, frames etc. from external domains. (just images are whitelisted).
To make CSP an useful tool that hardens the security of a website, you should just allow domains from which you expect to load that kind of content, so it can block what is unexpected.
You were not supposed to find a way to disable the CSP header, as setting it without using an hook may be non-standard in WP, but it was working for our proof-of-concept, and the fact that the page "Translation Management > Tools" didn't work was the proof.
You just encapsulated header(...) in a function called by an hook for the frontend of the website, so the CSP header was not sent anymore from /wp-admin/*
Now I'm using the hook "init" as it's called on both frontend and /wp-admin/* before the html content is sent, and I did the first step of what I expected you to do: I added *.ams.wpml.org to the connect-src rule. (I used *.ams.wpml.org instead of ams.wpml.org because it seems in this testing website you are connecting to a "staging" subdomain)
Now you can see that "Translation Management > Tools" at a first look seems to work, but if you open the browser console it says that it's blocking some Google Fonts because of CSP. And also if you try to "Change card details >>" it fails because CSP is blocking Stripe.
These are the first thing I found, but other content may be blocked using other functionalities and perhaps using automatic translation. Setting good CSP rules can be a long and hard process of trial and error, so I asked for support because you (or at least your developers) should know what content is loaded from external sources, and as you mentioned CSP on https://wpml.org/changelog/2021/07/wpml-4-4-11-wordpress-5-8-features-and-stability-improvements/ I was hoping you were already aware of how CSP works and how configure it properly
Languages: English (English )Spanish (Español )German (Deutsch )
Timezone: America/Lima (GMT-05:00)
Thank you for your detailed message, but I am not honestly sure if I can follow.
Do you mean that my approach to using a WordPress Hook does not solve the issue or are you simply missing to set further rules for Google and Stripe?
If you are blocking scripts with CSP it is your responsibility to whitelist the scripts that are necessary for the site to operate, like in your example Google Fonts and Stripe.
Guide for Google Fonts: hidden link
The guide for Stripe was already provided by you earlier.
I would further like to point out, that this is a custom code request which is not covered by our support policy.
*.ams.wpml.org is needed on the testing site hidden link as it uses a testing subdomain of ams.wpml.org
From my tests, hidden link loads also fonts from Google Fonts, and in some cases it needs also whitelist for script-src and form-action
Stripe seems to refuse to load in the page also deactivating CSP header, but it works with the button "Open in a new window"
So for now the rules needed to make the "Advanced Translation Editor" work with CSP are:
connect-src ams.wpml.org
style-src ams.wpml.org fonts.googleapis.com
script-src ams.wpml.org
form-action ams.wpml.org
font-src fonts.gstatic.com
We'd like confirmation from your developers that these are the only CSP rules needed by WPML, and if you want you can report them in your documentation
Languages: English (English )Spanish (Español )German (Deutsch )
Timezone: America/Lima (GMT-05:00)
If the Advanced Translation Editor and Translation Management > Tools, and completing a Pay-As-You-Go subscription is working now as expected, then I would say you are ready to go.
I am following up about this with the team and I will let you know once I receive feedback.
Languages: English (English )Spanish (Español )German (Deutsch )
Timezone: America/Lima (GMT-05:00)
After an internal discussion, we decided not to publish documentation on wpml.org until we receive more reports about the topic.
What we did was to create an internal training document, that will guide other supports about how to handle requests about CSP.
We also would like to add, that this is an advanced development topic and the developer who implements CSP is responsible for whitelisting all required APIs.
We can only take responsibility for our APIs on this matter.
The proper rules for WPML's Translation Management are:
Content Type Domain to allow
connect-src hidden link
style-src hidden link
script-src hidden link
