When using the $Asset
global variable in Visualforce, it looks like Salesforce is trying to load resources from na38.salesforce.com
instead of c.na38.visual.force.com
. This is causing it to violate the CORS policy on na38.salesforce.com and fail to load resources. Has anybody else seen this/have a workaround? Images load fine when using the merge field directly via URLFOR()
but adding icons in javascript fails and the fonts fail to load.
Update with Sample Code
<apex:page>
<apex:slds/>
<div class="slds-scope" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<h1 class="slds-text-heading--large">
Hello world
</h1>
<div id="img">
<img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" alt="Contact Avatar"/>
</div>
<div id="svg">
<span class="slds-icon_container slds-icon-standard-account" title="description of icon when needed">
<svg class="slds-icon" aria-hidden="true">
<use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
</svg>
<span class="slds-assistive-text">Description of icon</span>
</span>
</div>
</div>
</apex:page>
You will see that the image tag loads fine but the svg fails with
Unsafe attempt to load URL https://app-dev-dsh0-dev-ed.my.salesforce.com/apexpages/slds/2.1.3/assets/icons/standard-sprite/svg/symbols.svg from frame with URL https://app-dev-dsh0-dev-ed--c.na38.visual.force.com/apex/sldstest. Domains, protocols and ports must match.