my problem is that I am using the canvas .toDataURL() method to display a preview of an image on Chrome and Firefox but that is causing a warning to appear because the site is over a SSL connection.
I get the following warning message when I display the image using toDataURL():
The page at ... displayed insecure content from ....
This only happens in Chrome since chrome has that Lock next to secure web pages:
Which causes the Green Lock on the address bar to change state to a warning state saying that there are resources on this page that are not secure.
Is this an expected behavior for toDataURL()?
I don't see why it would be unsecure since I am not fetching any data over an HTTP connection or even fetching any data at all since it is all done via JavaScript.
But I am probably wrong, please correct me.
Is there a different way for me to make sure I am securing this content? Or to not cause the warning to occur? (And I do need to use the .toDataURL() method?)
Open the Developer Tools console in each browser and look for the exact URL that they're claiming is insecure. It would be very surprising to learn that either browser has such a bug. IE7 and below have this bug, but they don't support DATA URLs at all.
If you're displaying the image from an unsecure location (file://) you can't move it to a secure context (https://) without running into errors. This might be causing the browser to treat it as insecure.
Recommended reading:
SECURITY_ERR: DOM Exception 18 on using getImageData in a Chrome Extension
HTML5 Canvas - How does the origin-clean flag get set to false?
Related
I am developing a chrome extension which loads a url in an iFrame. The actual url is hosted using https, however I want to debug it on localhost, thus wanted to allow mixed content. I can do that by allowing unsafe scripts by clicking the shield icon present in the address bar. The problem is it still generates a lot of warnings in the developer console which spams the console and doesn't let me see the actual debug messages.
Is there a way to remove the Mixed Content Warnings from the console, just for the development purpose?
The warning text example is as follows -
Mixed Content: The page at 'https://www.example.com/' was loaded over
HTTPS, but requested an insecure stylesheet
'http://localhost:8080/test.css'. This content should also be served
over HTTPS.
I just needed to use Filters to select the Logs and Errors and deselect everything else. The Filter option is available in the console view toolbar.
Click Me
This used to work as a valid href attribute but it seems in the past few months it now shows an error in the console (I'm using Chrome):
Not allowed to load local resource: view-source: http://stackoverflow.com
I found some links from 2013 where this was once a bug in Chrome but said it was fixed.
Could someone point me to an authoritative source that can explain why this no longer works? I assume that this is security by the browser and not an angular issue (since view-source is whitelisted and used to work)
Looks like Chrome and Firefox (at least) disabled this within the past year or so
I found this thread, and these release notes explaining why and provides a timeline as to when the change took place.
Related StackOverflow question: File URL "Not allowed to load local resource" in the Internet Browser
Chrome responds with the "Not allowed to load local resource:" as a security protocol. I'm not sure why this used to work, but not now, though there is no real way around this unless web-security is disabled. There may be a different outcome on other browsers, but ultimately you are correct in thinking that it's Chrome's security.
The reason is that Chrome tries to preload URLs in background, to speed up your browsing experience.
If you open the DevTools after loading the page, the content of the items listed on the Resources tab may not be populated. This is also true of network requests on the Network tab. To see the fully populated resources on the Resources tab, first open the DevTools, then refresh the page, or navigate to the desired page with the DevTools open. Now select the html resource and it should be populated.
Various flavors of this have been asked already, but I've yet to see a real answer for this.
We have a separate image service that our web app uses to get some of its images. The image service is well tested and is functioning properly. To make it concrete, our app is served from domain.com. The src element of img elements is images.domain.com/{imageId}. The image service retrieves the URL for the image and sends back a HTTP 302 redirect for the image.
The application allows users to change images. So say a user 5 has image A as a profile image, and decides to change it by uploading image B. When the user uploads the image, the application cache is properly invalidated and the database is updated. The application does a standard redirect after POST and one of the elements in the page that the user is redirected to after changing her image is something like:
<img src="example.domain.com/5">
The problem is that Chrome never makes the call to example.domain.com/5 to retrieve the image upon the initial redirect or a regular reload of the page, it simply serves image A from the browser cache. A standalone call to example.domain.com/5 correctly returns image B, and a hard refresh or clearing Chrome's cache forces Chrome to request the image's src, which correctly returns image B. Note that I'm not talking about serving either image from the cache after getting a 304 Not Modified response, I'm talking about Chrome deciding not to visit the img src at all and just returning image A. Also, appending some unique query string to the img's src attribute fixes the problem, but that's a hack that we'd rather not have to do.
It's worth noting that Firefox was doing the same thing initially. There were no Cache Control headers in the response initially. We added a Cache Control: no-cache header (and tried no-store as well) to the response header and this fixed the behavior in Firefox, but Chrome and Safari still serve the outdated, cached image without making a call to the image's src.
It looks like this was a longstanding bug in Chromium (https://code.google.com/p/chromium/issues/detail?id=103458) that's allegedly fixed as of about 6 weeks ago, but we're using the most updated version of Chrome.
We've looked at the answers here and here but they don't actually answer the question.
Per section 14.9.1 of RFC 2616:
If the no-cache directive does not specify a field-name, then a cache MUST NOT use the response to satisfy a subsequent request without successful revalidation with the origin server. This allows an origin server to prevent caching even by caches that have been configured to return stale responses to client requests.
Unless we're missing something or doing something wrong, it would seem that Chrome (and Safari) are not complying the RFC behavior for no-cache headers for 302 redirects? Anyone experience this before or have any insight?
cache-control: no-store
I had the same maddening problem that you described (slightly different in that it was a missing cookie redirect back to the login page) that worked everywhere but Safari.
In desperation, I came across this open WebKit bug and saw the fateful comment (and finally a glimmer of hope):
CachedRawResource now keeps the redirect chain, and has some trivial logic for checking correctness, but it's nowhere near complete (only checks cacheControlContainsNoStore()). And of course other resource types don't have anything.
Added no-store to my cache-control header and no more problem.
Please read this.. https://www.hochmanconsultants.com/articles/301-versus-302.shtml
Chrome has pretty aggressive caching.
When you use a temporary redirect, you are basically saying that the actual URL is temporarily unavailable so use this other URL instead. Chrome rightly caches the old URL because it is still valid. Try a 301 instead. Then Chrome should know that the original URL is no longer valid.
I have an iFrame (https://example.com/iframe) that runs within http and https protocols (ie. http://example.com and https://example.com/login).
This iFrame has a conditional that sometimes forces a page refresh
window.top.location.reload();
When on https://example.com/login the reload works fine. When on http://example.com the reload doesn't work (as expected due to same origin). This is OK. The iFrame is doing other background activities that are good for the user experience in both instances.
This is the error that Chrome gives, I am sure others do the same:
Unsafe JavaScript attempt to access frame with URL http://example.com
from frame with URL https://example.com/iframe. The frame requesting
access has a protocol of 'https', the frame being accessed has a
protocol of 'http'. Protocols must match.
MY QUESTION: Is it Ok to have this error? It doesn't bother me, but will it impact the user experience, stop certain browser activities, etc?
This doesn't effect the functionality of page. You are seeing this error because your main page is from https:// and iframe you are loading in that page is from http://, That is the only reason. Try using relative protocol e.g.; <iframe src="//example.com"/> and try to correct this warning. It is ok to have this error but this error should be solved because this may impact user experience in few circumstances depending your page code approach.
My web page sometimes (rarely) shows "there are some insecure resources" warning icon (yellow lock) like in the screenshot below. However that occurs rarely and now I caught another one I don't want to miss it again so I can't risk losing the page.
The page is at the URL: https://eksisozluk.com/sedat-kapanoglu-ve-40-kisiye-hapis-talep-edilmesi--3960310 . You will probably not see the warning (unless it's Firefox) because I didn't in my consecutive tries on Chrome and I was logged in when I got the error. So let's assume you and I will never see that warning icon on Chrome again.
Devtools was not open when I was using the site, so "Network" tab is empty. That part won't work.
"Resources" shows all JS and CSS entries as https there is no single resource from http there.
The page has jQuery loaded so I tried queries $('*[href^="http:"]') and $('*[src^="http:"]') to no avail. The page contains some external http links (not resources, plain a href's) but that wouldn't trigger the alarm.
I'm using Kaspersky Anti-Virus and it uses a proxy to scan incoming/outgoing traffic. That could be causing some trouble although I haven't had any issues so far with other web sites.
I tried "view page source" and searching it for http resources but only tag with http resource link was:
<meta name="twitter:image" content="http://eksisozluk.com/content/img/ilogo120.png" />
which actually exists in the page when the icon is green too. So that cannot be the reason.
Isn't there a way to directly view the "insecure content" whatever that is in Chrome?
When I view the page in Firefox it says "partially encrypted" but it doesn't show what's not encrypted either. All the items in "Media" tab start with "https://".
Actually now I'm able to reproduce the issue continuously on Firefox. I looked at the network tab and "nothing" shows as http:// yet Firefox tells me "partially encrypted". I'm not sure if Firefox is saying that for the same reason Google does (because Firefox is consistent and insistent about it), but I'm providing both scenarios in case they belong to the same root cause.
I finally wrote this code in Chrome console to find the culprit:
$("*").each(function (index, elem) {
var attrs = elem.attributes;
for(var n = 0; n < attrs.length; n++) {
var attr = attrs[n];
if(attr.nodeValue.indexOf("http://") >= 0) {
console.log("FOUND: <" + elem.nodeName + " " + attr.nodeName + "='" + attr.nodeValue + "'>");
console.log($(elem));
}
}
});
The output shows no interesting stuff. Only <META content> for twitter reference, <A href>s and two <TD title="http://...">s that Mvc-Mini-Profiler inserted. None of them justify the warning of course. Here is the full output: http://pastebin.com/kgV8XHgN
So this looks really interesting. There is NOT a single element in DOM that contains an "HTTP" link yet Chrome warns about "insecure" content. I'm very troubled by it.
There are NO iframes on the page. ($("iframe") returns [])
EDIT: DAMN I lost the page :( (navigated to a link and back button turned to SSL icon to green). I knew it wouldn't last long. But I still appreciate any help since it wasn't the first time I saw that issue.
Just had this problem – if you check the Javascript Console in Chrome it will now tell you where the problem lies.
I had the same issue yesterday, and found http://www.whynopadlock.com/
It shows which elements are not secure, and it also verifies certificate chains.
Btw, if your site can be loaded both http and https, then omit http: from external urls.
Not:
src="http://external.dom/external.js" or "https://external.dom/external.js"
Just:
src="//external.dom/external.js"
Then the browser will use http or https depending on what the page is loaded as
I just spent an hour with a similar problem, I got the green ssl lock in Chrome and IE but not in Firefox (only after page reload).
First of all: To debug SSL issues, the httpfox plugin seems to be better than firebug's network tab. Firebug showed all sources as https, but looking at httpfox, I quickly found the culprit: Google Analytics was loading the ___utm.gif tracking pixel via http. This tracking pixel came from the previous page, where I was tracking a Google Analytics event which was attached to a button click.
This seems to be a bug in Firefox: When tracking a GA event from a http page to a https page (e.g. Proceed button click), FF will load the tracking pixel via http on the https page, causing the error.
I removed the event from the button and FF stopped complaining about the partially encrypted connection.
It sounds most likely that an AJAX resource was used with an http:// URL... you would most likely need the network panel or console to check that.
Firefox's built-in developer tools have them.
A quick solution is to add target="_blank" in each <a> element. It will open the link in new window. Working on all browsers.