So ive been through several posts and searches, but im still at a loss for how to get Chrome to display images when the src attribute uses a file thats located on another server. Im getting the image and setting its path via a custom file browser that Im hooking into CKeditor with. Works fine in IE, just not chrome.
This is for an intranet, and some of the image content is stored off of the web server. Although IE displays fine, it seems that Chrome does not like to display images with the src attribute is of a format like
file://server_name/share_name/folder_1/file_1.png
Strange, even though Chrome will pass the users identity, so its not a security issue. Also, if I take the path and directly paste it in the url window of Chrome, it displays fine. Just not when a img src value.
If this was just a page on its own, I could use a custom handler and write to the response stream, but this needs to work with a content editor.
Id like to include Chrome since many of our users have it and use it daily, but our default is IE.
Are there any file url schemes, or Chrome settings that will override these issues?
The issue may not be the image or URL format. I'd wager that it's browser security restrictions.
To ensure that maliciously designed web pages can't access a user's local files, accessing any data from the user's filesystem (especially network drives) is generally disallowed in most modern browsers. (At least in their default configuration. There may be policies or runtime parameters to override these for testing purposes such as Chrome's --disable-web-security parameter, but these are purposefully difficult to turn off.)
If you want the content to display across all browsers, you'll likely need to deliver it via HTTP(s) like the rest of the page content.
I've previously explained that I was trying to link a ejs page to a jade-based app. Then after many failed attempts I tried to convert that page to Jade and still ended up with a truckload of errors. Finally, I thought about simply putting a HTML Link that would redirect me to that ejs page on click.
What I fail to understand though, is why Firefox has no problems displaying the page when I directly put its path in the browser:
file:///home/ghanem/Documents/Project/views/account/el/el.ejs
But when I try to access it from my app through a simple code, it doesn't redirect me to the same very page:
My Stubborn Link
I should also point out that I've already set security.fileuri.strict_origin_policy to false in Firefox.
What I fail to understand though, is why Firefox has no problems displaying the page when I directly put its path in the browser
Because it trusts you
But when I try to access it from my app through a simple code
Your app is "just another website" as far as Firefox is concerned. It doesn't trust it.
I should also point out that I've already set security.fileuri.strict_origin_policy to false in Firefox.
That lets XMLHttpRequest access file:// URLs providing the document it is running in was loaded from a file:// URL.
See mozillaZine: Links to local pages do not work.
user_pref("capability.policy.policynames", "localfilelinks");
user_pref("capability.policy.localfilelinks.sites", "http://localhost:7896");
user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");
I noticed strange behaviour for google chrome.
I have web application based on java spring-mvc framework.
In head tag <meta charset="utf-8">is set.
For each page response headers return Content-Type:text/html;charset=UTF-8
In IE 8,9,10,11 and FF if user changes encoding in browser's settings to KOI8-R and then goes to another page inside domain - browser encoding will be automatically returned to UTF-8.
BUT in google chrome in same case KOI8-R will be present even if we go to other pages inside domain.
Is it expected behaviour for Chrome? Maybe it is some kind of bug?
Chrome doesn't like to use UTF-8 by default so you have to do:
Click the Chrome menu on the browser toolbar.
Select "Tools"
Select "Encoding".
Pick one "Unicode (UTF-8)" from the menu of encodings
To make the client do this by default you would probably have to write some script but I'm afraid I can't help you out there.
I have converted my existing website to Smarty template (my very first project with 1 day of smarty experience under the belt)
Prior to conversion my website looked fine in IE and FF.
After the conversion FF still looks okay however in IE everything falls apart.
I have tried comparing the source code in IE and FF and everything looks exactly the same.
Any help is appreciated.
Since Smarty is just the templating system that generates the HTML sent to the browser, the issue probably occurred when you split up your existing site into parts. Unfortunately it isn't very easy to find out what is wrong with a full project on SO. That said, here are some tips on debugging the issue.
Load your old site and copy the source from the browser (doesn't matter which browser as the server sends the same HTML*).
Load your new site and copy the source from the browser.
Diff the two sources to find the differences.
I think that's the best place to start. If the new site is sending the exact same HTML to the browser, then it would seem that some resource isn't being loaded (bad link) or javascript isn't being executed in IE, which should be separate from Smarty. For that check IE's Developer Tools and make sure no CSS is getting a 404 and no js exceptions are being thrown.
*As long as you aren't modifying things on the server based off the User-Agent sent, which is not common.
In Firefox, I view my site and get no warnings about insecure mixed content.
Using FireBug, I can see that every request is https.
In Chrome, I get the https crossed out in the address bar.
I viewed source in Chrome and then ran this regex /http(?!s)/ but the only things it found were the href attributes for some external links and the doc type and http-equiv meta tags.
Using Chrome's Resource Tracking revealed all requests were https too.
This includes Google Analytics, jQuery from Google's CDN and Facebook like scripts.
Is there any specific tool I can use to show non https requests, or anything further I can try?
I found that I get the "mixed content"-warning in Chrome even when there is no mixed content, if sometime during the session mixed content was already encountered on the domain.
(Also mentioned here: Why is Chrome reporting a secure / non secure warning when no other browsers aren't?)
In Chrome's Developer Tools, the Console tab shows the resources that it won't load because they unsecure.
You can add the "scheme" column to the Chrome developer tools network tab to show which requests were sent over http or https:
Press F12 to show the developer tools
Switch to the Network tab
Right click in the column headers and select "Scheme"
Reload the page to show which elements are loaded over http or https
In situations like this where it's helpful to see exactly which protocol is being used to load resources, I would recommend Fiddler2 as a browser-agnostic solution that can show you exactly what traffic is occurring on each request.
From the site:
Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and "fiddle" with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.
Edit: In-browser debugging tools are becoming really good so this third-party tool may not be as useful as it was when this answer was first written.
Open up the Web Inspector and find the yellow triangle (warning) in the top right. Click on it and it will display all security issues.
In 48-th version of chrome they added a security panel. Using it you can quickly identify the mixed content resources:
Do you have the HttpFox plugin for FireFox? That'd work, I think.
Among other things, it reports on the URL, Method, Result Code, and bytes of all the assets that a web page requests. It's what I've used to trap the occasional non-HTTPS graphic, etc. I'm sure the other suggested tools would do the same...
You can use SslCheck
It's a free online tool that crawls a website recursively (following all internal links) and scans for nonsecure includes - images, scripts and CSS.
(disclaimer: I'm one of the developers)
I know this post is old, but I ran across it and had the same issue. I clicked on the Chrome menu (top right corner), scrolled down to Tools> and selected Developer Tools. Clicked on the Console tab and it told me exactly what the problem was... the favicon was served over http, not https, but of course it was not in the page source code. Corrected the problem in my CMS, which loads the favicon without code in the page... and no more error!
Note that 'mixed content' and 'mixed scripting' are detected seperatly. Check this site for the meaning of the icons in Chrome: https://support.google.com/chromebook/answer/95617?p=ui_security_indicator&rd=1 (click 'see details' link).
Grey icon = mixed content, red icon = mixed scripting.