Cross Domain error while using fonts - php

I have come across an error when trying to access my site with http://www.example.com instead of http://eample.com. My font icons will not load. So when searching for the solution to this I came across
the following solution which was adding the below code to a .htaccess file on the server.
<FilesMatch "\.(svg|ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://example.com, http://www.example.com"
</IfModule>
This managed to fix the problem but for Chrome only. How can i fix the issue for all browsers.
Thank you

Try using:
href="/css/font-awesome.min.css"
This will be relative to the domain they visitor is on, so if they connect to either http:// or http://www the fonts will load and there won't be a cross domain error

Related

Magento index.php required with SSL for login and checkout pages [HTTP 404]

I am using magento 1.9, I've got installed SSL which is working just fine.
The problem is when I am switching my secure link to https:// - all pages are working correctly, but pages such as checkout, register and login are throwing error 404, unless I manually add prefix with index.php
These links are working correctly when I am working with non-secure connections.
For example this links are working correctly:
http://myshop.com/customer/account/login/
http://myshop.com/customer/account/create/
But my links
https://myshop.com/customer/account/login/
https://myshop.com/customer/account/create/
are throwing HTTP 404 - Not Found - In order to make it work I have to manually add index.php prefix so my links look like this:
http://myshop.com/index.php/customer/account/login/
http://myshop.com/index.php/customer/account/create/
I have changed my .htaccess file, and I think the problem lies in this file. How can I edit this file so it fits my purposes ?
Any other solutions are more then welcome also.
The SSL has its own configuration files and sometimes when SSL does not work well, it may give the error of 404 (Page not found). Normally, the file name is http.conf or ssl.conf or default-ssl file which depends on your OS
Find here:
<Directory "path to your directory">
SSLOptions +StdEnvVars
AllowOverride All
</Directory>
make sure that AllowOverride All is present in your config
if it does not help attach what OS and web server you are using
Double check if you have enabled Web Server Rewrites
config > general > web > Search Engine Optimization > Use Web Server Rewrites > Yes
P.S restore the .htaccess file before try above method
Checked some of your website current pages such as https://www.myshop.com/registreren and it is working fine with https.

The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin

I am trying to login with ajax to an API and I get this error:
XMLHttpRequest cannot load. The 'Access-Control-Allow-Origin' header
has a value that is not equal to the supplied origin. Origin
'http://localhost' is therefore not allowed access.
I read all about this error, all over the internet, and I've tried all the solutions I could find online. I modified the .htaccess and apache httpd configuration file according to the CORS instructions here: http://enable-cors.org/server_apache.html
Access-Control-Allow-Origin: *
Nothing seems to be working. I'd really appreciate if you guys can help me out with this. Thank you!
You have to set Access-Control-Allow-Origin header to * or specified value http://localhost
You can do this through:
1- Your code
2- .htaccess file
3- Server config (restart web server required)
Here is the link that show how to do it on apache
http://access-control-allow-origin-guide.com/enable-cors-on-apache-linux/
As added browser security, unless the API allows cross-browser origins in the the return responses header there is no way around this.
The browsers are blocking it, there is a plugin to allow for chrome but it is not realistic to depend on browser plugin to allow end user requests,
Try and reach out to the API provider and see if they can look into updating the header in the response.
It is a CORS issue:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
i use htaccess file for load JSON data in different hosting, and its works but
it have to put inside the public html root of our web hosting for example
uploading .htaccess into --> (https://freehostingsomewhere.com/)
then inside .htaccess
<FilesMatch "\.(ttf|otf|eot|woff|jpg|png|jpeg|gif|js|json|html|css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://localhost"
</IfModule>
</FilesMatch>
in here i use http://localhost to development and it works,
maybe if i have another web host just change it into that url, i will try it later (it can, i already try it) :p
this is just for more clear explanation
cheers :p
Are your requests using either cookies or authorization by any chance?
Check on your ajax call on the client side if you're configuring it to be done "with credentials"
.withCredentials = true;
If yes, the wildcard(*) will not work and you'll need to provide the exact host as the value for Access-Control-Allow-Origin.
Refer to this stack overflow answer or Mozilla Documentation on CORS

Cross-Origin Resource Sharing policy blocking glyphicons from Bootstrap in CodeIgniter application

I'm trying to use the glyphicons provided by Bootstrap 3.3.6 but Chrome is blocking the access to them with this error message:
Font from origin 'http://[::1]' 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://localhost' is therefore not allowed access.
This is my .htaccess:
<IfModule authz_core_module>
Require all denied
</IfModule>
<IfModule !authz_core_module>
Deny from all
</IfModule>
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
What am I doing wrong? Am I editing the wrong .htaccess?
I also tried adding header("Access-Control-Allow-Origin: *"); at the beginning of my header.php file but that didn't work either. I'm out of ideas.
The folder structure is like this:
application
controller
model
view
header.php
index.php
footer.php
.htaccess
system
assets
css
fonts
images
js
I found the issue: I didn't set the base_url in the config.php from CodeIgniter. After setting it everything works.
You need to add the base URL to your configuration file:
$config['base_url'] ='http://www.urlname.com';
We can set this way so we can move any server no need to change try this one.
$config['base_url'] = 'http://'.$_SERVER['HTTP_HOST'].'/';
Allowing cross-site scripting may cause security issues, try to adjust your codeigniter options;
1.) Go to application/config/config.php file,
2.) find $config['base_url'] = ""; and
3.) place your project folder's path as value. $config['base_url']="http://localhost/yourProjectFolder/";

