Designer not loading

[ark-brighthustle]

There is no content in HTML Version tab ...it shows blank page

[github-actions]

Thank you!! This is your first issue on this repo

[slegouffe]

Hi @evilRat !

You should RTFM ;-) :

you may need also to add to the unlayer domain to the Content Security Policy. Update the config file config/middleware.js as:

- "strapi::security",
+ {
+     name: "strapi::security",
+     config: {
+       contentSecurityPolicy: {
+         directives: {
+           "script-src": ["'self'", "editor.unlayer.com"],
+           "frame-src": ["'self'", "editor.unlayer.com"],
+           "img-src": [
+             "'self'",
+             "data:",
+             "cdn.jsdelivr.net",
+             "strapi.io",
+             "s3.amazonaws.com",
+           ],
+         },
+       },
+     },
+   },

[saintego]

Can you post whole file?. Because I have this

module.exports = [
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        directives: {
          'script-src': ["'self'", 'editor.unlayer.com'],
          'frame-src': ["'self'", 'editor.unlayer.com'],
          'img-src': [
            "'self'",
            'data:',
            'cdn.jsdelivr.net',
            'strapi.io',
            's3.amazonaws.com',
          ],
        },
      },
    },
  },
]

and without any success

[adexzy1]

i am facing this same issue and I wonder why this issue was closed

[A330454]

Hello guys! Here is the code that worked for me.

You can find more instrucctions direcly on npm strapi-plugin-email-designer docs

[tbfcannon]

Hi @A330454 I am trying to get this working with Strapi v4.20.1, Chrome. RTFM, etc. but am still getting a refusal on editor.unlayer.com (attached). Does your snippet work with the latest? Thanks.

[A330454]

Hey @tbfcannon !

I understand you're encountering issues with CORS when trying to integrate with Strapi v4.20.1 and accessing https://editor.unlayer.com/embed.js. The refusal you're seeing is likely due to the CORS policy not being properly configured to allow requests from your domain.

To address this issue, you'll need to ensure that your CORS configuration in Strapi allows requests. Here's an updated config/middlewares.js configuration that specifies the necessary CORS settings and also configures the Content Security Policy (CSP) to allow scripts and frames from editor.unlayer.com:

module.exports = [
  'strapi::errors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
  {
    name: 'strapi::cors',
    config: {
      headers: ['Content-Type', 'Authorization', 'Accept', 'Origin', 'Cache-Control', 'Pragma'],
      origin: ['http://localhost:1337', 'https://cloud.strapi.io', 'https://anyOtherDomainYouMayNeed.edu'], // you can just add all domains by '*'
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
      credentials: true,
    },
  },
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        directives: {
          "script-src": ["'self'", "editor.unlayer.com"],
          "frame-src": ["'self'", "editor.unlayer.com"],
          "img-src": [
            "'self'",
            "data:",
            "cdn.jsdelivr.net",
            "strapi.io",
            "s3.amazonaws.com",
          ],
        },
      },
    },
  },
];

Additionally, here's an overview of my package.json dependencies for reference, ensuring compatibility with your Strapi version:

"dependencies": {
    "@chartbrew/plugin-strapi": "^0.6.0",
    "@strapi/plugin-documentation": "^4.15.5",
    "@strapi/plugin-email": "^4.15.5",
    "@strapi/plugin-i18n": "4.15.5",
    "@strapi/plugin-users-permissions": "4.15.5",
    "@strapi/provider-email-sendgrid": "^4.15.5",
    "@strapi/strapi": "4.15.5",
    "better-sqlite3": "9.2.2",
    "pg": "^8.11.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.3.4",
    "socket.io": "^4.7.4",
    "strapi-plugin-email-designer": "^2.2.0",
    "stripe": "^14.16.0",
    "styled-components": "^5.3.11"
  },

Please try adjusting your configuration as suggested and let me know if it resolves your issue. I'm here to help if you have any further questions or need assistance.

Best regards.

[tbfcannon]

Thank you very much. You have helped me to make progress but I am still getting errors. When I use your suggested Strapi configuration, the designer will not load and I see the follow error:

HOWEVER, if I change the script-src line to "script-src": ["'self'","'unsafe-inline'","https://editor.unlayer.com"], the designer will load but I now get the errors shown in the next pic BUT, the designer lets me create and save a template even though the UI is not behaving perfectly. I am able to programmatically send email using the template.

Thanks again for taking time to respond. I'll keep plugging away at it to see why those security errors are happening. This is my Strapi middlewares.js; I know the CORS config is getting read because if I don't include the domain I serve Strapi API from, I cannot log into Strapi Admin.

