Embedded OpenSearch dashboard not showing in React app because of Content Security Policy

Question

I'm trying to display an OpenSearch dashboard with an iframe but it's only showing the login page and when I try to log in I get the following error:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-75XtnrpDA0UHDMcl7S8lvswryIOd0RqgacRh0AMOgdk='), or a nonce ('nonce-...') is required to enable inline execution.

this is the iframe tag

<iframe
        title="Dashboard"
        src="https://vpc-issuing-desacople-os-qa-jcxnps24owm6lphguewrohfwti.us-east-1.es.amazonaws.com/_dashboards/goto/1a1dc225ef571ec76cb4bbbd2ef24ea7?security_tenant=global"
        height="600"
        width="800"
      ></iframe>

I've tried adding the following content-security-policy to manifest.json

"content_security_policy": "script-src 'unsafe-eval' 'self'; worker-src blob: 'self'; style-src 'unsafe-inline' 'self'"

Embedded OpenSearch dashboard not showing in React app because of Content Security Policy

0 Answers0