I am learning OpenLayers 3 and I ran into a problem while trying to pull in basemaps to the browser using a JS Bin online editor.
If I write the exact same code in a local text editor (Notepad++) everything works as it should. But not when I am using JS Bin.
Here is the link with the code:
https://jsbin.com/wijoha/edit?html,css,console,output
Can you help me figure out what is wrong with it? I've already spent a couple of hours trying to solve the issue but can't get my head around it...
Looking at the console on the JSBin you have added (the browser window's one, rather than the JSBin one), the CSS is not being loaded as you are attempting to put a HTTP resource into a HTTPS page. The error message reads:
Mixed Content: The page at 'https://null.jsbin.com/runner' was loaded over HTTPS, but requested an insecure stylesheet 'http://openlayers.org/en/v3.10.1/css/ol.css'. This request has been blocked; the content must be served over HTTPS.
Additionally, your JS file ol.js is not loading at all, as openlayers.org does not seem to be accepting serving the file over HTTPS (for me at least, in Chrome).
Instead, try serving everything over HTTP (including the URL of JSBin itself), here is a working example:
http://jsbin.com/focoxoxabo/edit?html,css,console,output
Related
Here are the links to the page in question:
http version
https version
The https version of the page doesn't render the video embedded on the top of the article. I inspected the source code and found that HTTPs is missing an entire block of code, as you can see in the images below:
I wonder how this happens? Isn't http(s) just the protocol to communicate with the server? Why do I get different code by using different protocols?
From Chrome Developer Toolkit:
The page at 'https://www.eyeviewdigital.com/blog/eyeview-launches-addressable-tv-ads-with-cablevision-dish-programmatic-tv-w-clypd-and-wideorbit/' was loaded over HTTPS, but requested an insecure script 'http://pshared.5min.com/Scripts/PlayerSeed.js?sid=281&width=480&height=401&playList=519141523'. This request has been blocked; the content must be served over HTTPS.
You typically need to load your content in either http or https. Mixing them together results in the error above.
On line 252 replace
http://pshared.5min.com/Scripts/PlayerSeed.js?sid=281&width=480&height=401&playList=519141523
with
https://delivery.vidible.tv/aol?sid=281&width=480&height=401&playList=519141523.js
Long story short the content was never loaded so the page looked different.
You're right that there should be no difference based on http/https as it is just the transport layer. There must be something in the server's code that is producing the html, that behaves differently based on the url used to make the request. I suggest you provide information on the web server code to help analyse the issue.
This is most likely caused because you're loading elements from insecure sources. Google Chrome for example, loading an image over http when your page is loaded over https can result in the image not loading at all. This is all for security purposes, of course. Just go through all of your code and make sure all sources are accessed through secure https so that they load in properly.
I often my test javascript snippet code using Chrome developer tools and I came up with debugging of inputing URL search bar: data:text/html, and running code chrome snippets.
This way works in Vue.js's CDN though some strange error message occurs.But,jQuery via CDN doesn't load like photo.
I want to know reason why these happens.Any tips would greatly help.
So,please give me advise if something occurs to you however it is little.
Edit:
I added photo load jquery snippets and it works in Google Home.
My html environment is reproducible only inputting your chrome browser's url_bar,data:text/html, <html contenteditable> which makes your browser html-editor and it can run javascript using script tag.
It is because your code is loading jQuery without a protocal ( http://, https:// ). The code you have loads the resource based on what your page uses for maximum security. Your page doesn't have use http:// or https:// unless it is online.
Change it to http:// and it will load, but if you're using SSL and your page is loading through https:// when online, then change it back to :// when it's online.
Website I am working on https://www.recordretrieve.com is displaying following error in Chrome:
“Your connection to www.recordretrieve.com is encrypted with 128 bit encryption.
However this page includes other resources which are not secure.
These resources can be viewed by others while in transit,
and can be modified by an attacker to change the look of this page”
This is a WordPress website and when I "View Sources" I can see that all images I uploaded to WordPress are http, and I saw 2 external javascript files (generated by plugin I used) are also http.
Question is, would this error caused by the image I uploaded to WordPress? If so, how do I fix this issue?
Or would this error cause by the links to js files?
Or caused by both of them?
I use WordPress HTTPS on my blog to force HTTPS on everything.
Additionally, you can also set the WordPress Address (URL) and Site Address (URL) in the General Settings Screen to have the https by default.
When you're writing your posts, you need to check if by default you're inserting the http instead of the https
If all this still causes an issue, you should check your theme and plugins to ensure that they are not forcing the http
I ended up installing this plugin to solve the issue: http://wordpress.org/plugins/ssl-insecure-content-fixer/
Try this nice JavaScript: http://www.patrick-wied.at/static/nudejs/demo/
Warning: slightly NSFW.
It won't work when i open it from my local machine. Either by copying the 3 exact source codes and making the picture locations absolute (or else by downloading https://github.com/pa7/nude.js/archive/master.zip).
I am lost why? it must be a silly/simple reason since the demo page is obviously working and JavaScript only, so why would it make a difference where you store it?
I think this is because of the browser security restrictions. are you opening the html file from the file system, instead of serving it from localhost? or are you referencing resources from another domain that does not have CORS enabled? Debugging with the console should help.
I have just moved my site from http to https and IE-9 started showing non-secure content warning at home page. This warning is understandable because i have one http call to googleapi for getting jquery script. But when I login and enter the inner pages there is no warning from IE despite the fact that most of the images are coming from other servers through http protocol.
So the question: Is getting image over http is fine when accessing site over https? Does only css and js matters? or shall I have to get all the data through HTTPS? If so how is my scenario justifiable (getting images over http from other server on https page without warning)?
If you load CSS and JS over HTTP then an attacker can inject executable code. Unfortunately IE will execute JavaScript within CSS. The problem with loading images over HTTP from the same domain is that the browser will likely spill the session id in plain text which is a violation OWASP a9.
You can use the protocol-relative URL on all your urls to avoid this issue in IE.
Basicaly, instead of linking to a js/image/css by using its full path with the protocol, you instead link to it by leaving out the protocol bit and just using a double slash, //.
This will have the effect of all the above links inheriting the protocol from the parent page.
Of course this depends on you having valid SSL certs on the domains you're serving the different files form.
One other thing to note also is that images in your pages or CSS that are done using data URI could also cause mixed content warnings in IE.
To find out what files are causing issues, I recommend using Fiddler
There is also another tool that a fellow SO user, Eric Law wrote:
Install it from http://www.bayden.com/dl/scriptfreesetup.exe and you will get a different mixed content prompt which shows the exact URL of the first insecure resource on the page. That tool is basically a prototype and you should uninstall it when you're done with it. It works on IE8 and you should install it as admin.