elementor / elementor/elementor

Add CSP (Content Security Policy) header support to Elementor

Open
#15,192 42 comments 24 reactions 0 assignees View on GitHub
component/code mod/r* request/enhancement
Dominant language
PHP
Stars
7.1k
Forks
1.6k
Avg merge
1d 5h
Merged PRs (30d)
193

Description

## Prerequisites

- [x] I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
- [x] The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

**What problem is your feature request going to solve? Please describe.**
Hello,

CSP (Content Security Policy)  header is a very strong security measure designed to avoid malicious actions on website. It is especially designed to avoid XSS injections.
https://content-security-policy.com/


The goal of CSP header is to explicitly declare every assets (including inline scripts, script files, css, font ...) that should be used by a page. The browser will then refuse to use any other assets.


I see that Elementor team and several users manifested their interest into this but the main problem was that inline JS script must be generated dynamically by Elementor. So it was impossible to whitelist inline script using SHA256 (Ticket 5833 and 3713)

Fortunately, Wordpress Core 5.7 did a few changes and added a few functions especially designed to help plugin developer to support CSP !
https://make.wordpress.org/core/2021/02/23/introducing-script-attributes-related-functions-in-wordpress-5-7/

Those functions allow you to include inline js the proper way and let the user add a nonce to every js script included this way (using the wp_script_attributes filter).
This nonce can now be used to implement CSP without an unclean 'unsafe-inline' enabled.

**Describe the solution you'd like**

I would like Elementor to use the new functions to get or print inline JS such as :

```
$js_inline = 'var ElementorTrySafeMode = function() {
[...];'

wp_print_inline_script_tag($js_inline);
```
instead of printing the JS script directly :
```

var ElementorTrySafeMode = function() {
[...]

```

**Describe alternatives you've considered**
The alternative solutions already considered are described in the ticket 5833 (https://github.com/elementor/elementor/issues/5833) (opened before WP 5.7 was released) :
- externalize inline js script
- make inline js script static

But this seems really hard to set up.

**Additional context**
I am really looking forward to see CSP integrated perfectly with Elementor and Elementor Pro and think this would be a great step for Wordpress security.
Don't hesitate to answer this ticket if I can help you with anything.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.