I work on a site that pulls images from multiple CDNs and I want to log which image came from which CDN. These CDNs send an extra header param with the images that names the server that sent the image.
Problems:
- Ajax won't work because of the CORS disabled
- Can't use a proxy or put a proxy file on the CDNs because they only serve images
Any tips how to make this work with JS only?
Or maybe with Flash?
Is there a way to "observe" the network with Javascript (like Firebug or Chrome dev tools) ?
I don't know the exact solution for your problem but if I were you I would look at websockets.
There are a lot of questions about it there: https://stackoverflow.com/search?q=websocket+image+javascript
And I think you should look at this too: http://binaryjs.com/
Related
I recently switched my http site to https.
Since I made this change, one of my projects no longer works.
In this random generator, the background using the Three.js library does not appear when the url is in https
But in http , it works beautiful and well.
Does anyone know any solution to this problem?
Thank you for your consideration in this matter.
You can download the three.min.js file and save it on to your https server.
And instead of loading the script from http server, provide the path of your https server where you put the three.min.js file.
<script src="https://[path to your server]/js/three.min.js"></script>
Open your developer tools and look at the console, you'll find the explanation:
What this means is that you're not allowed to have an https:// site that loads some content via http://. This is called "mixed content" and it's a security vulnerability. If you're serving a secure site, make sure all your content is using the HTTPS protocol.
I am aiming to create a visual novel, "click" progression game. I am aiming to achieve that using purely HTML, CSS and JS. The game is supposed to run only on the client side from index.html in the browser.
My question is, I am hitting up some trouble with those cross origin requests and I'm trying to figure out a solution from 2 weeks now, and i have no idea how to make this happen. Error "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."
What i want to achieve is very simple. Instead of using something like twine engine, i would like to write native, because it will be more productive and faster for me.
Options i tried so far:
JQuery Load - requires server
Wrote a pure XML Ajax load - CORS error. (so... server)
I started to write html into js files and load them instead, then use document.write or innerHTML to replace, but that can only get me so far and its hard to extend after 5 files.
What can i do to get this running? I know C#, but before i move to .exe is there anyway i can get this done? Will react.js work client side only and load components without CORS error? Never tried the framework, because in the tutorials i see they use a webserver.
Any ideas? Thanks beforehand!
Will react.js work client side only and load components without CORS error?
No, because it will still be another thing that runs in the browser and is subject to the limitations imposed by the browser.
You need a server, a browser which doesn't impose those limitations, (something that sort of combines the two like Electron), to use a dirty hack like JSONP to load the files, or to wrap up all the files so they are embedded in the JS you load initially.
I have a locally-stored project whose directory structure is the following (I minimized non-relevant folders):
What I want to do is that in an HTML file, like index.html, to add a <header> such that its contents would be loaded from an external HTML file, so all of what I'll have to write in index.html would be <header>, and my solution would load the content automatically.
To do this, I'd like to use JavaScript (preferably jQuery, but I'll accept other solutions if they work and jQuery doesn't, or if they work and executed faster than jQuery).
I don't think that I should use an <iframe> due to the fact that it'd probably increase loading times more than using jQuery/JavaScript (which, like I said, is what works now, when the website is live).
Right now, I'm using the jQuery .load() function. I don't know much about jQuery, but I've been told that it should work locally - and it doesn't, for me.
My browser's console shows me the problem:
jquery-3.1.1.min.js:4 XMLHttpRequest cannot load file:///C:/Users/GalGr/Desktop/eiomw/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
And I'm trying to overcome it.
This code works on my live website - it might not be updated to the code of the files that I linked to below, but it doesn't matter - their code matters.
This is the index.html file:
index.html
This is the header.html file:
header.html
This is `main_script.js:
main_script
The reason you're having a problem with this locally is mainly down to security measures in your browser.
Essentially whenever you're using jQuery's load() function it makes a separate HTTP request (approach known as AJAX) for the file or URL you give it.
Modern browsers enforce that the URL you request using AJAX methods is from the same origin (server) as a security feature to stop pages randomly loading content from anywhere on the internet in the background. In your case it seems like this shouldn't affect you because you're browsing your pages locally and the request you're making using load() is also for a local file (header.html).
However, I am assuming you're just opening up the page directly in your browser, so your browser's URL will look something like 'file:///C:/Users...' (similar example in the error message you gave). This means your browser is directly reading the file from disk and interpreting it as HTML to display the page. It seems likely you don't actually have a local HTTP server hosting the page, otherwise the URL would start with 'http://'. It is for this reason that the browser is giving the security error, even though your AJAX request for header.html is technically from the same source as the page it is executed on.
Your server will have an HTTP server which it's using to host the pages, and so everything works fine as you're then using HTTP as normal, and this security feature does not get in your way.
I would suggest that you simply install an HTTP server locally on your dev machine. You don't even need to 'install' one per-se, there are loads of development HTTP servers that just run standalone, so you start them up when you want to browse your local HTML files. As you appear to be on Windows, I'd check out either IIS (Windows' HTTP server) or IIS Express (like IIS but runs standalone). There are also many others available like Apache, Nginx, etc. etc.
If you do this, you can host your pages on something like 'http://localhost/index.html'. Then, any AJAX requests you make for local files will work fine, just like your server.
Hope that makes sense, and I'm not telling you something you already know?
Why not using something more straight foreword like mustache.js ?
I found a solution:
Using phpStorm's built-in localhost, I was able to emulate a server that handles my requests and responses.
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/
We are using a custom protocol handler to connect to an embedded device across firewalls, NAT etc. The solution is called Nabto.
This works great - a plug-in on the user's computer handles requests to all nabto:// URIs and serves HTML pages with information about the current connections etc.
Now, we would like to access Nabto functionality from a regular web page. This is difficult with browsers enforcing the Same-Origin policy (e.g. our http page cannot communicate with the nabto page).
So far, I am trying to solve this using easyXDM by having a "proxy page" served by the nabto plug-in. This page is then allowed to launch nabto:// requests and can communicate the results back to the http page using easyXDM.
However, same-origin requests fail in Internet Explorer - even when both pages reside in the nabto://self domain. I get this error: image
Is this an error in Internet Explorer? Any idea how to solve it?
Thanks a lot,
Martin
We had huge issues that sound similar to yours when developing the plugin. I must admit that we gave up getting clean Ajax support working through Nabto after spending a lot of time on it. In fact, the final thing that happened was opening a support case with Microsoft about it, the case bounced around and we never heard anything back.
There might be a chance though for a hack: In the meantime we realized that IE allows you to populate images through nabto:// urls on an http / https page. Maybe you can populate an image object through your query and extract the result from there?
On a side note: You are welcome to post in the support forums (forum.nabto.com) about such things. On the other hand, you help spread the word about the product in this way ;-)
Ulrik