0

EDIT: I encountered this issue when I was loading my project as a chrome extension. I think this might be a chrome extension specific issue.

When I try to search on the google customized search engine I get a result page but it is blank. When I inspect it I get the following error:

Refused to load the script 'http://clients1.google.com/complete/search?client=partner&hl=en&sugexp=gsno…208%3Avdsj6wr1edq&types=t&ds=cse&cp=1&gs_id=4&q=m&callback=google.sbox.p50' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://*.google.com".

I think this is because the script is using 'http'. Base on Google's Content Security Policy 'http' origins are not accepted

As man-in-the-middle attacks are both trivial and undetectable over HTTP, those origins will not be accepted. - https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing

my html:

<html>
    <head>
        <script src="fact.js"></script>
    </head>
    <body>
        <div id="gcse-search-bar">
            <gcse:search defaultToImageSearch="true"></gcse:search>
        </div>  
    </body>
</html>

my js file. In my case it is call fact.js

document.addEventListener('DOMContentLoaded', function() {
    (function() {
    var cx = '016674471602576918208:vdsj6wr1edq';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
});

My manifest.json:

{
  "manifest_version": 2,

  "name": "my extension",
  "content_security_policy": "script-src 'self' 'unsafe-eval' https://*.google.com; object-src 'self'",
  "description": "my extension",
  "version": "1.0",

  "browser_action": {
    "default_icon": "my.png",
    "default_popup": "my.html"
  },
  "permissions": [
    "activeTab",
    "http://*/*", 
    "https://*/*", 
    "https://En.wikipedia.org/*",
    "http://*.google.com/"
  ],
  "content_scripts": [{
       "js": ["fact.js"],
       "matches": ["http://*/*", "https://*/*"]
  }]
}

What do I need to do to have return results use HTTPS instead of HTTP?

OLIVER.KOO
  • 5,654
  • 3
  • 30
  • 62
  • Please [edit] the question to be on-topic: include a [mcve] that duplicates the problem. For Chrome extensions or Firefox WebExtensions this almost always means including your *manifest.json* and some of the background, content, and/or popup scripts/HTML. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it *in the question itself*. Please also see: [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [ask]. – Makyen Jun 14 '17 at 03:22
  • Thank you for your advise Makyen. I will keep this in mind when I ask Chrome extensions or Firefox WebExtensions related debugging questions in the future. I edited my post to include codes that are necessary to duplicate my problem. And I already stated my desired behavior and the error in the original post. – OLIVER.KOO Jun 14 '17 at 05:52
  • Thanks for adding code. It would be helpful for you to provide a bit more of your *manifest.json*. While we can guess that the HTML you have provided is, probably, for a popup, or at least very likely for a page in the background context, exactly how things are being loaded is some of the information which is contained in the *manifest.json*. How things are organized, and what context/scope they are loaded in is quite important in determining what is going on in Chrome/Firefox extension. It's some of the key information we usually need. – Makyen Jun 14 '17 at 06:24
  • Thank you for the tip! I updated the post again to include more of my manifest.json. – OLIVER.KOO Jun 14 '17 at 15:17

1 Answers1

0

I am still researching/reading GCSE related documentation in hope to find a way to solve my problem. However, in the mean time, I want to offer an alternative way to submit requests to Google custom search.

The basic idea is using Google Custome Search Engine with Google Custom Search API. Below are the steps/details (if you encountered the same problem I posted in my question you should already created a custom search engine and obtained a engine id as cx, but I will include directions of how to create one just in case. Skip to step 5 if you already have done so)

  1. Defining a Custom Search Engine by getting an account
  2. Click "Setup" under "Edit Search Engine"
  3. Turn on "Image search" if you desire to have your search engine do image search

  4. Click "Get code" You should see your personal engine ID cx like this

    var cx = 'MY_ENGINE_ID';

  5. Once you obtain your engine ID. Create Google Custom Search API (you You get a $300.00 in credit and 365 days for free trial)

  6. Go through the registration steps. Once completed you will be on at your HOME screen

  7. Under the APIs card click on "Go to APIs Overview".
  8. Then click "Enable API"
  9. Find "Custom Search API" then enable it
  10. Now if you click on "Credentials" under "API Manager you should see a API key
  11. I would recommend you restrict your key to prevent unauthorized use and quota theft, restrict your key.

Now with your Custom Engine ID and your Custom Search API key you can submit request GET request to Google using parameters specified on this page

Here is an example

  var searchUrl = 'https://www.googleapis.com/customsearch/v1?' + 
   'key=YOUR_API_KEY' + 
   '&cx=YOUR_SEARCH_ENGINE_ID' +
   '&q=searchTerm' +
   '&searchType=image' +
   '&num=10';

  var x = new XMLHttpRequest();
  x.open('GET', searchUrl);
  x.responseType = 'json';
  [...]

Note: it might be a good idea to wrap searchTerm with encodeURIComponent if serachTerm is pass into the function.

I came across this idea from a different problem that was asked on stackoverflow. But I wasn't able to find it again. If someone does please post the link as a comment.

OLIVER.KOO
  • 5,654
  • 3
  • 30
  • 62