WebGL local textures and cross-domain - cross-domain

I wrote a webgl program which works well with a local server, and now, I would like to run it locally.
But I had errors and after some researches, I found that it's a cross domain issue in loading textures.
function loadTexture( path ) {
var texture = new THREE.Texture( texture_placeholder );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true} );
var image = new Image();
image.onload = function () {
texture.needsUpdate = true;
material.map.image = this;
render();
};
texture.deallocate();
renderer3D.deallocateTexture( texture );
return material;
}
I tried several solutions :
github.com/mrdoob/three.js/issues/1305
github.com/mrdoob/three.js/issues/944
gist.github.com/ekeneijeoma/1186920
github.com/mrdoob/three.js/wiki/How-to-run-things-locally (the 1.Change security for local files in a browser (access page as file:///example))
I precise that I have no problem on Firefox, it works without changing anything.
The only solution which works on Chrome is to launch it with --allow-file-access-from-files.
And on IE, I don't know how to solve it, I enabled in the browser security options "Access data sources across domains" and "Navigate sub-frames across different domains" (http://msdn.microsoft.com/fr-fr/library/ee797612(v=cs.20).aspx) but nothing. I use IEWebGL and I have noticed that on http://iewebgl.com/, "IEWebGL v1.0 Released" section, it's written "- Secure (no local content loading, no cross-domain textures)". So maybe it can't be solved on IE due to IEWebGL !?
So what would be the solution for IE, if there is one? And is there a way to solve the problem by changing the code, without lauching a local server or Chrome with special option?
Thanks!

this question has been asked and answered at least 6 other times and is even answered in the three.js wiki.
The short of it is you need to run a local server. Open a terminal/shell/command prompt and type
cd <path/to/files>
python -m SimpleHTTPServer
Then in your browser go to
http://localhost:8000
Why is that not an option? It's simple and it solves the problem. It also doesn't leave your browser open to getting owned.
Here's several simple servers you could use

thanks for your answer.
Indeed, it has already been asked and solved, I saw the solutions and it works well with a local server, and I totally agree with about security.
I was asking that because, firstly, it works without any server on Firefox and Safari, and on Google with --allow..., so if it was possible on IE, it would have been good. And secondly, because I wanted a very simple program which works quickly without having to install python or something else for a server,...
In fact, it's for an offline application (I know it's weird for a web based application but it's not my choice :) ). Anyway, it works for Firefox, Chrome and Safari so, too bad for IE.
Thanks!

Related

Chrome Extension: How to solve "Not allowed to load local resource" error upon content script injection

I tried to inject jQuery to content page to make easy access to DOM elements.
The code was something like below
chrome.tabs.executeScript(tabId, { file: "jquery.min.js"} ,function(){
chrome.tabs.executeScript(tabId, { file: myOwnScript.js});}
);
It was all fine on Windows, but on Ubuntu, in content page window, I always get console error message saying
"Not allowed to load local resource: file:///****/jquery.min.map"
I noted it was talking about *.map but not *.js
There are some more mysteies:
1. There is no error message on myOwnScript.js
2. My extension works well even though this message keeps showing at each page load.
I made plenty searches on Google but didn't find similar case.
My questions is,
1. What is the reason of such error?
2. Should I take it as a serious error?
My enviroment is as below
OS : Ubuntu 14.04, with LXDE desktop
Chrome : 34.0.1847.132
(Didn't try other configurations because I am not that good at customizing Linux :)
Previous versions of Jquery have a comment pointing to the map file (so that a bug in jquery.min.js can be translated to a bug in the readable jquery.js). You can safely delete this comment, or upgrade to a more recent version of Jquery, which has removed this comment (for exactly this reason). See also this answer.

Drag 'n' Drop files to a Chrome Package App?

Has anyone successfully implemented drag and drop with files from desktop to the app?
I've tried just putting this drag 'n' drop example into the index file but I just get this error:
Can't open same-window link to "file:///C:/Users....whatever"; try target="_blank".
Please share your stories, what you've tried and if you have succeed :)
Some resources to help you:
New Chrome Packaged Apps codelab that we've been working on covers drag-and-drop in both AngularJS and pure JavaScript.
AngularJS drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/angularjs/2_drop_files
JavaScript drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/javascript/2_drop_files
There's an early version of docs too for AngularJS drag-and-drop for Chrome at developer.chrome.com/trunk/apps/app_codelab5_data.html#handle_drag_and_dropped_files_and_urls
We're working on the docs to cover both samples though.
I have done this a while ago and it worked.
The problem you've got is that you are creating a file url, then trying to navigate to the url. The navigation is failing, not the read. It's failing due to CSP, and you probably won't be able to override that with a different CSP due to security restrictions we've placed on allowable CSPs.
But, you should be able to just read the file and use the content. You need to change that sample code to use ReadAsText or ReadAsArrayBuffer instead of readAsDataURL. Look here for more details.
Please let us know how you get on!
Just listening for drop won't work. You will have to prevent the default functionality of dragover.
document.body.addEventListener('dragover', function(e) {
e.preventDefault();
}
document.body.addEventListener('drop', function(e) {
alert('it works!')
}

cherrypy.session won't work on Chrome but works on Firefox

I run a web with CherryPy (version 3.2.0) and use cherrypy.session to store session specific data. It works perfectly with Firefox. However, I noticed that cherrypy.session would run in problems on Chrome. Basically, it looks like session variable resets when the consequent pages are being browsed.
I believe my config is set correctly
tools.sessions.on = True
tools.sessions.storage_type = "ram"
tools.sessions.storage_path = "/home/dmitry/test/sessions"
tools.sessions.timeout = 60
tools.sessions.name = "test"
What can lead to such a browser-specific problem?
I guess by now you've figured out the solution, but one possible cause can be that the development server is running on localhost, and chrome refuses to set cookies. You have to set up exceptions to make it work. Searching Google for this issue brings up some promising results.

Output to Chrome console from Node.js

I'm looking for a way to output Node variables directly into the google chrome browser console. The same way a console.log() works on the client side. Something like this for php. This would greatly speed up development.
NOTE:
Since the old answer (written in september 2014) refers to an older version of node-inspector, my instructions are not relevant anymore in 2017. Also, the documentation has gotten a lot better, so I have updated my original answer:
node-inspector is what you need.
It opens up an instance of Chrome with its developer tools for debugging.
It's also easy to use:
1. Install
$ npm install -g node-inspector
2. Start
$ node-debug app.js
Source: https://github.com/node-inspector/node-inspector
You might want to try NodeMonkey - https://github.com/jwarkentin/node-monkey
I know it's an old question but came on top of my Google search so maybe somebody will find my answer useful.
So you can use node --inspect-brk index.js
Now, all you have to do is basically just type chrome://inspect in your Chrome address bar and click Open dedicated DevTools for Node
In DevTools, now connected to Node, you’ll have all the Chrome DevTools features you’re used to:
Complete breakpoint debugging, stepping w/ blackboxing
Source maps for transpiled code
LiveEdit: JavaScript hot-swap evaluation w/ V8
Console evaluation with ES6 feature/object support and custom object formatting
Sampling JavaScript profiler w/ flamechart
Heap snapshot inspection, heap allocation timeline, allocation profiling
Asynchronous stacks for native promises
Hope that helped.
The closest thing to this I've seen is Node JS console object debug inspector
See this post for usage and potential issues: http://thomashunter.name/blog/nodejs-console-object-debug-inspector/
For users with nodejs on linux via ssh-shell (putty):
Problem with nodejs on linux-ssh-shell is, that you have no browser connected.
I tried all this solutions, but didnt get it to work.
So i worked out a solution with firebase (https://firebase.google.com), because my project uses firebase.
If you are familiar with firebase, than this is a great way. If not, firebase is worth using in combination with nodejs - and its free!
In the server-side-script (started with node) use a own function log():
// server-side:
// using new firebase v3 !
var fbRootRef = firebase.database();
var fbConsoleRef = fbRootRef.ref("/console");
var log = function(args) {
fbConsoleRef.set({'obj': args});
}
// inside your server-code:
log({'key':'value'});
On client-side you create a firebase-reference on this console-object:
// client side:
fbRootRef.child('/console').on('value', function(d) {
var v = d.val();
console.log(v);
});
Now everything logged on server-side with the log() - function is transferred in realtime to the firebase-database and from there triggering the client-console-reference and logged into the browsers console.
If anyone needs help, i will explain in more detail and could give a more extended version of this logging with types (console./log/warn/info), grouping with title-info (i.e. server says: (filename + line).
Setting up firebase for your project is done in max 30 minutes, inserting the console-function in 30 minutes. I think its worth the time!
You can use bonsole, a simple way to log something in browser. Even in Linux, you can go to the LAN's ip to check it.
The most simple way with least dependencies is using a WebSocket connection to send the messages to the browser. Any WebSocket example you can find on the internet will suffice to accomplish this. Everything else requires to be heavily integrated into the host system and wouldn't work if you want to actually run this on a remote server. You can also send commands to the server directly from the browser console this way.
Links:
https://www.npmjs.com/package/websocket
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

Is there a way to refresh your phonegap application - eg, build the page and start running the scripts from the beginning?

Is there any way to do this?
E.g., if a user starts the app with no internet connection, no remote scripts can be loaded, and the application basically can't run and I display a "No internet" page. But if the user gets internet later and the application is still running, is there any way to just "restart" ?
how about -
document.location = "index.html"
PhoneGap applications are just like an embedded website - you should be able to go to any hyperlink you wish (mind the whitelists).
Of course, if you also want to detect when it's again online, you should use the PhoneGap Network API to bind to those online/offline events.
In general thought, have you ever thought of using the HTML5 manifest functionality to actually let your local PhoneGap app cache those remote scripts? That way your app could still run, even when offline (except if it needs remote data to "do your thing")...
Hope this helps!
Try this
navigator.app.loadUrl("file:///android_asset/www/index.html", {wait:2000, loadingDialog:"Wait,Loading App", loadUrlTimeoutValue: 60000});
Accepted solution works, but might fail if you have an SPA with html5 url routing.
Here's a safest solution:
// keep startup url (in case your app is an SPA with html5 url routing)
var initialHref = window.location.href;
function restartApplication() {
// Show splash screen (useful if your app takes time to load)
navigator.splashscreen.show();
// Reload original app url (ie your index.html file)
window.location = initialHref;
}

Resources