Font from orgin blocked using font-awesome - css

today I tried hosting font-awesome css files and font files on my cdn, and run into a problem. When loading the page on the google chrome console it displays the following message below.
Font from origin 'http://cdn.craftrp.co.uk' 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://craftrp.co.uk' is therefore not allowed access.
I have added the following code to a .htaccess file, I have 1 in the root and 1 in the fonts folder with the following code inside the .htaccess file
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
I also tried the code suppleid by bootstrap, https://www.maxcdn.com/one/tutorial/htaccess-example-collection//
But still it remained to error...

Related

Tomcat 9 - add an http header for content-dispostion = inline

I have a brand new installation of tomcat 9. It is running a webapp called jasperreports. When a report is downloaded from a browser I want it to display in the browser so I want to add the http header content-disposition to the header. I am kind of new to tomcat, how and where can I add this? In a regular apache server, I would do the following to achieve the same result:
<IfModule mod_headers.c>
Header set Content-Disposition "inline"
</IfModule>
But in Tomcat, I am unsure how to add this header to the response.
In order to do this you will need to edit $CATALINA_HOME/conf/web.xml to add a filter. Have a look at this

How to resolve "The Content-Type HTTP header is missing charset attribute" in play application?

We had a security check on our application, and it reported a few issues like missing charset attribute for .css and .js files.
Attack Type: Undefined charset attribute
Error Description: The Content-Type HTTP header is missing charset attribute
Content-Type: text/CSS
I found this answer The Content-Type HTTP header is missing charset attribute
Our application has been developed using play framework and I tried to add in the application.conf like this
AddDefaultCharset : utf-8
AddCharset utf-8 = [.htm .html .js .css]
But it didn't work. How can I resolve this issue in our application?
Thanks
Maybe You can try this one.
application.conf
play.filters.enabled += "play.filters.headers.SecurityHeadersFilter"
change this one, as Play Docs instructed.
play.filters.headers.contentTypeOptions -
sets X-Content-Type-Options, “nosniff” by default.
Source here.

Symfony2: Stylesheets loaded but not applied on NGINX leading to broken error pages

I've just installed a fresh and clean Symfony app. I'm using NGINX as my webserver.
The stylesheets don't show a http 404 error code in devtools network-tab and i can see their content in the preview-tab correctly.
example picture:
Did someone face any issue like this? I'm guessing it might be a permission issue...
EDIT #1: Attached a picture of the chrome devtools showing the css are loaded correctly.
You need to make sure your nginx.conf actually includes the correct mime-types.
http {
include conf/mime.types;
# ...
... or ...
types {
# ...
text/css css;

CSS Files showing up with type text/plain

I am attempting to serve my static blog (powered by jekyll) on my Ubuntu server but the CSS does not apply and I keep getting the issue:
"Resource interpreted as Stylesheet but transferred with MIME type text/plain".
In the source code, however, I explicitly list that these files are "text/css". Any ideas on how to solve this?
This was an Nginx issue. I needed to place
include /etc/nginx/mime.types;
in the "location /" block.
Check if you have set "rel='stylesheet' attribute.

Downloadable font on firefox: bad URI or cross-site access not allowed

I'm a webmaster at http://www.beperk.com (I'm giving you the URL so you are able to check the problem) and I'm having lots of problems using #font-face in CSS.
I want to use the foundicons from zurb dot com so I hosted them at Amazon S3.
I set up the bucket to allow crossdomain access as specified here: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors
And everything started to work seamless at webkit, trident and gecko... mostly: when browsing the web with firefox (version 17, 18 and 19 tested) all the icons fails randomly with this error:
Timestamp: 22/02/13 13:18:01
Error: downloadable font: download failed (font-family: "GeneralFoundicons" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
And I say randomly since after a full reload of the page (with control/command + R) every single icon appears normally to fail again after some visits.
Can anyone find the problem?
On your server you will need to add:
Access-Control-Allow-Origin
To the header of the font files, so for example if you are using Apache you can add this to the .htaccess:
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
If anyone are using local resource and facing this problem in firefox. You can go to about:config and change the security.fileuri.strict_origin_policy preference to false.
see : https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs
try to use implemented base64-encoded fonts like:
#font-face {
font-family:"font-name";
src:url(data:font/opentype;base64,[paste-64-code-here]);
font-style:normal;
font-weight:400;
}
see: http://sosweetcreative.com/2613/font-face-and-base64-data-uri
it worked perfectly.
I resolved the problem in Firefox (local resource access problem) using url: src: url("../fuentes/EurostileLTStd.otf"); instead of src: uri("../fuentes/EurostileLTStd.otf");.

Resources