module.exports = [
'strapi::errors',
{
name: "strapi::security",
config: {
contentSecurityPolicy: {
directives: {
"script-src": ["'self'","'unsafe-inline'","https://editor.unlayer.com"],
"frame-src": ["'self'", "https://editor.unlayer.com"],
"img-src": [
"'self'",
"data:",
"cdn.jsdelivr.net",
"strapi.io",
"s3.amazonaws.com",
],
},
},
},
},
'strapi::poweredBy',
{
name: 'strapi::cors',
config: {
headers: ['Content-Type', 'Authorization', 'Accept', 'Origin', 'Cache-Control', 'Pragma','Access-Control-Allow-Origin'],
origin: ['http://localhost:1337','https://cloud.strapi.io','https://editor.unlayer.com','https://api.events.unlayer.com','https://MyStrapiAPIdomain.dev’],
methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
credentials: true
}
},
'strapi::logger',
'strapi::query',
'strapi::body',
'strapi::session',
'strapi::favicon',
'strapi::public'
];

[A330454]

Hey @tbfcannon !

I'm genuinely thrilled to hear that my suggestions have been of help to you and that you're making progress with your project. It's always rewarding to see positive outcomes from collaborative efforts, keeping me updated on your journey.

After a more thorough review of your middlewares.js configuration and considering the additional context you've provided, I've identified a few more points that might help you troubleshoot the issues you're experiencing further:

1. Quotation Mark Consistency: I noticed an inconsistency in the use of quotation marks (https://MyStrapiAPIdomain.dev’). Ensure all your domains are enclosed in consistent straight quotation marks ( ' ') to avoid potential parsing errors in your configuration.

2. Security Practices: While not directly an error, using 'unsafe-inline' in your CSP's script-src can pose security risks. It allows the execution of inline scripts and styles, which can be exploited for Cross-Site Scripting (XSS) attacks. Although it's sometimes necessary for compatibility with third-party integrations, its use should be carefully considered. Always aim to strike a balance between necessary functionality and maintaining a strong security posture. This practice is especially crucial when you're working to safeguard your application against potential vulnerabilities.

3. Also in the same lines you've specified https://editor.unlayer.com in both script-src and frame-src directives. However, it's noteworthy that the official documentation for the plugin or integration you're using (as mentioned) does not prefix editor.unlayer.com with https://. This discrepancy might seem minor, but adhering to the official documentation's guidelines is crucial for ensuring optimal compatibility and security.

//this is the suggested security configs based on the official documentation, I suggest sticking to it 

// ...
- "strapi::security",
+ {
+     name: "strapi::security",
+     config: {
+       contentSecurityPolicy: {
+         directives: {
+           "script-src": ["'self'", "editor.unlayer.com"], // Notice the absence of 'https:// & "'unsafe-inline'"'
+           "frame-src": ["'self'", "editor.unlayer.com"], // Notice the absence of 'https://'
+           "img-src": [
+             "'self'",
+             "data:",
+             "cdn.jsdelivr.net",
+             "strapi.io",
+             "s3.amazonaws.com",
+           ],
+         },
+       },
+     },
+   },
// ...

// In the other hand, trying allowing all origins on CORS Policies before trying specific origins, this will let you know if your problem is on the origin configuration or in something else

// ...
- "strapi::security",
+ {
+     name: "strapi::security",
+     config: {
+       contentSecurityPolicy: {
+         directives: {
+           "script-src": ["'self'", "editor.unlayer.com"],
+           "frame-src": ["'self'", "editor.unlayer.com"],
+           "img-src": [
+             "'self'",
+             "data:",
+             "cdn.jsdelivr.net",
+             "strapi.io",
+             "s3.amazonaws.com",
+           ],
+         },
+       },
+     },
+   },
// ...

You middlewares.js config file should look like this

module.exports = [
  'strapi::errors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
  {
    name: 'strapi::cors',
    config: {
      headers: ['Content-Type', 'Authorization', 'Accept', 'Origin', 'Cache-Control', 'Pragma'],
      origin: '*',
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
      credentials: true,
    },
  },
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        directives: {
          "script-src": ["'self'", "editor.unlayer.com"], 
          "frame-src": ["'self'", "editor.unlayer.com"], 
          "img-src": [
            "'self'",
            "data:",
            "cdn.jsdelivr.net",
            "strapi.io",
            "s3.amazonaws.com",
          ],
        },
      },
    },
  },
];

4. Testing with Different Versions: Considering that you're not encountering errors with your project setup, it's possible that version discrepancies could be a factor. Check on my deps on my last response just to test how different they are with yours, maybe testing with different deps versions will get this code going.

5. If you're experiencing issues with the admin interface or the UI dependencies, a common approach to resolve these issues is to rebuild the admin panel. This can be necessary when you make changes to the admin UI customization, install certain plugins, or update dependencies that affect the admin UI. Rebuilding the admin UI can often resolve issues related to outdated or corrupted dependencies.

// To rebuild the Strapi admin UI, you can use the following command:
npm run build -- --clean

// or if you are using Yarn:
yarn build --clean

I'm here to assist if you have any more questions or need further clarification on any point. I'm looking forward to hearing about your continued progress. Please don't hesitate to reach out; I'll be awaiting your input and any updates on your side.

Best regards and happy coding,
Jacobo

[tbfcannon]

@A330454 thank you for the time you've spent on this. I created a clean project following your instructions, cleared my browser cache and still get CORS errors when I try to create a new template.

I tried the security policy specified in #140 and was able to run the designer without using unsafe-inline. I still get CORS errors.

BTW, I went to unlayer.com and checked my browser console while trying their email template designer: CORS ERRORS. Go to https://dashboard.unlayer.com/create/blank?ref=templates and your browser console will show the same CORS errors I reported in my earlier comment.

I also looked at https://editor.unlayer.com/1.5.61/editor.js and noticed the use of "allocUnsafe" in there. My limited understanding is that the use of unsafe presents a risk of injection but the Strapi security policy controls which origin can do injection.

https://snyk.io/advisor/npm-package/react-unlayer-editor#package-footer states that unlayer has no known security issues.

It's nice to see the designer working in Strapi but I do not believe my team will approve usage given the CORS issues.

Thanks again!

[RingoMckraken]

I'm also experiencing this issue our middlewares.js file looks exactly as the example above and get the same exact error regarding 'unsafe-inline'.

[Ch-lamprakis]

this was the solution for me from here:
#140

I need to add editor.unlayer.com/embed.js to the script-src directive