CSP rules to enable

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.

Tagged: Documentation request

This topic contains 28 replies, has 2 voices.

Last updated by Andreas W. 1 year, 4 months ago.

Assisted by: Andreas W..

Author	Posts
March 6, 2024 at 6:42 pm #15381284
Andreas W. WPML Supporter since 12/2018 Languages: English (English ) Spanish (Español ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	I will set up a live server on Cloudways to test this again and then get back to you. Did you already try to edit the .htaccess file directly without using any custom plugin? Example: <IfModule mod_headers.c> Header set Content-Security-Policy "default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';" </IfModule> Is it possible to recreate the issue of Translation Management this way?
March 6, 2024 at 7:57 pm #15381474
Andreas W. WPML Supporter since 12/2018 Languages: English (English ) Spanish (Español ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	The issue seems to be that you should not call headers() in WordPress without using a proper WordPress Hook. I adjusted your code like this: add_action('template_redirect', 'custom_headers'); function custom_headers() { header('Content-Security-Policy: ' . implode(';', array( "upgrade-insecure-requests", "default-src 'self'", "script-src 'self' 'unsafe-inline' 'unsafe-eval'", "style-src 'self' 'unsafe-inline'", "img-src data: blob: https:", "font-src 'self' data:", "connect-src 'self' blob:", "media-src 'self' blob:", "object-src 'self'", "frame-src 'self'", "worker-src 'self' blob:", ))); } The error is now gone on Translation Management > Tools. Could you please give this please a try?
March 7, 2024 at 9:40 am #15383042
Andrea	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
March 7, 2024 at 9:51 am #15383091
Andrea	BTW, as i noticed that https://wpml.org uses CSP, perhaps you should ask to the ones who configured it for you website
March 7, 2024 at 11:20 am #15383895
Andreas W. WPML Supporter since 12/2018 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. https://wpml.org/purchase/support-policy/ "Custom code: While we’re happy to offer guidance wherever possible, we cannot guarantee or provide support for custom code on your site." Usually, you should contact a contractor for such kind of solutions: https://wpml.org/contractors/ Also, whitelisting Google or Stripe are topics for the related support teams and not for the WPML Support. Did you reach out to them already?
March 7, 2024 at 11:31 am #15383913
Andrea	SHIBBOLEET (if you don't know what it means, Google it and please escalate to second level or devs 😉 )
March 7, 2024 at 12:00 pm #15384034
Andreas W. WPML Supporter since 12/2018 Languages: English (English ) Spanish (Español ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Sure, I have escalated your request to second-tier support and will get back to you once I receive their feedback. I am further requesting a documentation guide on wpml.org for this topic.
March 14, 2024 at 5:39 pm #15411804
Andreas W. WPML Supporter since 12/2018 Languages: English (English ) Spanish (Español ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Our second-tier support provided the following feedback: The problem is *.ams.wpml.org which means it matches all sub-domains but we need only ams.wpml.org and that is missing. Apart from that we also need style-src to have our ams domain to load the style sheet. So the updated rules will be like "style-src 'self' 'unsafe-inline' <em><u>hidden link</u></em>", "connect-src 'self' blob: <em><u>hidden link</u></em>", I changed the values of style-src for the stylesheet and connect-src for JS calls. This fixes the issue.
March 15, 2024 at 11:53 am #15414125
Andrea	.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 I hope there aren't other popping out
March 15, 2024 at 2:09 pm #15414753
Andreas W. WPML Supporter since 12/2018 Languages: English (English ) Spanish (Español ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Thank you for your feedback! It is unclear to me if you need further assistance with this at the moment. Please let us know if there is something else we can do for you. Please let us know if you run into further issues.
March 15, 2024 at 2:48 pm #15414993
Andrea	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
March 15, 2024 at 2:59 pm #15415034
Andreas W. WPML Supporter since 12/2018 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.
March 20, 2024 at 11:06 am #15430562
Andreas W. WPML Supporter since 12/2018 Languages: English (English ) Spanish (Español ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Hello, The complete list of domains used by WPML in this case are: ate.wpml.org ams.wpml.org api.wpml.org cdn.wpml.org cloudfront.net We are requesting new documentation that explains this issue in more detail. Best regards Andreas
March 22, 2024 at 12:52 pm #15440489
Andreas W. WPML Supporter since 12/2018 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