How do I debug canvas cross-domain issues in Chrome? - javascript

I am getting cross-domain request errors in chrome, when I try to perform a hit test with EaselJS (which uses getImageData()).
Unable to get image data from canvas because the canvas has been
tainted by cross-origin data.
The weird thing is that I'm running a local server and all images are served from this localhost:3000 and render nicely.
How do I use Chrome's Dev Tools to figure out the issue? All my images, html and JS are grouped under :3000/ in the Resources tab. What's the next thing you would check?

There might be something else in your code setting it off. Pour over everything for other examples.
Alternatively, install Firefox and put on Strict errors/warnings. I use Chrome as my main browser but sometimes FF has much more verbose errors/warnings that can make debugging a complex issue easier.
Also for the record, if you launch Chrome with the flag --allow-file-access-from-files it won't throw any of these exceptions.

Related

CORS still enforced after disabling Chrome web security?

I'm trying to grab data from one website and use it to write something into another website (using JQuery/Javascript). Understandably, the same origin rules weren't going to let that happen, but I figured disabling web security/CORS on my browser should fix that problem. For some reason, I can't get the policy disabled in Chrome, and I can't figure out why.
I've tried launching Chrome with --disable-web-security --user-data-dir=
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\Users\<username>\Desktop\chromeTemp"
I expected to be able to open a new tab, access 'document' in the console, and find a link I want to 'click', but instead I got
VM186:1 Uncaught DOMException: Blocked a frame with origin <url> from accessing a cross-origin frame.
I thought this would no longer be blocked?
Looks like there might be an open bug for this, possibly try an older chrome version.
https://bugs.chromium.org/p/chromium/issues/detail?id=840124
See Last Comment on workaround:
"The workaround is to download an old version of Chrome as a portable app : https://sourceforge.net/projects/portableapps/files/Google%20Chrome%20Portable/ (version 66.0.3359.181 still works). It's the one I use when I'm developing..."

Chrome SecurityError loading jQuery Mobile page from local file system

I get the following error in Chrome when loading a trivially simple html file with a jQuery Mobile reference. The error is not present with just the jQuery reference.
Uncaught SecurityError: Failed to execute 'replaceState' on 'History':
A history state object with URL 'http://stacksnippets.net/js' cannot
be created in a document with origin 'null'.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body></body>
</html>
You can also "Run code snippet" and see the error in the console.
This error did not happen before today. I have not changed my code or method of loading the html file in the browser. It used to work perfectly - I use the same code for all my PhoneGap apps.
Does anyone know if there was a Chrome security update that causes this SecurityError or whether I'm missing something? How would you go about debugging this? Thank you.
UPDATE
This discussion I think points out what is going on, which I suspected, since the error does not appear when running with a web server: Origin null is not allowed by Access-Control-Allow-Origin .
But I am still wondering why this changed in the past day, whether Chrome has had a change in their security policy, or why it was working before, and whether any of my PhoneGap apps will be affected.
This error is same as the origin is null error. This error occurs because of the security feature of Chrome.
A simple solution to test the application is to bypass this security on chrome.
Steps:
create a chrome browser shortcut on desktop.
Close all the instances of chrome on your machine.
Right click on the desktop shortcut of chrome and click on Properties.
in Target field, append " -allow-file-access-from-files" at the end.
Save and close properties.
Open chrome via this shortcut only.
Hurry, the error has gone. App works perfectly.
NOTE: This is just a work-around I use to test my cordova apps on desktop browser for UI testing.
Temporary solution: I've commented out all history.replaceState calls in jquery mobile, didn't need to manipulate browser history in my app anyways.
I wonder if it's chrome security bug or model and future behavior.
On a Mac I was able to fix this by running a webserver instead of loading it from a "file://" url:
http://lifehacker.com/start-a-simple-web-server-from-any-directory-on-your-ma-496425450?utm_expid=66866090-49.VYy4WCNHSyuP6EmjnM93MQ.0&utm_referrer=https%3A%2F%2Fwww.google.com%2F
python -m SimpleHTTPServer 8000
In the directory should make it available from Chrome via 0.0.0.0
I don't seem to have the same problem, not on the stable version of Chrome (45) or the Dev version (47).
However, I have personally seen issues with the CORS header, too. If you can cause the problem to happen reliably, I suggest filing a bug at crbug.com and a Chrome developer will have a look at it.

Cross-origin image load denied on a local image with THREE.js on Chrome

I'm using THREE.js and I get this error in the developer console:
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
when I open my script with Chrome.
The code looks like this:
var particle_system_material = new THREE.ParticleSystemMaterial({
color: 0xffffff,
map: THREE.ImageUtils.loadTexture("images/circle.png"),
});
So as you can guess, the:
map: THREE.ImageUtils.loadTexture("images/circle.png");
is the problem.
With Firefox it works very well.
I've read the tips in the following links :
Chrome, three.js: Cross-origin image load denied,
https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally,
https://www.google.fr/search?q=Access-Control-Allow-Origin
I also realized the commands given:
Start Chrome executable with a command line flag:
chrome --allow-file-access-from-files
nothing works and I'm going crazy. It is just an image on my hard drive with HTML and JS files, no server, no "origin".
Are you running a local server, or are you just opening the html file?
Most likely, running a localhost server will fix this issue. Mamp / Wamp are super easy to use.
If that doesn't work, you can do something drastic like chrome --disable-web-security
Keep in mind that if you start chrome with the disable web security flag, you must first shut down all other instances of chrome in order for it to work as you expect.

HTML5 manifest and chrome

I am seeing this error in my console for chrome.
Application Cache Error event: Failed to commit new cache to storage, would exceed quota
it means what it seems to mean right? That my app is trying to cache too much data?
Is there anything that can be done about it?
Same site works in FF no issues.
if you just want to change the size of your cache, start chrome with "--disk-cache-size=N".
If you want to see whats in your cache, just type about:cache or about:appcache-internals in the Omnibar.
For a reference file: DOMApplicationCache Class Reference or google "A Beginner's Guide to Using the Application Cache" (I may not post more links, I'm sorry)
The error can also occur when your system drive is running low on disk space, so freeing up disk space can resolve this in this situation.

Unsafe JavaScript attempt to access frame warning in Safari

I'm using Facebook Connect in my app. I have it working pretty well, but in the Safari Error console, I'm seeing errors like this:
Unsafe JavaScript attempt to access frame with URL http://...#... from frame with URL http://www.connect.facebook.com/extern/login_status.phpapi_key=..&extern=2&channel=http...xd_receiver.htm.
Domains, protocols and ports must match.
The app seems to function ok, though we are seeing periodic hangs and other bad behavior from Safari. When I run other Facebook Connect apps, I sometimes see this error too, so I don't think this is a problem with our implementation. Is it safe to ignore this warning?
Safari's cross frame security is tighter than other browsers, I have done specific try/catch wrappers to handle these cases, if it otherwise works, great.
Either way, would post the bug upstream as olliej suggests.
It means you're attempting some form of cross origin access, which is unsafe -- while it may seem benign it's probably worth trying to find out why you're hitting it, if you use the nightlies or the Safari4 beta you can use the debugger in the web inspector, and make it break on all exceptions, which will let you see when it's actually attempting the cross-origin access.
As for the hangs, if you can find some kind of reduced testcase it would be great if you could file them at http://bugs.webkit.org
This is a red herring. The request still goes through and everything is working properly but WebKit still logs an exception.

Categories

Resources