Issue
- Blocked:origin errors are seen in the browser console when deploying Spritemap CX.
- Theme SVG Spritemap is showing blocked:origin errors in a SaaS environment.
Environment
- Liferay PaaS, SaaS
Resolution
- Observing browser console (blocked:origin) errors is expected behavior. As long as the spritemap icons are displayed properly, these errors can be disregarded.
-
This is due to the fact that there is no native support for cross-domain requests in
<use>element. Liferay utilizes the<use>element to refer to individual icons inside the spritemap. When browser attempts to access the spritemap provided by the Theme Spritemap client extension, it emits the error of (blocked:origin). -
As the same time, as Theme Spritemap CX enabled “cross domain support”, Liferay inserts a new piece of code, called svg4everybody ,which watches for occurrences of
<use>elements in the page, and managing the requested icon by fetching it using a dedicated XMLHTTPRequest. This is the way cross-domain restrictions are bypassed. -
Additionally the process of watching for occurrences and processing the icon is not run immediately but at intervals and can take time, potentially causing a “race” between two opposite forces:
-
Browser paint cycles, where
<use>elements trigger the request of a blocked resource -
svg4everybody injecting the icons whenever a
<use>element is found
-
-
- If the spritemap icons are not displaying properly, please first ensure "Enable Cross Domain Support" is selected when creating a new Theme SVG Spritemap.
If the icons are still not seen, please kindly open a Support ticket requesting fix LPD-34919.
Additional Information