What is CORS Policy Access-Control-Allow-Origin

Starting in 2019 you might have noticed a new error cropping up in your browsers developer console. The error reads “Access to” + “from origin” + “has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”

What is the CORS Policy?

CORS stands for “Cross-Origin Resource Sharing” and is a way for a website to use resources not hosted by its domain as their own. This became an W3C recommendation in 2014 and has been adopted by all major browsers. The purpose is to prevent scripts from from making requests to non-authorized domains.

Criminals and hackers often used cross-domain scripting as a way to gain access to a website but cross-domain assets can also be used to setup phishing sites.

Why is this now a problem?

Starting in 2019 browsers have changed how they deal with CORS violations. Previously non-script resources issued a warning, which was typically only seen in a developer console, but starting in 2019 browsers now deny all resources requests. This was done to reduce criminal behavior, hacking and resource stealing.

How to fix

The problem comes from a few difference sources. The server’s configuration, hard coded links and Content Delivery Networks are often the cause of these issues.

Content Delivery Networks

If you are using a CDN then you need to update the configuration with all of your correct URL’s for your resources. This includes any switch to HTTPS from HTTP. Some CDN like S3 Bucket have a CORS dedicated Configuration page. Below are the links to Amazon and Cloudflare’s setup guides.

Amazon’s Configuring cross-origin resource sharing (CORS)

Cloudflare’s Cross-Origin Resource Sharing (CORS)

Hard coded URL switched from HTTP to HTTPS

A lot of sites have switched from HTTP to HTTPS in 2019 as part of Googles Secure the web initiative, but have failed to change hard code URL’s. Use a site crawler to find all these hard coded URL and get them switched. Often skin/theme files or embedded viewers have this issue.

Host headers via .htaccess or web.config file

Your host has locked down CORS and you need to open up what allowed file types are. Edit this example and only allow the file types you need or limit it to a specific file. You’ll need to do this if you’re trying to embed fonts from Google, TypeKit, Open Font Library, Fonts.com, etc.

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

If you have many sub-domains hosting your content you can get complicated and do something like this.

<ifmodule mod_headers.c="">
   SetEnvIf Origin "^(.*\.domain\.com)$" ORIGIN_SUB_DOMAIN=$1
   Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
   Header set Access-Control-Allow-Methods: "*"
   Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization"
</ifmodule>

Other examples

IIS 7.5 or newer

<system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="access-control-allow-origin" value="*" />
       <add name="access-control-allow-headers" value="content-type" />
     </customHeaders>
    </httpProtocol>
</system.webServer>

W3 Total Cache

Found this in a support thread for the plugin. Something similar can be used for most caching plugins that do not have a separate CORS configuration.

<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://(cdn|sub)\.domain\.com$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
        Header merge Vary Origin
    </IfModule>
</FilesMatch>

From MaxCDN support files

# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content-Type?!
    <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

PHP files

If the resource comes from a specific file for example myfile.php you can use this at the top of your PHP file. You must have this sent before any page elements load as this response needs to be part of the server header and not the HTML header.

<? header("Access-Control-Allow-Origin: *"); ?>

Content Management Systems

Sometimes your content management system can have a built in fix.

WordPress

First check to make sure your site URL under Settings -> General is correct including the http/https part!

You can add a blanket catch all to allow and page resource CORS. This is very dangerous as it can open your site to other security risks but if you’re troubleshooting the problem on a non-production site this can help.

function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');

More information

• Check back later