I'm running into an issue where I'm trying to load authenticated HTML content from a different domain via CORS. This content includes references to images, styles, and fonts.
I can load the html, images, styles, etc. but for some reason my cookie headers are not being passed along to any web fonts, resulting in a 403 forbidden error.
If after logging in, I try to access the webfont directly, I'm able to do so and it downloads fine, but it's failing inside of the #font-face at-rule in our CSS.
How can I get the browser to send along the auth cookie when it requests the web fonts? Is this possible? Is something wrong?
Thanks!
The question is quite old, but I had the same problem only in Chrome for Android.
Not tested yet but guess IOS browsers may also show this problem.
I solved adding the css which includes the font-face with jquery after authentication has been completed.
Something like:
$.when(my-function).done(function() {
$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'css/main.css'));
$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'css/font-awesome.min.css'));
});
Related
I am using Roboto from googlefonts.
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
After adding HTML5 Application Cache chrome blocks the request for the css file.
Without using Application Cache (simply removing manifest="myApp.appcache") everything is fine.
Could anybody explain me why this happens and how to fix this?
Note: The CSS-file is not added to the application cache manifest file.
I believe any resources not included in the .appcache file are blocked.
I am making a small recipe website for a friend of mine in django. Currently, I am in the process of deploying it to Heroku. I am using Amazon S3 for static content.
Here is the website: https://chiryaroti.herokuapp.com/
It seems S3 itself is working fine as it downloads css, and js. But, when I "inspect elements" in firebug, it says no style attached.
Why is not HTML making use of the css stylesheets ?
Thanks in advance.
You are requesting insecure resources(http) in a secure page(https), those resources are blocked by browsers.
You should use protocol-relative paths.
e.g.
<link href="//chiryaroti.s3.amazonaws.com/css/main.css" rel="stylesheet" />
I'm developing an ASP.Net app that is using html5shiv and ssl. For some reason I am getting mixed content errors in IE7 using html5shiv. If I remove html5shiv the errors go away. I'm also using update panels and master pages if that matters. Any ideas?
Edit: After further testing it appears to be a combination between html5shiv and a stylesheet. If either are excluded, no mixed content error.
<script type="text/javascript" src="../js/html5shiv.js"></script>
<link rel="stylesheet" href="../styles/global.css" />
Solution: I had a data uri on a header style. Removing the uri solved the problem.
Are you using the externally hosted html5shiv (on a CDN)? If so, download the file and host it yourself on the same server.
If you're using https, you need to make sure that all files are served via https. If you have any http downloads on the page, you'll get mixed content warnings.
It sounds like your html5shiv file may be being served via http, and this is causing the problem.
If you're downloading it from a third party site, check whether that site allows https downloads. If not, you may need to serve it yourself.
This ended up being an issue with a css style with a data URI. Apparently IE7 recognizes this as mixed content. The modernizer was dynamically loading a header tag which is the element the offending css style was applied to.
I am building a website using asp .net. The site uses a Google font this is imported in the masterpage like so...
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200" media="screen"/>
Note that I have removed the http(s) from the url.
However I still always get the following error in a popup...
"This page is accessing information that is not under its control. This poses a security risk. Do you want to continue?"
I thought that removing the http(s) would ensure that this error would not appear? How do I go about removing it?
I have also tried putting this reference in my css files using an import but I still get the popup.
I don't want to change browser settings as clients can't be expected to do this.
Thank you
I don't know if the solution below is compliant with Google API's Terms of Service.
The error you have is due to a Cross-Domain request (the popup is known as the Cross-Domain Data Access dialog).
To avoid this dialog, you can host the .css file & the related font files on the same domain has your website.
In our app (https://apps.facebook.com/testedenivel), we explicitly reference the page css in a https link like this:
<link rel="stylesheet" href="https://d2asm4nez8zghw.cloudfront.net/content/app-teste-de-nivel.css?v=0.96.02" type="text/css" media="screen">
But strangely, Facebook is preloading this this css file as a HTTP link. At some point before, we used this HTTP url but later we changed it to HTTPS, and now it seems that Facebook is using a former, cached version of that url:
<script type="text/javascript">
new Image().src = "http:\/\/www.talkfast.com.br\/content\/app-teste-de-nivel.css";
</script>
The problem is that when the user enters our app via secure browsing, the HTTP link preloading is causing the browser to alert our users that some insecure content is about to be loaded. We'd like to know how to tell Facebook to remove this preloading script, or at least to use our current HTTPS url, like this:
<script type="text/javascript">
new Image().src = "https://d2asm4nez8zghw.cloudfront.net/content/app-teste-de-nivel.css?v=0.96.02";
</script>
There seems to be scarcity of reference regarding this issue on the web, so any help would be appreciated.
I'm not test this solution in facebook app but on wild web you can use this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
as proof :)
http://paulirish.com/2010/the-protocol-relative-url/
With this all resources loaded with page protocol, so user don't see confirmation about unsecured elements on page.
Just create test app with Heroku and my chromium not angry about https resouces inside frame so problems depends on browser.