I am getting an error in Firefox for my codepen project.
Blocked loading mixed active content
“http://localhost:8888/static/components/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0”
It works fine in Chrome and Safari but in Firefox the layout seems to be wrong and I can't drag&drop objects. I checked for solutions online which mention that the use of HTTP resources might cause this error but the only external resource I'm using is this:
<head>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="styles/index.css">
</head>
Any idea what else could be wrong?
I just had this problem too.
Were you by chance running a local web server on port 8888 at the same time you were trying to test a project on codepen.io? And, was your local web server using the same font-awesome package as your codepen project?
In my case, I was trying to test a project deployed on our staging server on the web at the same time that I was also testing the project on my localhost.
For some reason, Firefox was giving the "mixed active content" warning about my font assets at localhost, even though I was looking at the console for our project on the web, on a completely different server and in a different browser tab.
When I shut down my localhost server, closed the tab that had it open, and refreshed the project on the web, the warnings disappeared.
I have a feeling that this might be a Firefox bug where it is mixing up font assets that have been stored in local cache and are being used across different tabs at the same time.
Related
I'm trying to create a Firefox extension that will allow me to modify a page on my company's local web server. I don't have access to modify the source code of the page itself. So in the same spirit of extensions like the Reddit Enhancement Suite I'd like to write some code that will inject a CSS file and some javascript to enhance the page on page load for myself and my co-workers.
I've successfully made a Firefox extension that loads in files on regular sites like say google.com and such. But once I change the domain to match the page on my company's local web server (for example: 10.0.0.12:82), it stops working. Specifically I am attempting to inject a .css file into the page. I am using resource:// to do it and it works flawlessly on other sites. The CSS is not being injected at all. So it's not a matter of permissions or anything. It seems like the javascript isn't firing.
Is it not possible to do this on a local web server? Perhaps there are extra measures I need to take first since it's not a normal website?
Here is the relevant code from the files in my extension. I set up a path in my manifest file and then in the javascript file that loads I append a css file located at \chrome\skin\resources into the <head> tag of the loaded page.
chrome.manifest file
resource cemod chrome/skin/resources/
console.js file
$("head").append('<link media="all" href="resource://cemod/page.css" type="text/css" rel="stylesheet"></link>')
Just to reiterate, this code works fine when the extension is written to activate on other pages like reddit.com. But it stops working once I change it to the IP address of my company's local web server.
I have this problem: Font awesome not working in Firefox
But no one there explained why there's a need to play with CORS settings even though the fonts are hosted on the same domain.
/index.html
/fonts/vendor/font-awesome/font-awesome.*
They're being imported using #font-face(). Works fine in Safari/Chrome.
One thing to keep in mind is this is being hosted on Heroku, but is also happening on localhost.
Again, the question is why do I have to allow access control even though the domain is the same?
I've been in the same trouble.
The fastest way is simply using the cdn link :
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
I really don't know exactly what's the problem but I read that happens because there's a CORS configuration issue.
I've just solved using the CDN
I have a website that runs just fine with any computer.
But only some of my friends reported a common issue with my website, that it fails to load completely in their computers. In other words, it only loads the site background and doesnt go any further and can't load the body. I just read the source code of the page on those computers and I saw that the <head> part of the page was the only thing loaded!
This is strange! Only some of them has this problem not anyone.
Your site is returning a 500 Internal Server error. Your problem is on the server side. Try checking your server logs and see if you can find the probelem
I am working on a webapplication that uses caching to make it available offline. Everything works fine when running it chrome (offline and online). But when I run it on iPad the links don't work anymore and I get failed to load page everywhere. Removing the caching makes the links work again so it obviously has something to do with the caching. Navigating directly to the seperate pages of the webapp also works fine in Safari, its the link that causes the error. By default all links are loaded with AJAX in jQuery Mobile. Changing this by adding rel="external" also fixes the problem, but obviously I don't want to do that.
To enable caching I added this code: and created a manifest file with ALL the files (scripts, css, images, html). Does anyone know what the problem could be?
I've experienced this as well while working with caching using manifests. What I discovered was that there Chrome has no limits. iPad and iPhone do. This appears to be pretty small, around 5mb. Try removing images as much as possible and using YUI Compressor on your scripts.
Ajax requests can be cached actually, the system doesn't care if the request is by AJAX or normal full request. All you have to do is put the URLs you wanted to retrieve by ajax into the manifest like the rest of the assets.
Hope this helps
I'm totally stumped here, so any ideas would be appreciated.
I have a RichFaces application, which recently became non-functional when used from IE6. The problem began when I included the following line in my main template:
<a4j:loadScript src="resource://jquery.js"/>
This results in the following generated HTML:
<script src="/AgriShare/a4j/g/3_3_3.Finaljquery.js.jsf" type="text/javascript"></script>
By "non-functional" I mean that pages no longer load, b/c the first page appears to hang the browser for a long time, and then all references to jQuery say that the object was not defined. Eventually this appears to put IE6 in a state where further clicks do nothing.
After a lot of trial and error I have established the following:
The app still works in Chrome, Firefox and IE8
The app still works in IE6, if I switch to HTTP. So, the problem appears to be related to HTTPS, which I can't dispose of.
I further narrowed down the problem by trying to manually request 3_3_3.Finaljquery.js.jsf in IE6 address bar. It asks me if I want to save the file (so it can see it is there), but when I say 'Save', it hangs for about 5 seconds and then says:
Internet Explorer cannot download 3_3_3.Finaljquery.js.jsf from [host_name].
The connection with the server was reset.
Doing the same download over HTTP succeeds.
Gradually reducing the size of the file, I noticed that the download eventually succeeds over HTTPS, if I get the files size below ~ 110KB. There is no specific size it works at though. I tried the same trick with prototype.js and it worked at a different size value.
I can't trace the SSL session, b/c I cannot get access to the certificate's private key, so now I have absolutely no clue what to try next.
Any ideas would be greatly appreciated.
Try using Fiddler for debugging. It can handle SSL.
You might also want to consider hosting the server yourself and taking a look at the server log.
The problem was solved by turning off compression of javascript files in Web Cache.
Sounds like the problem might be related to this: http://support.microsoft.com/default.aspx?scid=kb;en-us;327286