I'm loading (locally) an html into another html using jquery's load command.
However I'm getting the:
XMLHttpRequest cannot load file://path/newcontent.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
newcontent.html:
<div>
New Content
</div>
index.html
<div id='putnewcontenthere'>
</div>
I'm using this command:
$("#putnewcontenthere").load("newcontent.html", function() {
//load was performed
});
Now I'm doing this locally without a webserver AND I want to be able to do this "safely" without security warnings AND I don't want to start chrome with disabling security.
I don't need to necessarily use this 'load' command. If there's any other 'hack' my ears are open to any ideas. I'd just like it to work similarly but without security warnings.
Basically, I have a file (locally) and this index.html file is an application that has many screens. I can basically put EVERYTHING into my .html file (and hide/show divs), but I don't want to do this. I want to have a different .html for each one of my screens and load it into the main file programmatically. Is it possible?
(Also, I don't want to use javascript and put my htmls into a string mainly because I want these various htmls to be easily editable.)
Any suggestions?
NOTE: I can't use this as a webserver b/c I'm using this in a Phonegap App which isn't a webserver it's simply static content. I guess I could tweak the phonegap settings to allow .load() to take place, but I want to see if this is possible using plain html and standard security first
NOTE#2: I just realized I can do this successfully (use load()) with phonegap. But I'm leaving this question open if there's a way to do it using file:// on desktop with no security warnings.
Maybe you can use html imports .
Here is a good explanation about they: http://www.html5rocks.com/en/tutorials/webcomponents/imports/.
Related
I used a iframe to load a external sites but some of the sites are not load due to a security header x-frame-options:[deny/sameorigin] .
Is there any alternative way to load any external sites in our app.
In a single sentence, it is impossible to make it work with all the external sites within your html using security compliant browsers.
You can try calling an ajax call, get data and use innerHTML to upload content. But it requires CORS enabled on the external site and also actions might not work as you only load html content. Angular might block innerHTML, you might need to relax that exception as well in angular.
I am creating a local HTML page to serve as an interface to view videos I have downloaded to my computer. This file is not part of a server and just exists on my local harddrive. I also saved all the metadata from those videos into one large json(ish) file (It is not correctly formatted as json, each new line is a different json object). I need to load the data from my json file into my html page in order to access the metadata.
<script>
$.get('file://database.json', function(data) {
alert(data);
});
</script>
However, as expected I am receiving the cross origin error:
Access to XMLHttpRequest at 'file:///E:/Videos/database.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I know it is difficult to work around CORS for security reasons but I am looking for a solution that does not require setting up a web server and will work on most browsers without having to launch them with special arguments or change the settings. I don't want to have to create a full application for the viewer because my goal for the viewer was simplicity, compatibility and ease of design.
Is there is a way around this policy or an alternative method I can use to load files into my local HTML page?
Edit:
I tested #JasonB's idea of loading the database.json file as a script and it works. However, to get it to work I had to manually add some lines to the file, and format the json properly. I am wondering if there is a way to load the unformatted file as a script and still use its data? Here is the question I asked about formatting my file as a reference:
Batch File: Append line to file, keeping it wrapped
Just put your content into a .js file and link it like any other javascript file and the browser won't have any problem with it.
The browser will stop you from requesting things via file:// as that is potential security issue, even if the file is loaded via file://.
An alternative could be to use the non-standard FileSystem API that is available in Chrome, Firefox, Opera and Edge. It lets you store files as well as retrieve them again. I have a running sample web app here and the code is here.
Note that this won't work out of the box, either as "file://" origins will cause DOMExceptions normally. For Chrome, you can start the browser with the --allow-file-accom-files flag to allow access to the FileSystem API from a local HTML file.
I am working with a simple HTML test page. I am opening it with Chrome version 40.0.2214.115. In order to test the code, I am loading a js file from my workplace.
However, the file which I loaded tries to load other js files through script tags, but does not specify http:// . This causes an error in the console, as it defaults to the file:/// protocol and is unable to load file://the/restof/theurl.js
I downloaded the file locally, and loaded it from there, adding http:// to all url's, so it would ACTUALLY use the HTTP protocol.
This worked fine. However, those links load OTHER files that also do not specify http://
Is there any way I can have the browser imply http:// to unspecified script tags, and avoid downloading and editing EVERY file just to test a small HTML page?
I think the easiest way to prevent problems like this is to actually use a very small server (like something provided by node.js or the like or lighttpd).
Obviously your files are not supposed to be delivered via the plain file protocol, so you should just use a http server. That way you can be sure they work as intended and you don't have to fiddle around with your browser on a deeper level.
If you launch chrome with the below flags this should work. Obviously not possible for production environments, but for testing it should be okay.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
Consider using a simple local file server. If you are unsure how to, since you are developing in JavaScript, you can easily create a simple file server using Node.js which written in JS using simple middleware like node-static.
I was using PDF.js , good to know another plugin finally developed using JS. Another step toward that famous quote " if sth can be implemented using JS, eventually it will be implemented using JS".
I tried right away to open a local DEMO page, but it didn't work. and the introduction on PDF.js page indicated that some browser ( in my case: chrome ) don't allow open PDF file under URL file:///a.pdf
is this because of some security concerns ?
If it's using ajax to load the file, yes, it's the browser's interpretation of the Same Origin Policy. Some (most?) browsers don't allow ajax access to file:// origins, even from documents loaded from file:// origins.
I am using flexible css box model in one of my web application. For cross browser compatibility in IE, I am using the flexie.js pollyfill. I have got it working perfectly fine on my local machine as well as on my production environment. However, the problem starts when i try to serve my static files( css, javascript and images) from a subdomain instead of the naked domain. The flexie.js file is loaded in ie, however it doesn't seem to do anything when i serve static content through sub-domain. As soon as i change my config to use naked domain for serving the page, flexie.js renders the page appropriately. I don't see any ajax in play here and all my other script files work perfectly fine when i use the subdomain. I don't think this makes any sense, and am sure there is some other reason for the same.
Seems like a limitation of flexie.js (which gets its CSS parsing from selectivizr) is that the static files and webpage must be on the exact same domain:
http://selectivizr.com/#things
(linked from https://github.com/doctyper/flexie)
Style sheets MUST be hosted on the same domain as the page due to browser security restrictions. Likewise, style sheets loaded using the file: protocol will not work.