The reason for this issue is due to the implementation of a Content Security Policy (CSP) header within your application.
A Content Security Policy (CSP) serves as an additional security layer that aids in identifying and mitigating various forms of attacks, such as Cross Site Scripting (XSS) and data injection attacks./.../
When using a CSP compliant browser, only scripts from approved domains will be executed, while all other scripts - including inline scripts and event-handling HTML attributes - will be ignored.
For sites seeking the highest level of protection against script execution, they may choose to globally disallow script execution. [edit: hence the "default-src 'none'" policy]
To learn more about CSP, visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
You can generate a CSP using online tools like
A CSP with "default-src 'none'" implies that no content can be displayed/run on your domain. You must specifically whitelist the services or content you wish to allow (default-src acts as a fallback for resource types without their policies, so setting it to none means you must explicitly add allowed sources).
A policy consists of multiple directives, each describing the policy for a specific resource type or area.
WHAT YOU CAN DO
In your situation, a basic policy could be:
"default-src 'none'; img-src 'self'"
.
As you progress, you'll likely need additional rules, so refer to sources and online CSP generators to streamline the process.
Alternatively, you could
Disable the CSP (not recommended as it compromises security)
During development, consider using
Content-Security-Policy-Report-Only
(This mode allows content to run/display without enforcement but reports any potential issues. Remember to adjust for production environments!)
REFERENCE
CSP reference:
More on CSP: