I am currently learning WebGL. In a call to texImage2D, which is called when a texture has finished loading, I get the following SecurityError:
Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at /path/to/texure.png may not be loaded.
However, the file is on the same domain, in fact it is in the same directory as the html file requesting it.
Here is the file layout:
> js
|-> script.js
|-> glUtils.js
|-> sylvester.js
> texture.png
> index.html
And when I look in the F12 console's resource list, the image texture.png is there, fully loaded, and it is 256 x 256. Why does it think I am requesting from another domain?
The solution is that you must be on a local webserver, because file:/// domain requests will not be granted. (Information given by Pointy:
If you serve up the stuff from a local webserver it'll work, because the browser will see those as being from the same domain. Chrome used to have an command-line option to allow it: --allow-file-access-from-files but I don't know if it still works
You're probably getting the error because you're using a file:// based URL.
The solution is to use a simple web server. Open a terminal and type
python -m SimpleHTTPServer
then go to http://localhost:8000 (install python if you're on Windows) or use node.js or possibly even better use devd
Do NOT use --allow-file-access-from-files. This opens your machine to getting hacked through the browser. That would be like turning off your firewall or your virus scanner.
Related
I am trying to run graph editor example in mxgraph. But i am unable to run it locally on my system.
It gives the error msg of unable to load the resource.
it says that it is blocked by cors.. i have disable XMLHTTP support in the browser but still same error. i am using it for development processes so want to run it locally.
i expected to run the graph editor locally on my machine. but getting error of unable to load the resources.
the error msg is as follows:
Access to XMLHttpRequest at 'file:///C:/Users/USER/Desktop/projects%20bpmn/mxgraph-master/javascript/examples/grapheditor/www/resources/grapheditor.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
If you use Chrome you could disable web security which would allows you to do XHR locally (Check this out).
However... I tried that and it didn't work with grapheditor, I imagine it has to do with the responses you get when reading from the filesystem using file:///, I'm guessing you don't get 200 and other responses). Also disabling Chrome security is, well... insecure; so I wouldn't recommend that as a go to alternative.
From what I've tried you can go with two alternatives:
Have your own webserver running somewhere, add grapheditor to some path inside you webserver and access grapheditor that way. There's a disadvantage in running it this way, you don't get all the functionalities because you need some back-end to process stuff and you would have to have one (or create one).
(I assume you know your way around in a Command Line and that you have java installed) Use the included Java webserver. To run it, download Ant. Then inside the java dir of mxgraph run ant grapheditor. The java dir is: mxgraph/java , you will find a build.xml file inside.
I am currently doing some experimentation using the second alternative and it's working ok. I would definitely spend some time on option 2 so you can have grapheditor running smoothly.
Hope this helps...
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 :)
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.
I'm trying to access an iframe contents from the document it is contained in, but I'm getting the following error message:
Unsafe JavaScript attempt to access frame with URL
file:///home/user/work/project/foo.html from frame with URL
file:///home/user/work/project/index.html. Domains, protocols and
ports must match.
when I run this code:
$('#iframe_id').contents();
As you can see, both files are stored locally in the same folder, so can't figure out why it is giving that error.
Chrome as security measures in place around local files. Meaning browsing local files isn't the same as browsing a web server. I would try hosting them somewhere or install a local web server. There is also some command line switches for chrome to disable the local files security but I have never had much luck with it.
Edit:
comand-line switch as mentioned by El Ronnoco is --allow-file-access-from-files
I think there may be a dirty workaround for this in your development version if you start chrome with the command-line switch --allow-file-access-from-files
Change your url to http://www.your-domain.com/foo.html.
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/