CSS on external URL read by site but font definitions not accessed [duplicate]

I am trying to create a type of font repository for use on my websites, so that I can call to any font in the repository in my css without any other set-up. To do this I created a subdomain on which I placed folders for each font in the repository that contained the various file types for each font. I also placed a css file called font-face.css on the root of the subdomain and filled it with #font-face declarations for each of the fonts, the fonts are linked with an absolute link so that they can be used from anywhere.
My issue is that it seems that I can only use the fonts on that subdomain where they are located, on my other sites the font does not show. Using firebug I determined that the font-face.css file was successfully being linked to and loaded. So why does the font not correctly load? Is there protection on the font files or something? I am using all fonts that I should be allowed to do this with, so I don't see why this is occurring. Maybe it is an apache issue, but I can download the font just fine when I link to it.
Oh, and just to clarify, I am not violating any copyrights by setting this up, all the fonts I am using are licensed to allow this sort of thing. I would however like to set up a way that only I can have access to this repository of fonts but that's another project.
This is because Firefox (from your mention of Firebug) thinks cross-domain, even subdomain, Web font embedding is a bad idea.
You can convince it to load fonts from your subdomain by adding this to the top-level .htaccess file of the subdomain where your fonts are being served (updated to adapt code from the same file in HTML5 Boilerplate):
<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
In response to this:
I would however like to set up a way that only I can have access to this repository of fonts but that's another project.
The W3C spec for Access-Control-Allow-Origin doesn't say anything more than either a wildcard "*" or a specific domain. So far, I've found this SO answer which suggests validating the Origin header, but I think that's a Firefox-only header. I'm not sure about other browsers (they don't even need the .htaccess trick above for cross-domain Web fonts to work).
Another way to fix this in Firefox is to embed the font directly into the css file using base64 encoding. Especially nifty if you don't have access to some of the configuration mentioned above.
You can generate the necessary code on fontsquirrel.com: in the font-face Kit Generator choose expert mode, scroll down and select Base64 Encode under CSS Options - the downloaded Font-Kit will be ready to plug and play.
This also has the fringe benefit of reducing page load time because it requires one less http request.
If you do not want to allow resources from all domains but only from sub domain of your site, you should do it like:
# 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>
Source: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html
Using http://www.fontsquirrel.com/fontface/generator in "expert" mode and choosing base64 as an option returned a stylesheet.css with the necessary base64 encoded data to use in our stylesheet. Seems to work in all browsers we've tested except IE8.
We run into this issue most when applying themes to 3rd party tools like salsa petition where we're forced to host the font.
Thanks for all the help everyone!

Access-Control-Allow-Origin Issue

I have the following in my .htaccess located in http://cdn.example.com
Header add Access-Control-Allow-Origin "http://example.com"
When I go to my site it works fine and allows me to grab from my CDN.
BUT A user of my site just pointed out to me that when you go to www.example.com (www. before site name) it wont load font files. I tried adding another header add but it then says theres 2 values and it just goes for only one of them (example.com)
I have no idea how to fix this I generally want a way to fix this from htaccess and not from a php file.

Categories