I have used the following rule to allow our static domain to host fonts, but I've run into a problem font's not being used by the browser (firefox, safari) when the browser cache is enabled.
<Directory "/site/http/web/assets/fonts">
<FilesMatch "\.(eot|otf|woff|ttf)$">
SetEnvIf Origin "^http://(.*)?main-domain.com$" origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>
</Directory>
I've also used the below rule to let browsers know it's ok to cache static content:
ExpiresActive On
ExpiresDefault "modification plus 10 years"
If I browse the site with the browser cache off, the fonts load and display every time.
If I turn my browser cache off and load a page, the fonts get loaded (firebug > net) but aren't displayed!
Is the 304 Content Not Modified Header causing the browser to ignore my efforts?
If you want your header addition to be used on a non-2xx response, use
Header set always Access-Con...
Related
I created a simple webapp container with the image wordpress:latest on linux on azure.
Everything works fine. Now I tried to embed this website in a website which I am working on running on my localhost:port.
Since I don't have access to SSH to edit the wp-config.php or .htaccess (it's anyways in the docker container) I installed the plugin wp-htaccess-editor to have access to the .htaccess (it really has access... I did changes and checked with another plugin..)
# BEGIN HttpHeaders
# The directives (lines) between "BEGIN HttpHeaders" and "END HttpHeaders" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<IfModule mod_headers.c>
<IfModule mod_setenvif.c>
SetEnvIf Origin "^(.+)$" CORS=$0
</IfModule>
Header set Access-Control-Allow-Origin %{CORS}e env=CORS
<FilesMatch "\.(php|html)$">
Header set X-Frame-Options "ALLOW-FROM http://192.....:5174"
</FilesMatch>
</IfModule>
# END HttpHeaders
But I still get the error:
Refused to display 'http://goofyPage.azurewebsites.net' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
But it is not true that x-frame-options is set to sameorigin.. it is set allow-from myLocalIP. => Somehow can it be that nginx overrides this option? since when I check the header data it is really still "sameorigin"...
What are my options to make this work? Should I add the header option also on Azure on my webApp->configuration->Application settings??
When I check https://goofyPage.scm.azurewebsites.net/Env#httpHeaders
AppSettings
Header = set X-Frame-Options ALLOW-FROM http://192...:5174
...
Environment variables
APPSETTING_Header = set X-Frame-Options ALLOW-FROM http://192....:5174
Header = set X-Frame-Options ALLOW-FROM http://192.....:5174
I have a static website hosted with Heroku's hobby tier. I have an issue where everytime I push a new deployment from my GitHub repository, my stylesheet doesn't update for hours (even though my HTML does). As the stylesheet displays correctly on an incognito tab and after clearing "Cached Images and Files," I assume locally cached website files are the issue. Is there a way to bypass this in order to update my CSS stylesheet after every deploy?
My stylesheet is ~600 lines if it matters.
Adding the following to my htaccess file worked for me.
<FilesMatch "\.(html|htm|js|css)$">
FileETag None
<IfModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 12 Jan 1980 05:00:00 GMT"
</IfModule>
</FilesMatch>
This prevents caching for HTML, HTM, JS, and CSS files.
Note: I am using Wordpress and serving the media files, css, js, etc. through Amazon CloudFront/S3.
Hello,
I know there are a lot of posts like this but I am still struggling. I was able to fix this issue for a majority of the font files that I am loading, however, this one continues to be an issue.
Access to Font at 'http://mycloudfrontID.cloudfront.net/wp-content/themes/bridge/css/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3' from origin 'http://mydomainname' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://maxmajor.net' is therefore not allowed access.
The other font files are fine after I added this to my CORS policy on AWS S3:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
and this is in my .htaccess:
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Any ideas why this error is still firing?
Thanks,
Brian
Try to change:
Header set Access-Control-Allow-Origin "*"
with this:
Header add Access-Control-Allow-Origin "*"
Also I read
How does Access-Control-Allow-Origin header work?
Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy
that for security reasons you have to include your URL.
So, your .htaccess should have this:
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css)$">
<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "http://mysitename.com"
</IfModule>
</FilesMatch>
Works for me!
Have you considered referring the following thread?
CORS Issue with woff2 fonts behind CDN in Chrome
It says
Turns out that the problem was actually with the Content-Type. As soon as I changed the content type to application/font-woff2 and invalidated the cache of these woff2 files, everything went through smoothly.
Are you sure that you are sending Authorization headers with your GET requests for the fonts?
If not, in your S3 CORS policy change
<AllowedHeader>Authorization</AllowedHeader>
to
<AllowedHeader>*</AllowedHeader>.
This tiny miss had bugged me for a month.
I'm having issues with ..Cross-Origin Resource Sharing policy: The 'Access-Control-Allow-Origin' header..
The site runs on 3 different domains using the WPML plugin for 3 different languages. The references to e.g. the stylesheet URL point to 1 URL (the main domain) which means that 2 of the sites are requesting info cross domain and this is causing fonts not to load.
I'm hoping to solve this by removing the protocal and domain from the stylesheet URL's, so that it's pointing to a 'relative' path to the files (e.g. /wp-content/themes/salient/style.css?ver=4.8.1)
Is there a way to change this in Wordpress? Doesn't just have to be for the stylesheet, it can be for all the files that are referenced by Wordpress.
You can allow resources to be loaded from sub domain by adding following line to your .htaccess file
Load resources from sub-domain:
# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0
<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN
</FilesMatch>
</IfModule>
Load resources from all other domains:
# Allow font, js, and css to be loaded from subdomain
<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
Source: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html
I've read almost every post on stackoverflow in regards to CORS and whatever I try does not work. Here is my setup:
Ubuntu (digital ocean)
nginx
cdn: cdn77.com (not amazon)
cloudflare
wordpress with wp fastest cache
Each time a new setting was done I've purged cloudflare and restarted nginx.
This is what I've tried:
.htaccess (doesn't work)
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With"
Header set Access-Control-Allow-Methods "GET, PUT, POST"
</FilesMatch>
</IfModule>
nginx (doesn't work)
add_header Access-Control-Allow-Headers "X-Requested-With";
add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS";
add_header Access-Control-Allow-Origin "*";
I am pulling my hair out trying to figure out why font awesome wont show its icons on my site which is on a different domain.
.htaccess files are apache only, it will never work for Nginx.
With nginx it should work if theses headers are added to the font HTTP response... but it seems you do not own the fonts and you take the fonts from another website. The CORS headers need to be set by this website, not yours. Check what are theses headers on the fonts, and check that your website is allowed to use the fonts from there (else you will have to download the fonts on your website and add the headers on an nginx location based on the font extension.
I guess you confuse CORS headers and CSP headers (**C**ontent **S**ecurity **P**olicy). Where you can give a list of allowed resources for your website.