I keep getting the following error on the debug console on chrome
[blocked] The page at https://myURL/canvas ran insecure content from http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css.
[blocked] The page at https://URL/canvas ran insecure content from http://connect.facebook.net/en_US/all.js.
[blocked] The page at https://URL/canvas ran insecure content from http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js.
these are the js scripts attached to the head
THis is a facebook app that makes GET request to my own server , This was working and Just stopped working without any change in my code ! I am not sure if Facebook is blocking my requests.
These errors happen when loading scripts and other external resources (such as images) on other domains via HTTP when the main page (which is your Facebook app, in your case) is loaded via HTTPS.
Look in the code of your app, use protocol relative URLs when calling external scripts. For example, instead of this:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
Do this:
<script src="//connect.facebook.net/en_US/all.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
Edit: Note that if protocol relative URLs are used on stylesheets, IE7 and IE8 will download it twice:
http://paulirish.com/2010/the-protocol-relative-url/
Related
I'm trying to host a site on Netlify (or github pages), but for some reason when entering production, the fonts change, as well as some layout issues (See photos)
[
I'm not sure if this issue is due to CSS specificity, or if I need to declare the font-types somewhere; I've already added them to my <head> tag, and my css file has them each imported.
I've created a codepen with the code: https://codepen.io/aladin94/pen/BaowqgX (keep in mind the images and layouts will differ). Any ideas?
The font imports:
<link href="//db.onlinewebfonts.com/c/146c398456e6a22b45102120ae8a7679?family=Narcissus"
rel="stylesheet" type="text/css"/>
<link href="//db.onlinewebfonts.com/c/21400dc679986534519c638136d62dbf?family=Rage+Italic"
rel="stylesheet" type="text/css"/>
I guess, that your production site blocks the insecure font.
See my browser console print:
Mixed Content: The page at '...' was loaded over HTTPS, but requested an insecure font
http://db.onlinewebfonts.com/t/146c398456e6a22b45102120ae8a7679.woff
. This request has been blocked; the content must be served over HTTPS.
You can change the behaviour for the specific font or you have to find a secure font for your case.
Have you tried this link:
<link href="https://db.onlinewebfonts.com/c/146c398456e6a22b45102120ae8a7679?family=Narcissus" rel="stylesheet"
type="text/css" />
EDIT:
As already mentioned in the comment section, you can find the sources in your developer mode of your browser. In my case, I am using chrome.
Try to download your needed files/ sources and afterwards you can try to upload it to your server environment.
I guess, it's not really a programming question/ solution because it's more related to library handling or security setup.
This is my sample site published on GitHub using GitHub pages, using Jekyll. The map you see in the site is supposed to be interactive for all the states, as shown in this fiddle, which shows how the map is supposed to work.
The main Javascript file used here is jquery.imagemapster.js
The HEAD of my code is:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
...
</head>
Or you can simply see my code present in the repository used to publish the site.
Things I've tried:
Putting all the images and the script in a folder named asset, and linking to the resources. That didn't work at all. No image was displayed.
Putting the resources in the root folder. This is what I've done. The images are displayed properly, but the script still isn't working.
To check the linking, I copied the 4k lines of code into a <script> tag pair, inside the head. That didn't work as well.
Eventually, the local building of the site using Jekyll, works perfectly. What am I doing wrong here?
jquery.imagemapster.js is loading fine, the problem is in the way you are loading the libraries:
Mixed Content: The page at 'https://mooncrater31.github.io/infer/#'
was loaded over HTTPS, but requested an insecure script
'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'.
This request has been blocked; the content must be served over HTTPS.
This prevents your site from using JQuery in modern and popular browsers (aka: Chrome) and that is why it runs fine locally, it runs without https.
To solve it just load them with HTTPS:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I've tried to create some vertical scrolling using SimplyScroll on this website, but the images are ending up as a list.
Does somebody know why?
1 - Show us some code. Don't make us go and find it.
2 - Use your F12 console. This works.
You're trying to load jQuery over HTTP. You're loading your site over HTTPS.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
should be
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
Omitting the schema from a src attribute will let the browser load it over the appropriate schema - http or https, depending on how the other content has been loaded. You should do the same for your images and scripts.
Mixed Content: The page at 'https://portal.gbnett.no/filarkiv/testing.html' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.
I have my jquery datetimepicker api files Webcontent/js folder.I am referring to the resources like in the code.
<script type="text/javascript" src="js/jquery.datetimepicker.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.datetimepicker.css"/>
But the browser fails to load those resources and moreover its showing the wrong file type in network tab like this.
jquery.datetimepicker.js GET(canceled) text/html
jquery.datetimepicker.css GET(canceled) text/html
Can someone tell me what went wrong here ? I am using spring mvc.
I'm experiencing an issue with the jQuery CDN.
Given the following script imports:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
I am having the following issues with the CDN paths:
Using http://... when accessing my site over SSL I get
[blocked] The page at https://www.example.com/ ran insecure content from http://code.jquery.com/jquery-1.9.1.js.
Using https://... seems a bit dodgy if not accessing site over SSL
Using //... causes both the imports to fail on GET.
What is the correct way of importing jQuery from CDN with a site that can be accessed both securely and not.
just omit the protocol, then the script will be loaded using the same protocol as the page
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
But if the resource is loaded form the file system(with file:// protocol) then this will not work