SVG icons that are stored as public assets might fail to load in XM Cloud Pages and Experience Editor. The message similar to the following can be displayed:
Unsafe attempt to load URL <URL> from frame with URL <URL>. Domains, protocols and ports must match.
or
Security Error: Content at <URL> may not load data from <URL>
The issue occurs due to the Same-Origin Policy (SOP) enforced by browsers for security reasons. The loaded element, for example SVG icon, does not support Cross-Origin Resource Sharing (CORS) for external requests, which is a default limitation. When Sitecore renders a content page in Sitecore Pages or Experience Editor, interactions occur through the Content Management instance. As a result, the "Referer" and "Request URL" are different, making it an external request. Consequently, the browser enforces strict same-origin policy rules.
As a solution, it is recommended that the external SVG file must be hosted on the same domain, protocol, and port. Therefore, consider using <svg> with <path> element or the JSS/Next.js <Image> component.