If you have ever experienced an issue where you see resources on your web pages such as stylesheets, iframes, or embedded resources showing up as broken icons, this was highly likely due to the CORS (Cross-origin Resource Sharing) policy. Errors triggered by CORS can also be seen whenever you open the developer console of your browser. The error will be similar to the following:

Access to fetch at 'external-url' from 'yourdomain.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque
response serves your needs, set the requests' mode to 'no-cors' to fetch the resources with CORS disabled.

The “CORS” regulation allows limited resources, located on a web server, to be requested and loaded by domains that are not related to the original server, permitting websites to serve the content on their pages.

CORS works by checking the HTTP header of an incoming request. If it contains a unique Access-Control line, the querying source will gain access to the content allowing the browser to parse the request without triggering any errors. If this happens successfully, the browser will display the content on the domain which requested the resource from the origin server.

An example where you may experience this is when you purchase a theme for your website. When the developers created it, they used a server that has incorporated the HTTP header required to access a specific external resource. When you install your theme on the HostAramda server or any other web hosting server for that matter, these headers need to be included in the request towards this external source, otherwise, you will see broken links and icons on your web page.

Do not be alarmed as this is something that can be fixed easily by adding a few lines of code in your .htaccess file. Here is what you need to do.

1. Please open your .htaccess file for editing, using one of the described methods in our What is a .htaccess file and how can I find it knowledgebase article.
2. When you have opened it, please type in the following snippet of code on top of the file:

   <ifModule mod_headers.c>
    Header set Access-Control-Allow-Origin: * 
   </ifModule>

3. Save the file and clear your application cache (if such is active) and your browser's cache.
4. Refresh your page in the browser. The broken icons and links, along with the errors inside your developer console, should be gone!

Our technical support team is 24/7 available at your disposal, and if you do not feel comfortable doing this yourself, feel free to contact them by submitting a ticket.