I just created a SPA using github pages.
It is pretty clear, as contains one .html with two .js files
I mostly use d3.js
I have no problem launching on local host, but have problems, when I deployed it on github pages
I have two errors:
Can't find variable: $
and
Failed to load resource: the server responded with a status of 404
(HTTP/2.0 404)
Although in my index.html contains jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
https://zkid18.github.io/data_visualization_project/
https://github.com/zkid18/data_visualization_project
What's wrong?
If you open up the dev tool console on that link you've shared, here's the error:
Mixed Content: The page at 'https://zkid18.github.io/data_visualization_project/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'.
This request has been blocked; the content must be served over HTTPS.
So in this case, the solution is to just load your external resources over HTTPS, because this is what GitHub is hosted on. For example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
If a page is loaded over HTTPS then every resource it uses should also be loaded over HTTPS.
Reason behind this is, that otherwise a man-in-the-middle could replace resources (or ones that exploit buffer overflow issues in browsers to execute code) and scripts with ones that do different things (such as leak data to the third party).
You can read more about this in this article on the Mozilla site.
Related
I just wanted to make a simple website with Node.js, but I can't manage to get the CDN of CSS and JS files from Bootstrap without being blocked by Content Security Policy.
Here's what happens:
CASE 1 (works): When I just move my HTML file in the browser (so C://... .html) it works and gets all CDN's
CASE 2 (doesn't work): When I start my server (using express) in Node.js and then go to localhost:4000, it doesn't get the CDN's due to Content Security Policy (I can see it in console as it says it's being blocked by it)
I tried to put in the meta tag with the CDN's in it from here: Content Security Policy: The page's settings blocked the loading of a resource, but it didn't work and I even got more errors.
How do I fix this? I can't find any solution.
CASE 1 (works): When I just move my HTML file in the browser (so C://... .html) it works and gets all cdn's
When you web page works from C://... .html it's no Content Security Policy (CSP) published therefore nothing is blocked.
CASE 2 (doesn't work): When I start my server (using express) in Node.js and then go to localhost:4000 it doesn't get the CDN's due to Content Security Policy (I can see it in console as it says its being blocked by it)
When you web page works from localhost:4000 the server publishes a default CSP. NodeJS has in dependencies a Helmet middleware which publishes this default CSP header.
You can disable a middleware:
// This disables the `contentSecurityPolicy` middleware but keeps the rest.
app.use(
helmet({
contentSecurityPolicy: false,
})
);
or configure it to allow external CDNs, see details in helmet.contentSecurityPolicy(options) section.
Note: next time please add console messages into a question, they can be very helpful in case of CSP.
Content Security Policy works the other way around. The CDN needs to give access to your url to use their resource, not the other way around. They will have to add a header with access-control-allow-origin and then set the value of * which means anyone can use their resource files or specifically your domain url.
So most likely you have a typo in your url and that domain doesn't allow localhost to fetch their js files.
i have an app deployed to heroku and i request the jquery to be loaded
<script src="//www.highcharts.com/lib/jquery-1.7.2.js" type="text/javascript"></script>
in order to use highcharts. But when running my app on http the charts are not loaded,whereas when running the app on http the charts are loaded.
the message when running on https is:
"but requested an insecure script 'http://www.highcharts.com/lib/jquery-1.7.2.js'. This request has been blocked; the content must be served over HTTPS."
how can i safely load jquery?
www.highcharts.com doesn't seem to support HTTPS, so you'll need to load jQuery from somewhere else.
Try one of the options here: http://code.jquery.com/. Or you could download the copy of jQuery you're using and just include it in your app.
EDIT
Further explanation: when you load https://www.highcharts.com/lib/jquery-1.7.2.js (you can try it in the browser), you get redirected to http://www.highcharts.com/lib/jquery-1.7.2.js. So the browser is ultimately loading the script from an HTTP source. You need to load from an HTTPS source.
I am facing problems with loading my custom CSS in Chrome. I'm using Joomla Artforms.
Here are few Javascript console statements from chrome:
[blocked] The page at 'https://www.mysite.com/component/artforms/?formid=200' was loaded over HTTPS, but ran insecure content from 'http:// www.mysite.com/includes/js/jscalendar-1.0/calendar_stripped.js': this content should also be loaded over HTTPS.
[blocked] The page at 'https:// www.mysite.com/component/artforms/?formid=200' was loaded over HTTPS, but ran insecure content from 'http: //www.mysite.com/modules/mod_followme/style.css': this content should also be loaded over HTTPS.
Please let me know if you need more detail.
Thanks
Simplest way to get this right is to load external files using the URL syntax
//example.com/path/to/some/file.js (remote)
or
/path/to/some/file.js (local)
This will load your resource using the same protocol (HTTP or HTTPS) as your main HTML page.
Note though that this will only work if your external resource is available over HTTPS. If it isn't then there's nothing you can do except move the external resource somewhere that does support HTTPS.
I have a website at example.com and I am serving all external resources from cdn.example.com. So in my HTML page at example.com I have something like:
<script type="text/javascript" src="http://cdn.example.com/script.js"></script>
In my script I want to create a Web Worker, so I do:
worker = new Worker("http://cdn.example.com/script.js");
But this fails on Firefox 16 with Failed to load script: http://cdn.example.com/script.js (nsresult = 0x805303f4) error. It works on Safari 6 and Chrome 22.
It seems the problem is because origins differ. Effective origin of the script is example.com and cdn.example.com does not match that. This seems a bug because not CORS not setting document.domain helps (or at least I couldn't make it to work by playing with that). Is there any way to make it work?
At the end I made website at example.com serve a simple JavaScript code which includes the real web worked code:
importScripts('http://cdn.example.com/script.js');
and then create web worker by pointing to that.
I have a web page that loads in an IFRAME, that runs correctly in IE and Firefox but not in Opera. Which I hate, because I've been an Opera user for years. And I wrote this thing. :-)
The problem is that Opera is not loading some of the JavaScript files that comprise the page. I suspect that it is related to the fact that the page itself is loaded via HTTPS and the included files via HTTP from a different host and port. I believe Opera allows that, but Dragonfly's Net tab doesn't even show an attempt to load them.
The page is a Rally "custom app", and I can't control the fact that it is loaded in an IFRAME or that it loads via HTTPS. I also can't control the fact that the included files are loaded from a different host, or that the host only supports HTTP. So I'm sorta stuck with mixed content.
Among other stuff, the page's HEAD element contains (sanitized a bit):
<script src="http://www.example.com:81/common/jquery-1.4.2.js"></script>
<script src="http://www.example.com:81/common/jsTree/jquery.jstree.js"></script>
<script src="http://www.example.com:81/common/utils_jserror.js"></script>
<script src="http://www.example.com:81/common/utils_logging.js"></script>
<script src="http://www.example.com:81/common/utils_print_r.js"></script>
<script src="http://www.example.com:81/common/utils_rally_query.js"></script>
<script src="http://www.example.com:81/common/json2.js"></script>
<script src="/slm/js/slm.js"></script>
<script src="/slm/js-lib/dojo/rally-1.3.1/dojo/dojo.js.uncompressed.js"></script>
<script src="/slm/mashup/1.18/js/batch-toolkit.js"></script>
<script src="/slm/mashup/1.18/js/utilities.js"></script>
ALL of the "/slm/..." stuff is getting loaded, and NONE of the "www.example..." stuff is.
Anybody got an idea what I'm doing wrong?
Opera has a feature called cross-network protection. Basically it places some extra limitations on what pages from the internet can do with stuff on your local network.
The reason this feature exists, is the emergence of the so called "phish farm" exploits, where it was discovered that the HTTP-based config screens of some popular home routers / modems were so poorly secured that malicious web pages could rewrite your router settings - for example to configure it to use a proxy and pipe all your traffic through a malicious server. To counter this, Opera knows that some IP addresses are not used on the public web (such as 127.0.0.1 or 192.168.*) and it doesn't allow pages from a "public" site to load files or send requests to a "local" site.
You can reconfigure this on a per-site basis. The easiest thing is probably adding an IFRAME on the "public" site loading one of the resources from the local server. The IFRAME will show a "cross-domain request" warning page with some opt-in links. Click the link for always allowing local requests from that server, and voila - your cross-network app should now work again.
(Adding an IFRAME is as easy as viewing source, adding <iframe src="http://local/whatever/included/file.js"></iframe>, saving, and "Tools > Advanced > Reload from cache" )