Search code examples
ssliframehttpsgoogle-custom-searchmixed-content

How to Avoid a Mixed-Content Error When Displaying a Search Result?


Question:
How can I include both https: and http: results from a single domain in a Google custom search engine but display any such result in an iframe with a secure parent window?


How It's Structured:
My Google custom search engine currently searches "mydomainname.com/directory/" with the option to "Include all pages whose address contains this URL". It operates on a specific page of the website to search pages within the specified directory. The Link Target set in Websearch Settings is an iframe on the same page as the search bar.

The browser window and the iframe src are both on the same secure domain. And since the search results are all from a directory within the site structure, are all on this same domain as well.

Currently some results appear as "https://..." and some appear "www...". Obviously, this creates a mixed-content error when the browser window is https:// and an attempt is made to display a http:// search result in the iframe.

The results that are http:// will, of course, also work as https:// urls. I do not know what makes a page or file appear in the search results as "www." or "https://" when they all originate from a single secure domain.

The "http://" results appear even if I specify the site to be searched as https://www.mydomainname.com/directory/. I don't want to exclude these results, but I want them to be able to be displayed when browsing the site securely.


The Objective:
So the bottom-line rule that I need to work around is that insecure pages or files cannot be loaded into an iframe on a secure web page. I obviously want users to be able to utilize the https:// site but then I need the search to function in such a way that allows for all possible search results for these users.

The reason I need the results' target to be this iframe is that this is the frame that displays all the content of the web page. The search results work in harmony with the organization of other information. Such that choosing a link from a category in the page's navigation and choosing a search result from the custom search result display the chosen content into the same location, the iframe.


What I've Tried:
I've tried designating https:// specifically in the Google Search Engine (gse) settings and removing : 'http' from the script line gcse.src =(document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;.

I looked in the script file that it's linking to: http://cse.google.com/cse.js?cx=012685392925564329750:ghl2znnfada but I can't decipher what might need to be changed in it.

In the error log on the console I don't see much to be relevant except for the expected inability to load insecure pages while browsing securely. But there is this that looks like (maybe) it's relevant? though I could be completely wrong because I can't really decipher it either:

    Mixed Content: The page at
    'https://mydomainname.com/directory/index.php' was loaded over HTTPS, 
    but requested an insecure script 'http://www.google.com/jsapi?
    key=ABQIAAAAdCtw6Xq1Q31YAr7VSQOSvxS5g7WKqCWUBuUdhz3-
    rUOumR2saRSPGvey2WjYALW7f5_JzakSL3lAEg'. This request has been blocked; 
    the content must be served over HTTPS.

Insecure Script from Error Message:
http://www.google.com/jsapi?key=ABQIAAAAdCtw6Xq1Q31YAr7VSQOSvxS5g7WKqCWUBuUdhz3-rUOumR2saRSPGvey2WjYALW7f5_JzakSL3lAEg


Proposed Paths to a Solution:
I am open to any solution methods that may be possible. I have considered several routes but am not sure how to properly execute them or have failed in my attempts to execute them.

Some solutions I thought may work are:

  • Show all results as https:// links (without excluding any) so that they can be accessed whether on a secure connection to the site or not.

  • Redirect any links clicked without https:// to be loaded into the iframe as https://

  • Change something about the pages and files on the server so that they only appear in the search results as https://

  • Change something about Google's search engine script so it parses all found results as https://

  • Somehow show links as http:// if browsing non-secure, and https:// if browsing secure *

*I don't know how viable or efficient this would be


Solution

  • The most robust solution is to migrate all your website in https :

    • use 301 (permanent) redirect from http to https
    • and activate HSTS (if possible with includeSubdomains)

    Google will take a little time to update his index but the HSTS will automatically replace http by https so you should avoid any mixed content issues.