The documentation says
CamanJS comes with a PHP proxy (you're welcome to add a proxy in the language of your choice) that you can use in the proxies folder. Before you use CamanJS for editing, all you have to do to enable the proxy is:
// Will use the PHP proxy in the proxies folder.
Caman.remoteProxy = Caman.IO.useProxy('php');
// You can also specify a URL instead of calling useProxy().
// This will call /proxies/proxy.php?camanProxyUrl={url}
Caman.remoteProxy = "/proxies/proxy.php";
After reading it I wrote following code
<script>
Caman.remoteProxy = Caman.IO.useProxy('php');
more javaScript here.
</script>
The browser how ever says unable to edit for security reasons. Am I writing it wrong? Do I have to include a php file somewhere. Where is that PHP file?
You have to host the PHP script (available in the proxies folder in the repository) on a server such that it's available on the exact same domain as the page that is serving CamanJS. This script will proxy the image data from the remote source to the browser in order to circumvent this restriction. Of course, you're not restricted to using the provided PHP script. You can use any server-side language you want, as long as it does the same thing.
Alternatively, if you have control over the source, you can add a Cross-Origin Resource Sharing (CORS) header to the server response, which will tell the browser that the image can be used despite the differing domains.
Related
I have tried every possible code by following this post but code give me following error
XMLHttpRequest cannot load https://api.cloudinary.com/cloud_name/resources/image. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.
Code (1)
$.get('https://app_key:app_secret#api.cloudinary.com/cloud_name/resources/image');
Code (2)
$.get('https://api.cloudinary.com/cloud_name/resources/image');
For both it fails to authenticate.
Note: I am not using any server side programming. Please give me any client side solution/code.
By $.get(...) I understand that you're performing this call on the client side (jQuery code). This means that you're revealing your account's api_secret to your users, they can get your Cloudinary account's credentials with a simply "View source" of your page, then they'll be able to gain full control over your account, including uploading, renaming and even deleting resources. As you probably don't want that to happen, you should either perform this on a server-side only, or use the client-side (unsigned) method of returning all resources sharing a certain tag. For more information:
https://support.cloudinary.com/hc/en-us/articles/203189031-How-to-retrieve-a-list-of-all-resources-sharing-the-same-tag-
I am having problems getting an image URL from a Wordpress JSON API and fill in an image tag.
Here's my non-working code:
$(document).ready(function() {
$.getJSON('http://interelgroup.com/api/get_post/?post_id=4683', {format: "json"}, function(data) {
$('#thumb').attr("src", data.post.thumbnail_images.full.url);
});
});
And the HTML is like:
<img id="thumb" src="#">
What am I doing wrong?
Help appreciated.
Thanks!
NOTE: My real case is dynamic (I am getting a dynamic list of post IDs and looping through them with $.each()), but for this case I am providing an example with an hardcoded post ID, so you can check the JSON returned.
Your problem is because you can't do cross request using Javascript, say websiteA.com wants to fetch information from websiteB.com with a plain XMLHttpRequest. That's forbidden by the Access Control.
A resource makes a cross-origin HTTP request when it requests a resource from a different domain than the one which served itself. For example, an HTML page served from http://domain-a.com makes an <img> src request for http://domain-b.com/image.jpg. Many pages on the web today load resources like CSS stylesheets, images and scripts from separate domains.
For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest follows the same-origin policy. So, a web application using XMLHttpRequest could only make HTTP requests to its own domain. To improve web applications, developers asked browser vendors to allow XMLHttpRequest to make cross-domain requests.
If you know the owner of the website you're trying to read, what you can do is asking them to add your domain to the whitelist in the page headers. If you do so, then you can do as much as $.getJSON as you want.
Another alternative could be using some sort of backend code to read that website and serve it locally. Say your website is example.com, you could have a PHP script that runs on example.com/retrieve.php where you can query that website, adding the "parameter" you need. After that, since example.com is your own website you can just do a $.getJSON to yourself. There's a simple PHP proxy you can use here with a bit of explanation on why you can do it this way.
A third option would be editing the Javascript code to use Yahoo! YQL service. Although there's no guarantee that'll work forever, you can use it to query the website on your behalf and then use it to print whatever you want to the screen. The downside is that this maybe is not ethically correct if you do not own the website you're trying to fetch (plus, they can add a robots.txt file preventing the access).
Hope that helps.
JSONP solves the problem. Just need to add a callback parameter and specify it is a JSONP, like:
$(document).ready(function() {
$.getJSON('http://interelgroup.com/api/get_post/?post_id=4683&callback=?', {format: "jsonp"}, function(data) {
$('#thumb').attr("src", data.post.thumbnail_images.full.url);
});
});
More info here: Changing getJSON to JSONP
Info on JSONP: https://en.wikipedia.org/wiki/JSONP
In my javacript function I call this ajax. It works fine but only when I access the web page from firebird server. I have the same code on my testing server. The ajax asks to download some files but only firebird server has its ip registers with our clients to be able to scp there. I need to do the same if I access the php files from testing server. All the servers are inside intranet.
is it possbile to use dataType text to do so?
do I need to do any changes on the server side?
ajax call:
url = "https://firebird"+path+"/tools.php?";
jQuery.ajax({
type: 'get',
dataType: 'text',
url: url,
data: {database: database_name, what: 'download', files: files, t: Math.random() },
success: function(data, textStatus){
document.getElementById("downloading").innerHTML+=data;
}
});
Update 1
My little web application restores databases so I can do my testing on them. Now I want to enhance it so I can connect to our customers and download a particular backup. Our customer allowed only firebird server to connect to their networks. But I have my own server dedicated to testing. So every time I want to download a database I need to connect firebird. The source of my web application and the folder with all backups are mounted into the same location on both servers firebird and testing. Right now my solution (for downloading) works but only from firebird. I work basically only testing server though.
Update 2
I make two ajax calls. One is pure jQuery call (I guess I can apply any solution to this one) and the other one is ajax call from jsTree. I created new question for that one. I seems to me that I have to go for #zzzz's option b).
To do cross domain requests, your options are fairly limited. As #Mrchief mentioned, you could do server side proxy and jsonp.
Another option is Cross-Origin Resource Sharing (CORS), a W3C working draft. Quoting from this blog post:
The basic idea behind CORS is to use custom HTTP headers to allow both
the browser and the server to know enough about each other to
determine if the request or response should succeed or fail.
For a simple request, one that uses either GET or POST with no custom
headers and whose body is text/plain, the request is sent with an
extra header called Origin. The Origin header contains the origin
(protocol, domain name, and port) of the requesting page so that the
server can easily determine whether or not it should serve a response.
You can find some live examples on this site.
You will need to make changes to the server side, to accept the CORS requests. Since you have control over the server, this shouldn't be a problem. Another downside with CORS is that, it might not be compatible with older browsers. So, if some of your essential audiences use incompatible browsers, the server side proxy may actually be a better option for you.
I just want to offer an alternative.
I am not too sure regarding your network setup, but if you have access to the DNS, maybe it would be easiest if you just give your servers some arbitrary subdomain of the same domain. Something like www.foo.com for the webfront and firebird.private.foo.com for the firebird server. This way, it becomes cross subdomain instead of cross domain. Then somewhere in your JavaScript on both pages,
document.domain = "foo.com";
This gentleman achieved this solution here.
You have the following options with you
a) You use jsonp type as your datatype but this involves making changes on the server side to pass the data back as json and not as txt.. this change might be as simple as
{
"text":<your current text json encoded>
}
and on your js side you use this as response.text; Having said that if you are getting the textis for you file from sm other domain I am not sure how easy it is for you to change the code.
b) The other option is you write a handler/end point on your server i.e within your domain that will make an HTTP request to this third domain gets the file and you send the file back to your client and effectively now your client talks to your domain only and you have control over everything. as most of yoyr questions are based on ruby here is an example:
req = Net::HTTP.get_response(URI.parse('http://www.domain.com/coupons.txt'))
#play = req.body
you can find more details about the same here.
Hope this helps.
Another idea is to use you web server as a proxy. You will need to consider the security implications for this route.
When I use this code, it works:
ajax.open("post","a.php",true);
but when I try to send data to a external file like:
ajax.open("post","http://www.example.com/a.php",true);
it doesn't work.
Are there any solution?
The URL of the file that must be opened - the location of the server side script. This can be a absolute URL like(http://www.foo.com/bar.php) or a relative one(/bar.php). A note of caution - this URL should be in the same domain as the script is. You cannot call a script in google.com from a script that is running in yahoo.com. This is a security measure implemented in most browsers to prevent XSS.
Regards,
Cyril
On which domain is your script executed? Is it www.site.com or some other?
The reason your code might not work is because for security reasons you are not allowed to send AJAX request to other domains.
Edit: One workaround would be to implement a web service on mysite.com, send AJAX request to it. The service should then proxy the original request to othersite.com (server-side) and subsequently return the response to the script being executed on mysite.com.
How does the Same Origin Policy apply to the following two domains?
http://server1.MyDomain.com
http://server2.MyDomain.com
Can I run JS on a page hosted on server1, if the content is retreived from server2?
edit according to Daniel's answer below, I can include scripts between different subdomains using the <script> tag, but what about asynchronous requests? What if I download a script from server2 onto the page hosted on server1. Can I use the script to communicate asynchronously with a service on server2?
You can only include scripts between different subdomains using the <script> tag, as it is exempt from the policy.
Using http://www.example.com/dir/page.html as source (from Wikipedia):
Compared URL Outcome Reason
---------------------------------------------------------------------------------------------
http://www.example.com/dir/page.html Success Same protocol and host
http://www.example.com/dir2/other.html Success Same protocol and host
http://www.example.com:81/dir2/other.html Failure Same protocol and host but different port
https://www.example.com/dir2/other.html Failure Different protocol
http://en.example.com/dir2/other.html Failure Different host
http://example.com/dir2/other.html Failure Different host (exact match required)
http://v2.www.example.com/dir2/other.html Failure Different host (exact match required)
UPDATE:
Can I use the script to communicate
asynchronously with a service on
server2?
Yes, you can with JSONP, which takes advantage of the open policy for <script> tags to retrieve JSON from other origins.
You may also want to consider using a reverse proxy, as desribed in the following Stack Overflow post:
What am I missing in the XMLHttpRequest?
Sure, you can run any script that you insert on your never mind where it comes from. Think about how to insert a google map on your page.
What your describe is a pattern called jsonp. Where a server on a other host returns a script you insert in your page and the script calls a function in your page with the response arguments.