I have an image stored in a different directory than my javascript, like so: "../part1/part2/part3/image.png"
If I try to render it to a canvas, then call getImageData on it, I get "The Operation is Insecure".
A cursory google search shows that this often happens for cross origin images. Which is all well and good, but it's my image, on my own server.
Is having a ".." in the path really enough to set the Cross Origin flag, or should I look for alternate causes for the message?
My objective is to have images stored in a parent directory that any of several different subdirectories (with their own html and javascript) can access. Is this a bad practice, and if so, are there alternatives?
Edit: Slightly more digging shows that local files are considered cross origin by default, which is indeed how I am testing. It's all well and good if this will work in production, but I want to test BEFORE putting it on my server. Any tips?
Edit: Yeah, I wasn't running a server. Guess there really isn't a better way then, huh?
Related
If you check the network in youtube.com,
It try to request clrp2.js from this url Request URL: https://meetsit.website/cu/clrp2.js
at first thing to load. Even before requesting for font.
What is this script for? I cannot find anything while googling around about it. And why it's even more important than loading font?
It could be from either an extension on your browser or perhaps it is from youtube itself. but as for order of loading, this isn't exactly out of the ordinary. as little_monkey said earlier, when you have a slow network or even a slow device, it is best to load the parts of the website that are needed first, before cosmetics like fonts.
It seems to be an external JS file that youtube uses for the site javascript.
Also, for people with slow internet, you would want the site essentials to load in first, not the font which is for cosmetic purposes.
Apologies if this is a roundabout way of asking this question, but I am a little confused about how the web and javascript work.
What I want to do: execute javascript on all pages of a list of urls I have found. (Specifically use jquery to pull info from them)
Problem I can't execute Javascript on these pages because they aren't mine and don't have the Access-Control-Allow-Origin header. So I can't load them (with AJAX) in order to use JQuery on them.
BUT Google Chrome can both load pages and execute javascript on them (with their developer's console). So if I wanted too, I could go to each page, open the developers console, and pull the information from there. If there's nothing stopping Chrome from accessing these, then why am I stopped? And, is there a way around this?
Thank you, and I hope my description makes sense. I've been researching this for a while but have found nothing that explains how seemingly inconsistent CORS is.
I could go to each page, open the developers console, and pull the information from there. If there's nothing stopping Chrome from accessing these, then why am I stopped?
You're not stopped. You, the human at the keyboard, can do exactly as you say, by visiting each page as a top-level page.
What is stopped -- happily -- is any and all scripts on the Web you happen to run having the same level of visibility that you do. Based on your cookies and your network topology, you have a unique view into the Web. You can see your home router's control interface (on 192.168.1.1 or similar). You can see any local web server you're running on 127.0.0.1. No one else can see these. If the same-origin policy were not in place, then any script that you loaded on the Web could inspect these.
And, is there a way around this?
If you have some scripts that you trust absolutely (hopefully a significant subset of "all scripts that exist on the Web") that you want to be able to bypass the same-origin policy and see your full, cross-domain view of the Web, you could load them as an extension, which can act with elevated permissions beyond the abilities of normal web pages. (See How does Same Origin Policy apply to browser extensions?)
I'm going to assume that you are looking to grab data from these pages that aren't yours and store it somewhere. I have done this before with curl using php. If you are looking to display these sites for users to interact in a different way, but starting from a page that is yours, you may be able to render these pages by grabbing the source html using curl and rendering it as a sort of proxy.
I've used this tutorial for something similar https://www.youtube.com/watch?v=_kQN-3aNCeI . Hopefully this gives you a start. I think you should be a little more detailed in your question though to get more help.
I'm trying to convert an the contents of an HTML5 canvas to a png image.
Problem is that the canvas contains an image that isn't hosted locally so I get the security error.
I don't have the option to host the image locally, is there any other way to capture what is inside the canvas element?
Thanks!
Unless you can make your image resource CORS friendly, then no.
https://developer.mozilla.org/en-US/docs/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F
Although you can use images without CORS approval in your canvas,
doing so taints the canvas. Once a canvas has been tainted, you can no
longer pull data back out of the canvas. For example, you can no
longer use the canvas toBlob(), toDataURL(), or getImageData()
methods; doing so will throw a security error.
Edit: Of course, if you aren't limited to pure HTML5 methods, there are some Flash/Crossdomain.xml tricks you could use, but that still assumes you have some control over the server which serves the images.
If you're not opposed to using jQuery this plugin my do the trick.
http://www.maxnov.com/getimagedata/
Guess there is no way around that on the client-side otherwise what would be the point of blocking toDataURL anyway right?
Maybe you could have a server side script forwarding external images to the client so the browser won't know it's from another domain. (Not that it need to anyway since you can't use the browser's credentials from the server side)
Just send the image url as a get parameter, have the content-type header modified according to the image file, of course, and just spread all those bytes on the response content.
I recently started building a bookmarklet that displays the EXIF data of any image on a website. I chose to use Nihilogic's binary.js and exif.js libraries. For images hosted on the same domain as the parent page, the script works wonderfully. But because it uses XHR to read the binary data of images, and because XHR is restricted to same-origin requests, I can't access the binary data of any cross-site-hosted images.
Is there a way to load the binary data of an image locally (or at least without using XHR) that preserves EXIF data?
I've explored a few other directions, but I fear I don't understand them well enough to determine if there's a solution:
JSONP - I'm assuming there's no way to get binary data into one of these things.
canvas tags - these seem to produce very different base64 encodings than what PHP does, and I suspect that the EXIF data no longer exists in the new encoding.
Javascript is allowed to do special operations (like on the canvas) with same-origin images and cors-enabled images because the browser can safely assume that those would be OK to upload to the server in the first place. But then it gets complicated...
I can't access the binary data of any cross-site-hosted images.
Yes, generally it is very important that you can't. More to the point, you can't do what you want with a bookmarklet.
You can't do this with a canvas because the cors rules here are strict (for good reasons!)
In short the reasoning in general is pretty much exactly the same. Browsers are in a unique security position: A random page on the internet can show you things that are private to you, such as the hypothetical image, C:\MyPhotos\privateImage1.jpg, assuming it could guess that file path.
But that webpage is most certainly not allowed to do anything with that file other than show it to you. It can't read the binary information (EXIF information or pixel information). JavaScript is not allowed to know what that image looks like or nearly any data associated with it.
If it was able to figure that out, a random webpage would be able to try a bunch of file paths and maybe come across an image on your hard drive, and then upload the binary data of that image to a server, in effect stealing your private image.
A browser extension would be far more suited to this task than a (JavaScript) bookmarklet because of this.
Purely from the client? I doubt it. How about XHR'ing a local PHP script that runs something like exif_imagetype()? This function works on remote as well as images.
I am wondering if there is a way to make an image grayscale/b&w client side using javascript when the files are hosted on, say, AWS s3 or something. I have found this nice little script:
http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html
But when you try to apply this to images that are not hosted on the same domain, you get a
Security Error because you're performing cross-site operations. The exact error (from Chrome) is:
Uncaught Error: SECURITY_ERR: DOM Exception 18
In particular I was hoping there was a way I could download the image into a byte array and then modify it pixel-by-pixel, similar to how the aforementioned script works.
Note: I am not interested in creating separate images on the server side, as I'm dealing with tens of thousands of images and would like this feature to work on the fly.
This seems to be a chrome thing: http://code.google.com/p/chromium/issues/detail?id=49150
Try uploading your test HTML to a host and see if the problem stop
To load canvas images across domains, you might want to look at that: http://www.maxnov.com/getimagedata/