I have a backend service which is supposed to be used on multiple computers/platforms. This backend is written using CppRest SDK.
To control the service I have written a frontend using Typescript/Angular2. The generated .js files are returned by the backend -i.e. they are saved on the drive of the computer running the backend service.
When running the server app on Windows computers, there seems to be no problem. However when I made an OSX build, the main .js file is bringing on syntax errors in the client's browser. It seems to be damaged somehow (almost like chunk of text was missing in the middle of the script).
I thought this could be an encoding issue, but the problem remains the same after resaving the scripts with utf8 encoding, adding utf8 charset to the Content-Type header of the response on the backend side and defining script's charset in the Index.html.
The weird thing is that when I try to use the service from the browser of the computer actually running the backend app, everything is allright.
I can't wrap my head around this. Any thoughts?
Thanks.
Related
I've got several html files (TiddlyWiki Classic instances) which are stored on a USB-stick (and for it to remain removable, I open them through the file:// protocol). I use Ajax (via SharedTiddlersPlugin, but that's not that improtant) to load contents of some of them into others of them and that works nicely.
I've also set up several TWs using localhost (WAMP # Windows 10 and a simple saving server called MicroTiddlyServer, the latest version can be found here). But "including" (via Ajax request) from localhost to file and from file to localhost does't work.
So, the question is which ways of including (loading content of an html using JavaScript) is possible:
from file to localhost? Meaning that I open a TW at localhost and get contents of a file on my USB-stick (looks like a big security issue, so it's more likely that this is forbidden, at least using Ajax, but may be there's some workaround),
from localhost to file? (my guess is it's possible via CORS, but adding Header set Access-Control-Allow-Origin "*" to <Directory ...> of Apache's httpd.conf prevents my server (WAMP pack # Windows 10) from working and putting .htaccess file with the Header set Access-Control-Allow-Origin "*" content into the TW directory causes Internal Server Error \n The server encountered an internal error or misconfiguration and was unable to complete your request.)
from remote server to file? (I guess this shouldn't differ much from 2. aside that I usually can't configure the server as I'm not an admin; but as I'd like to use TW as an RSS aggregator, let me include this here, too; this also would help including from and TWs on my smartphone which can be served from there using a PHP server; including to TWs on the smartphone requires localhost->remote server, though, which seems forbidden, too)
I really need some working examples (not necessarily with TW, just with html files) as I'm kinda lost in all those CORS questions and tutorials (the latter being about http, not file protocol). Actually, any working solution (not necessarily via Ajax) will do if:
my USB-stick remains removable at any time except for saving moment
the server-side part can be done at Android as well (PHP is good, Python should do as well, although I haven't tested it yet) and server config is described clearly (well, this happened to be not clear enough in my case)
including remains async
In fact, there's quite a number of ways described for servers, but working with file:// is somewhat different (there's no server to configure!).
The main goal of this question is to understand whether I have to create a server which will serve TWs on USB-stick once it's inserted or I can achieve all 3 goals in a "mostly client-side" way (opening TWs through file protocol). But also I hope that working examples will be helpful for others since this topic seems somewhat poorly documented.
For evident security reason this behaviour is not allowed.
from file to localhost? Meaning that I open a TW at localhost and get contents of a file on my USB-stick (looks like a big security issue, so it's more likely that this is forbidden, at least using Ajax, but may be there's some workaround),
It is not allowed as you cannot use Access-Control-Allow-Origin in an html meta tag.
from localhost to file?
from remote server to file?
Actually, that's the same, there's a web-server, so it's the same mechanism. And as no server will respond with the Access-Control-Allow-Origin header, you cannot access file:// url.
yes accessing file from a server is surely a security issue, but why accessing a server from a file-served html is an issue?
If you could do that, you could send your entire hard drive anywhere on the web just by double clicking on a file.html in your file explorer...
The only way to access your content is to serve it, sorry.
I am adding a google hangout api to my application, and am trying to keep the JS locally for development purposes.
The XML file is available publicly on a server (as required by google).
The only way I was able to get it to work right now is to point the XML file to my local server using an HTTPS protocol. Otherwise, I get an error in the JS browser console that the insecure JS code is blocked.
This is the snippet that asks for the local JS file:
<script src="//localhost:3000/hangouts.js"></script>
The Hangout documentation and example apps don't reference https in any way and make it seem like it should work out of the box with a local JS file, so hopefully this can serve as another point of reference.
It seems like a pain to have to run the local server with SSL in development mode, so I'm wondering if there is a way around this or a better way to handle it?
Take a look at the hangoutiframer. It's a tool that provides an interface to automatically generate an .xml file that wraps an HTML page, and allows you to host your html where ever you want during developmen.
It seems that this has been asked a number of times, but I would like to make sure there are still no other alternatives.
So what I need to do is:
Generate a .JSON file from .net (easy)
Read the local JSON file with JavaScript and produce an html page with useful graphs etc (using Raphaeljs).
Deliver the outcome (HTML + associated JavaScript) to the client.
I wouldn't mind installing a local Apache to read the JSON file easily but since I cannot ask the client to do this, I am looking for a way to read a local JSON file (on the filesystem, no web server) with JavaScript, so that I eventually provide the client with the HTML, .js and .json and he can see the associated graphs.
I 've been reading that FileReader class is an option but I want to have the flexibility to support these on a number of IE browsers (let say IE7 to IE10).
Any help on how to work round this would be much appreciated.
Web browsers are not able to read files from the file system due to security reasons. If I've understood correctly, you have a .NET application running on the local machine?
If this is the case, you can host a WCF service to serve the JSON from your application. WCF self-hosting is described on this MSDN page. You should be able to make AJAX requests from the browser to a server hosted within you application on localhost.
If you want to support older IE, you need to go into ActiveX Security setting hell. Look into var fso = new ActiveXObject("Scripting.FileSystemObject");
But if you are delivering the content and HTML files to the client, why don't you just add the JSON markup directly into the html document? Seems like the EASY solution.
You can't read file from local disk in browser (security restriction). But once you are going to deliver HTML + js and JSON (in zip?) you can read json like from regular web server. Just use relative links and if JSON will be in same folder where HTML and JS is located. Or you may put your JSON as a part of HTML you deliver to customer.
But if you are going to show a page (HTML and JS) on your site in web, you should better ask client to upload their JSON file, and than download it from server (in AJAX style).
We have a large number of people (10k+) who return to my clients' sites on a regular basis to use a web app we built, improve, and host for them. We have been making fairly frequent backward-incompatible updates to the web app's javascript as our app has improved and evolved. During deployments, the javascript is minified and concatenated into one file, loaded in the browser by require.js, and is uploaded to and hosted on Amazon S3. The file name & url currently doesn't change at all during updates. This last week we deployed a major refactor to the web app and got a few (but not a lot) of reports back that the app stopped working for some people, particularly in firefox. It seemed like a caching issue. We were able to see it initially in a few browsers in testing but it seemed to go away after a refresh or two.
It dawned on me that I really don't know what browser-caching ramifications deploying a new version of a javascript file (with the same name) on S3 will have and whether this situation warrants cache-busting or manipulating S3's headers or anything. Can someone help me get a handle on this? Are there actions I should be taking during deployments to ensure that browsers will immediately get the new version of a javascript file? If not, we run the risk of the javascript and the server API being out of sync and failing, which I think happened here.
Not sure if it matters, but the site's server runs Django and the app and DB are deployed to Heroku. Static files are deployed to S3 using S3Boto via Django's collectstatic command.
This depends a lot on the behaviour of S3 and the headers it sends when requesting files on S3. As you experienced, browsers will show different caching behaviour - so the best option is to use unique filenames.
I would suggest to use cachebuster hashes - in this way you can be sure that the new file always gets requested by browsers and you can use long cache-lifetime headers if you host the files on your own server.
You can for example create a MD5 hash of your minified file and append it (like mycss-322242fadcd23.css). Or you could use the revision number of your source control system. You have to use the cache buster in all links to this file, but you can normally easily do this in your templates where you embed your static resources. Depending on your application, you could probably use this Django plugin that should do this work for you.
I've got a Django app serving a webpage with an HTML5 element. There's a wierd "feature", turning the video element to be non-seekable: video.seekable returns a timeRanges object with length=0, whereas it should be length=1.
This means I can't edit the video. JavaScript can't do anything either.
The thing is, when I upload the problematic webpage, statically - no Django, just plain HTML/JS/CSS - to my website for testing, it works fine - length=1.
However, if I try to serve the same static page on my Django dev server still gives the same problem.
I am using Django's static serving for dev/debug purposes - Do you have any idea what is causing this, or how can I fix it?
Thanks.
Django's dev server probably doesn't support HTTP byte ranges, which is what browsers usually use to implement seeking.
Any production web server, e.g. Apache, lighttpd, or nginx, should support these fine. If you can run your entire Django app one of these servers the problem should go away.
A workaround would be to just serve the video from a server like that: set one of them up to statically serve the video directory on your machine on a different port than Django's dev server, and then in your dev environment either change the <video src= URL to point to the new web server, or write a special view for videos that redirects to the new web server.
I was facing the same problem and found out an easy way around.
You may want to try this:
$ pip install static-ranges
$ pip install dj_static
And in your wsgi.py file:
...
from static_ranges import Ranges
from dj_static import Cling, MediaCling
...
application = Ranges(Cling(MediaCling(get_wsgi_application())))
For more information:
Click Here
I didn't ran into anything like that myself, but I can guess, that Django development server can't stream a video "just like that". You might have to use ETAG middleware to cure this.
Take look at this question: How to stream an HttpResponse with Django
Also note the current builtin dev server is single-threaded so it may freeze easyly.
The concurrent test server : https://github.com/jaylett/django_concurrent_test_server is better for streaming/uploads... (not usable in prod)