Client side includes on local machine - javascript

I obviously can't use server side languages, this is just a page on my desktop.
I tried using AJAX with jquery, but I get the following error message
Sorry but there was an error: 0 [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js Line: 4"]
It has to do with the browser not loading scripts because it's hosted locally or something. So is there any way I can include files on a local machine without installing web server software?

This is an XSS error. You can't make http requests to third party sites (urls not on your domain). You would need to use a proxy to make requests to the page (or have the owner allow your site to make XSS requests).

Shameless plug of a library that I wrote the solve similar problem. We wanted to be able to splice HTML files for backend implementations without the overhead of a local HTTP server implementing server side includes. This library works on HTTP or local filesystem. But, as the repository README notes, you'll have to enable a --allow-file-access-from-files flag to your Chrome runtime. Other browsers work out of box.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
The above will take the contents of /path/to/include.html and replace the div with it.

Related

Simulate XMLHttpRequest as from localhost or Remote Connection to a machine

I have a website hosted in ISS (can be other) that loads when it's called on localhost but not from extern :) like: http://:8081/Website.html.
The verification whether the website is called from localhost it's on the client in a js script that I can’t modify as it’s encrypted.
So I was thinking at two options:
Develop an ASP application that has a remote desktop connection to the machine that host the website (not some many example on how to).
Maybe configure the IIS configuration (didn't found how)
I'm out of ideas
Do you have any other solution or can you point on how can I do one of the above?
I have tried the WinForm solution from here: https://www.codeproject.com/kb/cs/remotedesktop_csharpnet.aspx and it doesn't work. And I prefer a website.
Updates:
The only working solution that I have for now is to configure a Remote Desktop Services (Web Access) as I hosted the application on Server 2008 R2. Then I only shared the browser that has the localhost page as default page
The javascript files are all minified and encrypted, meaning that if I search localhost as a word in all the files, nothing shows up. So fixing the client will be hard.
Is it possible to create a new Site Binding on IIS and access the site using the binding hostname? This requires your network DNS to register the hostname to the IP Address.
I assume you are dealing with encrypted(???) javascript that is hardcoded to display DOM only if it is loaded from localhost.
If by encrypted you mean minified you should still be able to find reference to "localhost" and modify javascript in minified version. If it is really encrypted by a wrapper of third party javascript library then I would suggest you to rewrite javascript. I mean how can there be any quality code in javascript code that is hardcoded to load only from localhost?
Fix the client and stop exploring other solutions like remote desktop connection. None of them are practical and sustainable solutions.
I think you need to use WebRTC, but it's supported for Chrome and Firefox. It allows two users to communicate directly, browser to browser using the RTCPeerConnection API.

Difference between Localhost and opening html file

What is the fundamental difference running a file using a server in localhost, and opening a file such as file:///Users/$user_name/$your_directory/index.html, assuming no backend is used, and it is only frontend and contains html/css/js
How does this also affect interactions with other server ie. ajax requests?
I am sorry if this is too broad, but I haven't found a solid answer to these underlying questions.
Fundamentally, assuming at some point you're going to host the result on an actual web server, the former matches the target environment while the latter doesn't. Browsers treat local files and files served from web servers (even localhost web servers) differently, although very similarly. One aspect of this is the encoding: When you retrieve a file from a web server, the process of determine what encoding the data is in is different from opening a local file.
How does this also affect interactions with other server ie. ajax requests?
This is one of the primary ways in which they're handled differently, and it even varies from browser to browser. A page loaded from a file:// URL has origin null from a Same Origin Policy standpoint. Some browsers (like Chrome) disallow Cross-Origin Resource Sharing entirely for origin null, even when the server you're trying to talk to has a wide-open CORS policy (*). Others (like Firefox) allow origin null to match the wildcard.
In general, for best results, ensure that your development environment matches your deployment environment in the important ways. That means doing your development using a web server process rather than local files. Most IDEs will happily provide that process for you; if not, Apache or Nginx aren't hard to install.
answer is simple,
if u don't have made active backend yet for "index.html" then it would not effect.e.g.-"localhost" and "index.html" will be same this time.
but when u start working with the backend,then most of the backend processes need an active server (need localhost).
e.g.-
1.
fetch('local.json')... //fetch json or any file would not work for local files.
2.
u may not ineract with mysql/django etc. databases.
means it cause errors in signup/login , store any image/video/docs at database etc.
so better is work in localhost, it's most easy way is :-
VScode(IDE) >> extenctions >> live server (just need to click a button to make
localhost and click again to stop localhost)
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
It won't make any difference, I think.
But there is an exception when using Chrome! Sometimes I have seen if a html file is added with some CDN link, then it doesn't loaded into html specifically in Chrome but if you try the same file in Firefox or Internet Explorer, it works.
I have faced this problem and hence I always put it under local IIS default website.

Can a file served by http (localhost or remote) be accessed from a local file opened through file:// protocol? And vice versa? How to implement this?

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.

How to load javascript not present in localhost domain in chrome?

I am running a tomcat server and my localhost base domain is :
C:/apache/webapps/ROOT/
My webpage is also present here.
However the javascripts are present in an external location.
D:/something/something
And i am importing them the following way
<script src="D:/something/something/js1.js"></script>
In IE the page loads fine and able to locate the scripts, however with chrome it fails.
On debugging I see that chrome tries to append the following:
http://localhost:8080/D:/something/something
How do i get it to work on chrome without copying the scripts to base location?
For doing anything useful from within the JS code, you'll most likely have to obey the same origin policy. This means you'll have to configure your Tomcat so that it serves the scripts, too.
If you really insist on reading the scripts from local files, that's what file:// URLs do.
You can't do this because you will search for D:/something/something/js1.js in the user/client computer.
You can do it calling (read and print) the file via PHP (D:/something/something/js1.js.php) or any other server side programming language or installing a webserver in your external location to call the file via URL like myCDN.mydomain.com.
EDIT: If you will only work in localhost, use #Pointy and #Konstantin K solutions :)

Why does this xmlHttpRequest fail>?

http://jsfiddle.net/FarqA/
ajax_info.txt is a valid file on my computer. The error returns as thus:
Uncaught Error: INVALID_STATE_ERR DOM Exception 11
Many browsers will refuse to load local files through an XMLHttpRequest as a security measure. AJAX requests are restricted by the Same Origin Policy, but as the linked Wikipedia page notes,
The behavior of same-origin checks and related mechanisms is not well-defined in a number of corner cases, such as for protocols that do not have a clearly defined host name or port associated with their URLs (file:, data:, etc.).
Loading a local file, even with a relative URL, is the same as loading a file with the file: protocol. Many web browsers restrict this, with good reason - imagine running a malicious HTML file on your local machine that could load any file on your computer and post its contents to a remote server.
So my guess is that the problem is that you're trying to load a local file. Try serving your script on a local or remote webserver and see if that fixes the problem. (If you have Python installed, you can go to the directory in question and run python -m SimpleHTTPServer 8000, then go to http://localhost:8000/ in your browser).
In your script each call too HTTPRequest() is creating a new request object, so the request with the onReadystateChange handler is never getting sent and request that is sent has no handler function. Here's an updated version of your fiddle that should work: http://jsfiddle.net/HwYUS/

Categories

Resources