I'm trying to embed an Amazon "Recommended Product" widget into a website. We use SSL across all pages on the site.
Unfortunately, the Amazon widget by default is embedded using a simple IFrame and although the source for the IFrame can be https://, the images and links within the IFrame are always http://
IFrame sample code
<iframe src="https://rcm-uk.amazon.co.uk/e/cm?t=june2k&o=2&p=16&l=st1&mode=books-uk&search=potter&f=ifr&f=ifr"
width="468"
height="336"
border="0"
frameborder="0"
style="border:none"
marginwidth="0"
marginheight="0"
scrolling="no"></iframe>
Needless to say this results in "insecure content" warnings, broken padlocks, etc.
So far the only solution I've been able to come up with is to get the contents of the IFrame using the server, parse it and re-write all the image links to point at a local handler which in turn proxies the images. It seems like a fragile approach with a lot of processing overhead. It's just nasty.
Does anyone have any experience with this? Is there a method here that I'm missing? Can I get Amazon to return valid https:// urls?
If I change the image urls from http to https in-situ, I get a certificate mis-match error - it seems the images are served from the Akamai CDN and the common name for the certificate isn't the hostname used to serve the images.
I'm finding it hard to believe that an e-commerce company as large as Amazon is incapable of serving a secure page.
Any help greatly appreciated.
After a lot of digging, I found a version of the widget on the Amazon site which ran in SSL mode without errors.
After looking at the IFrame src, the URL has an additional parameter internal=1. I haven't seen this documented anywhere but it seems to tell the widget to serve the images from Amazon's network instead of Akamai's, and SSL is supported.
The url should look like this:
https://rcm-uk.amazon.co.uk/e/cm?t=june2k&o=2&p=16&l=st1&mode=books-uk&search=potter&f=ifr&f=ifr&internal=1
Related
URL in question: https://newyorkliquorgiftshop.com/admin/
When you open the above page, you can see in the console that there are lots of error messages saying "...was loaded over HTTPS, but requested an insecure stylesheet.."
This website was working well until all of a sudden this problem shows up. I am not very familiar with https, but I have contacted with Godaddy and the SSL certificate is valid, and there is no obvious problem with "https://newyorkliquorgiftshop.com". And I am stuck here, I've some experiences with HTTPS website before, if the URL of website's homepage is "https", then every resources it loads is via "https" too. I don't know why my website behave differently and I don't know where to start to solve the problem? Any hint is appreciated especially articles about HTTPS that is related to my problem.(I have done a brief research regarding HTTPS but most of the articles I found are about the basic concepts.)
If you have access to the code (not sure what you built the website using), try using https instead of http for the URL's you use to load your style sheets and script files.
For example one of the errors is
Mixed Content: The page at 'https://newyorkliquorgiftshop.com/admin/' was loaded over HTTPS, but requested an insecure script 'http://www.newyorkliquorgiftshop.com/admin/view/javascript/common.js'. This request has been blocked; the content must be served over HTTPS.
You are requesting the .js file using HTTP, try using HTTPS like so:
https://www.newyorkliquorgiftshop.com/admin/view/javascript/common.js
I am using React and React Router in my single page web application. Since I'm doing client side rendering, I'd like to serve all of my static files (HTML, CSS, JS) with a CDN. I'm using Amazon S3 to host the files and Amazon CloudFront as the CDN.
When the user requests /css/styles.css, the file exists so S3 serves it.
When the user requests /foo/bar, this is a dynamic URL so S3 adds a hashbang: /#!/foo/bar. This will serve index.html. On my client side I remove the hashbang so my URLs are pretty.
This all works great for 100% of my users.
All static files are served through a CDN
A dynamic URL will be routed to /#!/{...} which serves index.html (my single page application)
My client side removes the hashbang so the URLs are pretty again
The problem
The problem is that Google won't crawl my website. Here's why:
Google requests /
They see a bunch of links, e.g. to /foo/bar
Google requests /foo/bar
They get redirected to /#!/foo/bar (302 Found)
They remove the hashbang and request /
Why is the hashbang being removed? My app works great for 100% of my users so why do I need to redesign it in such a way just to get Google to crawl it properly? It's 2016, just follow the hashbang...
</rant>
Am I doing something wrong? Is there a better way to get S3 to serve index.html when it doesn't recognize the path?
Setting up a node server to handle these paths isn't the correct solution because that defeats the entire purpose of having a CDN.
In this thread Michael Jackson, top contributor to React Router, says "Thankfully hashbang is no longer in widespread use." How would you change my set up to not use the hashbang?
You can also check out this trick. You need to setup cloudfront distribution and then alter 404 behaviour in "Error Pages" section of your distribution. That way you can again domain.com/foo/bar links :)
I know this has been a few months old, but for anyone that came across the same problem, you can simply specify "index.html" as the error document in S3. Error document property can be found under bucket Properties => static Website Hosting => Enable website hosting.
Please keep in mind that, taking this approach means you will be responsible for handling Http errors like 404 in your own application along with other http errors.
The Hash bang is not recommended when you want to make SEO friendly website, even if its indexed in Google, the page will display only a little and thin content.
The best way to do your website is by using the latest trend and techniques which is "Progressive web enhancement" search for it on Google and you will find many articles about it.
Mainly you should do a separate link for each page, and when the user clicks on any page he will be redirected to this page using any effect you want or even if it single page website.
In this case, Google will have a unique link for each page and the user will have the fancy effect and the great UX.
EX:
Contact Us
I use the browser Firefox, and sometimes, on certain webpages, the SSL icon says "Some parts of this page are not secure, such as images." What, exactly, counts as an insecure element?
Thanks!
Anything that is delivered over an insecure channel.
What this generally means is that the developer of the web page is combining HTTP-based URLs with HTTPS-based URLs in the same page. The URLs could be for images as well as JavaScript, CSS, or anything else that can be referenced from a web page. As a user, there's not much you can do about this -- it's a warning that there is a possibility that your data could be delivered to other servers in an open, unencrypted manner over the Internet. This is a Bad Thing, but you can't do much except avoid that site, or contact the support or webmaster for the site.
If you're the developer, most of the time you can use a scheme-relative URLs when referencing images or javascript, etc.
i.e. Instead of this:
<img src="http://example.com/dot.png">
use this:
<img src="//example.com/dot.png">
YMMV.
See also: https://url.spec.whatwg.org/
In firefox you can see in Inspect Element=>Network Tab=>Domain Columns.
And also please check in Console tab too.
I hope it will solve your problem.
"Insecure" simply means "not loaded via HTTPS".
This is insecure:
<img class="media-object" src="http://placehold.it/50x50">
This is secure:
<img class="media-object" src="https://placehold.it/50x50">
"Some parts of this page are not secure, such as images."
means not all content are are loading with secure https you can use this online tool to determine which resource is loading with http whynopadlock
This is My Solution
To resolve this issue make sure that the page code does not pull data directly from a non-secure URL.
View the page source html code to check for non-secure items. This can be done in a web browser by doing a right click and selecting 'view source'.
To identify non-secure elements view the source code of the page and search for the text src="http://
This will then highlight elements on your page being loaded from a non-secure URL.
The source code (HTML) needs to be checked for NON SECURE tags. (i.e. http://www.symantec.com/images/seals/Secure...) Ensure the following references are changed to HTTPS or a virtual directory.
Note: The webmaster should always be consulted prior to any adjustments made to a web site.
Thank You and I hope this will Help out
For wordpress users that can't find any 'http:' in the page source check if you have a favicon set. Wordpress will default to their W icon (w-logo-blue.png) and I've had a couple sites continue to serve it from http even after fully converting to ssl.
Dashboard -> Appearance -> Customize -> Site Identity -> add a site icon
FOR IMAGES
First of all, check whether your image file has HTTP instead of HTTPS if so change it to https or rather save those images and put in in the Server.
For instance,
<img src="http://example.com/images/image.jpg">(http image source)
to
<img src="https://example.com/images/image.jpg">(https image source)or into
<img src="//example.com/images/image.jpg">(server image)
Firefox throws an error when you have mixed active content. This is having a combination of HTTP and HTTPs requests; it's a security issue as it leaves room for man in the middle attack- intercepting HTTP content requests with malicious or unwanted requests.
Tip: Check all the following urls in your active content:
< script >
< link >
< iframe >
< XMLHttpRequest >
fetch()
urls in CSS (#font-face,cursor,background.image)
< object >
Navigator.sendBeacon (look for url)
Another tip: make sure to check all files (css gets overlooked)
I have just set up SSL on my site https://helloacm.com and the home page is OK but this URL https://helloacm.com/milestones/ browsing in Chrome shows “The site uses SSL, but Google Chrome has detected insecure content on the page.”
I have googled a lot and almost every article says that I should change all http to https for images, css and links.. but I have viewed the source code and found out there are not references to http://helloacm.com any more.. so I don't get it , why this url still shows error.
Look in the console. For me, it says:
Mixed Content: The page at 'https://helloacm.com/milestones/' was loaded over HTTPS, but contains a form whose 'action' attribute is
'http://www.google.co.uk/'. This form should not submit data to
insecure endpoints.
Mixed Content: The page at 'https://helloacm.com/milestones/' was loaded over HTTPS, but requested an insecure image
'http://uploadbeta.com/_s/upload/2014/09/04/1137292dd6fbe2b75f1373cb0e3c7a1c.jpg.jpg'.
This content should also be served over HTTPS.
Mixed Content: The page at 'https://helloacm.com/milestones/' was loaded over HTTPS, but requested an insecure image
'http://uploadbeta.com/_s/upload/2014/09/26/eb174fb4bab9f8cba5ef25fb0321234f.jpg'.
This content should also be served over HTTPS.
Mixed Content: The page at 'https://helloacm.com/milestones/' was loaded over HTTPS, but contains a form whose 'action' attribute is
'http://www.google.com/'. This form should not submit data to insecure
endpoints.
Simply fix the errors here, and that warning will go away. Also, regarding the second error: why are you requesting a .jpg.jpg? For me that simply reduces the quality. Just change that to a .jpg.
Just wanted to throw in another answer here for those of you who have tried everything and are still getting this error message.
With some hosts, like WP Engine, where you have yourwebsite.com but then another version of your site like yourinstall.wpengine.com (MediaTemple has something like this, and probably lots of other hosts), and especially if you built / developed the site at that temporary URL, and then set things up to forward the install to your actual URL...do a check in your database, because depending on how the forwarding works at the server level, you might see https://yourwebsite.com/my-image.png and be baffled, but in the database the actual image being served is still from the temporary domain.
Had me baffled forever!
You must set the "$config_location_base" as https://yoursite.com directive in your config.
I am getting the security alert: "You are about to be directed to a connection that is not secure. the information you are sending to the current site might be transmitted to a non-secure site. Do you wish to continue?" when I try to login as a customer on my clients oscommerce website. I noticed the link in the status bar goes from a https prefix to a nonsecure http prefix. The site has a SSL certificate, so how do I ensure the entire store portion of the site directs to the secured site?
It is likely that some parts of the page, most often images or scripts, are loaded non-secure. You'll need to go through them in the browser's "view page source" view one by one and eliminate the reason (most often, a configuration setting pointing to http://).
Some external tools like Google Analytics that you may be embedding on your site can be included through https://, some don't. In that case, you may have to remove those tools from your secure site.
If you can't switch all the settings, try using relative paths
<img src="/images/shop/xyz.gif">
but the first thing is to identify the non-secure elements using the source code view of your browser.
An immediate redirection from a https:// page to a http:/ one would not result in a warning as you describe. Can you specify what's up with that?
Use Fiddler and browse your site, in the listing it should become evident what is using HTTP and HTTPS.
Ensure that the following are included over https:
css files
js files
embedded media (images, videos)
If you're confident none of your own stuff is included over http, check things like tracking pixels and other third-party gadgets.
Edit: Now that you've linked your page, I see that your <base> tag is the problem:
<base href="http://balancedecosolutions.com/products//catalog/">
Change to:
<base href="https://balancedecosolutions.com/products//catalog/">
If the suggestion from Pekka doesn't suit your needs you can try using relative links based on the schema (http or https):
e.g.,
I am a 100% valid link!
The only problem with this technique is that it doesn't work with CSS files in all browsers; though it does work within Javascript and inline CSS. (I could be wrong here; anyone want to check?).
e.g., the following :
<link rel="stylesheet" href="/css/mycss.css" />
<!-- mycss.css contents: -->
...
body{
background-image:url(//static.example.com/background.png);
}
...
...might fail.
A simple Find/Replace on your source code could be easy.
It sounds to me like the HTML form you are submitting is hardcoded to post to a non-secure page.