Cross-Origin Resource Sharing policy Font - amazon-cloudfront

I am using W3 Total Cache with Amazon cloudfront. I have in my htaccess file:
# BEGIN W3TC CDN
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
# END W3TC CDN
But still getting error:
Font from origin 'https://example.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.example.com' is therefore not allowed access.
Why is this happening?

Found the solution in this link: https://www.naschenweng.info/2014/09/23/wordpress-w3-total-cache-cloudfront-font-cors-issue/.
You need to change the CloudFront distribution's behaviors settings:
Change “Forward Headers” from “None” to “Whitelist”
Add “Origin” to the “Whitelist Headers”
Make sure that “Use Origin Cache Headers” is checked
Then invalidate the cached fonts.

Wrestling with this for days, and think I finally fixed it. Here are some things to check:
The webserver config should add the proper header. Apache syntax is listed in the question. Here's Nginx syntax that I used:
location ~* \.(eot|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin '*';
}
Within W3TC > Performance > CDN > Custom File List, I added the following to upload the actual font files:
{plugins_dir}/*.ttf
{plugins_dir}/*.woff
While you're there, set the Theme file types to upload to the following. Per #Yao's link, the default separators are inconsistent (should all be semicolons, not commas)
*.css;*.js;*.gif;*.png;*.jpg;*.ico;*.ttf;*.otf;*.woff;*.less
In S3 > Permissions > CORS Configuration, change the default
<AllowedHeader>Authorization</AllowedHeader>
to:
<AllowedHeader>*</AllowedHeader>
You should start seeing the necessary Access-Control-Allow-Origin header in the response.
In CloudFront > Distribution > Behaviors, make the following changes:
Change Allowed HTTP Methods to GET, HEAD, OPTIONS (you need OPTIONS)
Change Forward Headers to Whitelist
Under Whitelist Headers, Add >> Origin
To test:
curl -I -s -X GET -H "Origin: www.example.com" https://abcdefg543210.cloudfront.net/wp-content/path/to/foo.ttf
This should give you back the following header:
Access-Control-Allow-Origin: *
X-Cache: Miss from cloudfront
I found this blog post to be pretty helpful:
http://blog.celingest.com/en/2014/10/02/tutorial-using-cors-with-cloudfront-and-s3/

basicly It's because the font isn't set to be shared outside of the domain that you are on, so you can just use it as a resourse for, in this case, https://example.cloudfront.net
This can be changed in the webserver settings though.

The problem may not always be with the origin settings on Nginx or Apache at your web server end.
You will also need to enable CORS on your S3 AWS account for this to work correctly.

Related

Wordpress for Linux - Max-age never set

I have deployed a wordpress for linux app on an azure. It is working fine but I cannot get the Cache-Control header to set a max-age.
I am using the w3 total cache plugin and have set the options "Set expires header" with a value of 31536000 and "Set Cache Control policy" to Cache with max-age for css,js and media.
I can then see all the correct changes made in the htaccess file.
But the max-age value never gets set in the response Cache-Control header
I ran a phpinfo() and results are as follows
Apache Version Apache/2.4.25 (Unix) OpenSSL/1.0.2g PHP/7.1.2
Apache API Version 20120211
Server Administrator [no address given]
Hostname:Port 172.18.0.5:80
User/Group www-data(33)/33
Max Requests Per Child: 0 - Keep Alive: on - Max Per Connection: 100
Timeouts Connection: 60 - Keep-Alive: 5
Virtual Server Yes
Server Root /usr/local/httpd
Loaded Modules core mod_so http_core prefork mod_authn_file mod_authn_core mod_authz_host mod_authz_groupfile mod_authz_user mod_authz_core mod_access_compat mod_auth_basic mod_reqtimeout mod_filter mod_mime mod_log_config mod_env mod_headers mod_setenvif mod_version mod_ssl mod_unixd mod_status mod_autoindex mod_dir mod_alias mod_rewrite mod_php7
In the loaded modules there is no mod_expires listed which would probably indicate this may be the problem.
BUT how do I install this..?

X-Frame-Options: .htaccess vs httpd.conf

In httpd.conf (Unix / Mac OS Sierra) I've got "Header set X-Frame-Options SAMEORIGIN"
I'd like to override that for a specific directory to
X-Frame-Options ALLOW-FROM SpecificDomain.com
Goal is to allow iframe acess to that directory but no others.
I tried adding the ALLOW-FROM line to an .htaccess file in the target directory but no luck. iFrame is denied, browser console saying "X-Frame-Options" are set to "SAMEORIGIN"
There are compatibility issues with some browsers with the Allow-From parameter for X-Frame-Options response header, chances are you are dealing with a browser which does not support it.
Ideally try this command to see the headers output and make sure the setting you made is being used:
curl -I http://yourserver.example.com/exceptionpath/
If it is, instead of setting that other header you may also want to unset that header in that directory to avoid compatibility issues with that parameter:
Header unset X-Frame-Options
or if the above is not being applied:
Header always unset X-Frame-Options
Sidenote: If you are the admin of the site you don't need to use .htaccess if you have access to main configuration files, set in the appropiate Directory entry instead. Disable .htaccess files altogether with AllowOverride none. Configurations will be simpler and you will gain a bit of performance by not forcing httpd to constantly read that file several times with each hit.

Font from origin Error on Apache

I am getting the console error
Font from origin 'http://mycssandjsfiles.myurl.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://myurl.com' is therefore not allowed access.
Steps I Have done so far:
sudo a2enmod headers
Added to Both Directories to my .htaccess files
Header set Access-Control-Allow-Origin "*"
In Terminal:
sudo service apache2 restart
I'm Not Sure what else I need to do. Any Ideas ?

how to delete header cache in htaccess?

In my htaccess file there is this :
<FilesMatch "\.(js|css|pdf|txt)$">
Header set Cache-Control "max-age=7257608"
</FilesMatch>
Now, if I wanted to alter a css type file. the css will change if I refreshed the page. Other users still get the old css file because of the cache. what can I do on my side to let the users browsers recognize there is a change in the css file?
Generally rather than setting a cache age in the .htaccess, make sure you're configured to use if-modified-since which is documented in the Apache Caching Guide, using the mod_cache extension:
Generally, it's as simple as this, with exceptions written for secured resources:
LoadModule mem_cache_module modules/mod_mem_cache.so
<IfModule mod_mem_cache.c>
CacheEnable mem /
MCacheSize 4096
MCacheMaxObjectCount 100
MCacheMinObjectSize 1
MCacheMaxObjectSize 2048
</IfModule>

Header set Access-Control-Allow-Origin in .htaccess doesn't work

I can't figure out why my .htaccess header settings doesn't work.
My .htaccess file content:
Header set Access-Control-Allow-Origin *
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "*"
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]
But when I remove Header's and add them in index.php then everything works fine.
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: *");
What am i missing?
This should work:
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
Just for the record, I was running into the exact same problem and none of the answers worked.
I used a headers checker tool: http://www.webconfs.com/http-header-check.php
I was testing with my IP (http://192.0.2.1/upload) and what came back was the following:
HTTP/1.1 301 Moved Permanently =>
Date => Sat, 10 Jan 2015 04:03:35 GMT
Server => Apache/2.2.21 (Win32) mod_ssl/2.2.21 OpenSSL/1.0.0e PHP/5.3.8 mod_perl/2.0.4 Perl/v5.10.1
Location => http://192.0.2.1/upload/
Content-Length => 380
Connection => close
Content-Type => text/html; charset=iso-8859-1
There was a redirection happening and the AJAX request does not honor/follow redirects.
It turned out to be the missing slash at the end of the domain (http://192.0.2.1/upload/)
I tested again with slash at the end and I got this below. Added a slash in the script too, and it was now working.
HTTP/1.1 200 OK =>
Date => Sat, 10 Jan 2015 04:03:53 GMT
Server => Apache/2.2.21 (Win32) mod_ssl/2.2.21 OpenSSL/1.0.0e PHP/5.3.8 mod_perl/2.0.4 Perl/v5.10.1
X-Powered-By => PHP/5.3.8
Access-Control-Allow-Origin => *
Access-Control-Allow-Methods => PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Headers => *
Content-Length => 1435
Connection => close
Content-Type => text/html
Use this tool to test if your headers are good and to troubleshoot what is happening.
I have a shared hosting on GoDaddy. I needed an answer to this question, too, and after searching around I found that it is possible.
I wrote an .htaccess file, put it in the same folder as my action page. Here are the contents of the .htaccess file:
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
Here is my ajax call:
$.ajax({
url: 'http://www.mydomain.com/myactionpagefolder/gbactionpage.php', //server script to process data
type: 'POST',
xhr: function() { // custom xhr
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // check if upload property exists
myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
}
return myXhr;
},
//Ajax events
beforeSend: beforeSendHandler,
success: completeHandler,
error: errorHandler,
// Form data
data: formData,
//Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false
});
See this article for reference:
Header set Access-Control-Allow-Origin in .htaccess doesn't work
Be careful on:
Header add Access-Control-Allow-Origin "*"
This is not judicious at all to grant access to everybody. It's preferable to allow a list of know trusted host only...
Header add Access-Control-Allow-Origin "http://aaa.example"
Header add Access-Control-Allow-Origin "http://bbb.example"
Header add Access-Control-Allow-Origin "http://ccc.example"
Regards,
I activated the Apache module headers a2enmod headers, and the issue has been solved.
Try this in the .htaccess of the external root folder
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
Be careful with doing Header add Access-Control-Allow-Origin "*" This is not judicious at all to grant access to everybody. I think you should user:
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://example.com"
</IfModule>
I +1'd Miro's answer for the link to the header-checker site http://www.webconfs.com/http-header-check.php. It pops up an obnoxious ad every time you use it, but it is, nevertheless, very useful for verifying the presence of the Access-Control-Allow-Origin header.
I'm reading a .json file from the javascript on my web page. I found that adding the following to my .htaccess file fixed the problem when viewing my web page in IE 11 (version 11.447.14393.0):
<FilesMatch "\.(json)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
I also added the following to /etc/httpd.conf (Apache's configuration file):
AllowOverride All
The header-checker site verified that the Access-Control-Allow-Origin header is now being sent (thanks, Miro!).
However, Firefox 50.0.2, Opera 41.0.2353.69, and Edge 38.14393.0.0 all fetch the file anyhow, even without the Access-Control-Allow-Origin header. (Note: they might be checking IP addresses, since the two domains I was using are both hosted on the same server, at the same IPv4 address.)
However, Chrome 54.0.2840.99 m (64-bit) ignores the Access-Control-Allow-Origin header and fails anyhow, erroneously reporting:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin '{mydomain}' is therefore not allowed access.
I think this has got to be some sort of "first." IE is working correctly; Chrome, Firefox, Opera and Edge are all buggy; and Chrome is the worst. Isn't that the exact opposite of the usual case?
After spending half a day with nothing working.
Using a header check service though everything was working.
The firewall at work was stripping them
try this:
<IfModule mod_headers.c>
Header set Access-Control-Allow-Credentials true
Header set Access-Control-Allow-Origin "your domain"
Header set Access-Control-Allow-Headers "X-Requested-With"
</IfModule>
It's preferable to allow a list of know trusted host.
If anyone else is trying this, the most upvoted answer should work. However, if you are having issues it could be possible the browser has cached the REQUEST. To confirm append a query string.
To complete the most upvoted answer, I want to add the case whenever the options to the header is not add in a response request, you could add the always keyword from Apache.
In my case i needed to add the access control allow origin in the response of the redirection and not in the result of the redirection.
And a redirection is giving the 302 code status so the header wasn't filled with the correct information.
In this case I needed to add it :
Header always set Access-Control-Allow-Origin "*"
For more information you can check this thread :
Apache: difference between "Header always set" and "Header set"?

Resources