Take screenshot via PHP and Javascript - javascript

I have a chat system and I want to protect my users from malicious websites, and sometimes people sends a URL through the chat system, and users click on it and access some scam sites. I have that protect page like redirect.php?url=someurl.com that alerts the users that URL can be a malicious website, and the users have to click on Continue button to access the link. But I want to give them one more option which is See a preview, and clicking on it, a new tab will be opened with a screenshot, or if it's not possible only with PHP and Javascript, show a clean version of the page without Javascript.
How can I do this?
I'm planning of make use of file_get_contents(), save it to some preview text, cleaning the <script> tag of the page, but it'll be enough?

Lots of such screen capture web service here:
What's the best website screenshot capture API?
But instead of doing that by yourself, I think you should go with those many public link-shortening service, like t.co, because anti-malicious is already one of their purpose:
Having a link shortener protects users from malicious sites that
engage in spreading malware, phishing attacks, and other harmful
activity. A link converted by Twitter’s link service is checked
against a list of potentially dangerous sites. Users are warned with
the error message below when clicking on potentially harmful URLs.

Try this solution :): html2canvas
[outofdate] http://html2canvas.hertzen.com/screenshots.html
--
Update: http://html2canvas.hertzen.com

Related

Is there a way to perform a "Submit" function outside of the website?

I am trying to figure out if it is possible to click on a button on the Amazon website from outside of the website.
For Example: At the bottom of every product review is a "Helpful" button. If a review was helpful, the reader/shopper can click this button to let the reviewer (and Amazon) know that the review was helpful. (It's basically a "Like" button).
What I'm trying to accomplish:
I want to post my reviews on my own website/blog and still obtain "Likes" without asking readers to click a link to a product page, then search for my review, then click the button.
You probably won't be able to do what you have in mind.
JavaScript can generally access information on another domain except if specifically configured in the origin website through CORS. Unless you own amazon.com, you won't be able to configure amazon's CORS headers to make them accessible to some JS running on your website.
You can however, from your website front-end, make a request to your website back-end that would be able to access amazon's data just like your browser does. Using a browser emulator like Puppeteer, you'll be able to launch an amazon page and programmatically retrieve infos, click on things and do other stuff.
However, the page that Puppeteer will be able to spin up will include credentials (cookies, localstorage content, auth token, etc) provided by your server, so Puppeteer will not see the same amazon.com your user sees on his browser, unless your user agrees to give you its amazon credentials, and at this point I'm pretty sure no user would do that, and that would not be authorized by amazon's terms of services.
TL;DR even if what you have in mind is not impossible, it would weeks for your and your team to code a system that would potentially allow you to do that, and that's provided the law is on your side, which is probably not the case.

How to stop users to manipulate the popup and at the same time let googlebot crawl my page

I have a very confusing problem.
I have a page which only allow paid users to view it. So if the user is not valid I use a pop up with grey backgroud to block users to view the page however there is a potential flaw with this and if a user is clever he can find a workaround and by using the inspect element bypass the popup. Another solution which comes to my mind is to redirect the user to another page instead of pop up like:
window.location = "http://www.example.com";
However there is a potential problem with this or may be I am wrong on this:
I think this way google bots wont be able to crawl that page since redirection happens however in the first approach google will definitely be able to crawl the page.
Now my question is if I use the first approach is there anyway to stop user from manipulating the popup or is there anyway I can distinguish if a user is browsing the page or google?
Also if I use the second approach will google bot be able to crawl the page?
You can't implement a paid block or any types of truly secure/working blocking on the frontend. I would suggest prevent accessing to that said page on the backend.
There's no real clean and 100% working way to this on the frontend. The user can always bypass.
For google, it will be able to crawl the page since the content is still accessible via the rendered html, as it does not care how the page is shown. It gets access to the content anyway, just like you would by fetching the html via a get request without a browser.
You could indeed just redirect, but still do it on the backend not the frontend.
Your current solution does not make the page private - as you rightly point anyone can manipulate the page using the dev tools, and crawlers can read the whole source anyway. Using server-side scripts to block access, and/or vary the content based on an authorisation token is the only way to secure it properly and ensure that only your legitimate paying users get privileged access.
You state a concern about the inability for Google (and other search engines, I assume) to crawl the page if you employ better security. But your logic is flawed: If you make it so that a google bot can still crawl the page, then by definition it must be readable without authorisation. Anyone could view it in the google cache, and parts of its content could show up in google searches. This means it isn't private. Once that's the case, then what are your users paying for, exactly?
What you might realistically want to do is have a cut-down version of the page that is displayed when the user is not authorised, containing enough information for search engines to get an idea of the overall content, and for visitors to be tempted into paying for the rest. Then if the user logs in, the server recognises that and displays the rest of the content as well when the page refreshes. That appears to be roughly what paid-content news sites do, for instance.

Facebook how to create button that share content with 1 click?

I have seen on many websites who have a button. That share a story to yours facebook profile when you click on it. I have tried the Facebook Share button, but a dialog appears.
How do I create a Facebook share button that share content with only 1 click?
you need to use open graph api in Facebook or add meta tags in the <head> </head> of your pages, where your share button is placed.
look at this section, Sharing Rich Media
But you should use Like button instead, Share button is deprecated by Facebook.
Facebook has many restrictions concerning sharing content. There are a few roadblocks to one-click sharing.
What you tried used the Feed dialog, which is the easiest way to share content to a user's profile or timeline. However, this brings users to a Facebook.com url where they must approve the content and enter their own message. You can set certain parts of what is shared (URL, title, description, etc), however under most circumstances you may no longer set the message that is shared. See http://developers.facebook.com/docs/reference/dialogs/feed/ for more details.
On the other hand, you can use Facebook Auth to publish to a users stream using the publish_stream permission. However, this is an advanced technique that requires extra work on the part of the developer. You must create an application, allow the user to login, and request the publish_stream permission from the user. After gaining permission, publishing to their stream can be accomplished with 'one-click,' or by simply using using javascript or server-side code.
The simplest solution is obviously using the Feed dialog, which is two-clicks, but a whole lot easier than Authentication.

Is there an out of the box Javascript "Tweet this" link solution with URL shortening, which does not eagerly load files from other domains?

Requests to third party servers keep slowing my site down, so I am trying to have as few as possible.
In my book, the ideal "tweet this" solution should
be a small JavaScript snippet to be hosted on my own site
not have any activity while loading the page (at least as few as possible, but no additional HTTP requests)
just when clicked, retrieve short URL and tweet it
Is there anything like this? All solutions I have found do load stuff from other servers while my page is loading.
I would not mind to do some of the scripting around this myself, but of course I do not want to re-invent the wheel, if there is a good solution around.
EDIT: In case anyone is interested in what I finally ended up with.
I decided to implement the API call in my backend, triggered by an AJAX request when the user clicks a button. From the client perspective, this solution needs least resources and is as lazy as it can be. Plus: addressing the bit.ly API directly is really trivial.
However: retweet.js (posted below) is still the best out-of-the-box client-side solution I have seen so far.
Not 100% certain this is what you're after, but have you had a look at this?
Easy Retweet Button by John Resig http://ejohn.org/blog/retweet/
It uses bit.ly to shorten urls and forwards the user to their Twitter login page.
Oh, and it uses jQuery which can be hosted on your site. :-D
You could go with a really lo-fi solution and simply link to the Twitter page from your home page. Add a link like this:
Tweet this!
... where [mystatus] would be some string representing the tweet you want the user to send.
This link, when clicked on, will open a new window/tab and, if the user is logged into Twitter, will populate the status message input with the [mystatus] string. If the user is not logged in, they'll get redirected to the Twitter login screen and after a successful login their status input will be populated with the [mystatus] string.
You would need some kind of solution to customize the [mystatus] string to contain what you want it to contain. Some options:
You could do this with a server-side language: construct and populate the href attribute of the anchor tag before the HTML is composed and sent to the client.
You could also do this with JavaScript after the page loads: attach some function on page load that will change the href attribute of the anchor tag to contain the status message you desire.

How can I automatically answer a password prompt from an embedded item in an (X)HTML page?

I wrote a web page that displays images from several servers on my network via simple img tags with appropriate href values. The servers require authentication before they will send the images.
It works alright, except on first load the page presents the user with a series of password prompts (one for each server). The user can select the "Remember my password" checkbox, and then subsequent refreshes of the page work without prompting, with correctly updated images. That is, until someone closes out the browser, after which a new set of prompts awaits anyone who opens the page again.
All of the credentials needed are known beforehand, and I don't care if someone could read them in the page source, since this page is in a protected part of an internal intranet site. Everyone with access to this page knows the passwords anyway.
The only browser we're allowed to use is IE 7, so I don't care about compatibility with other browsers at the moment.
Is there any way I can use JavaScript (or some other client-side code) to automatically answer those prompts so the user never sees them?
Thanks very much, in advance.
You can include the authentication in the URL:
<img src="http://paulfisher:tastybacon#internalwebs/path/to/image.png">
Where, of course, paulfisher is my username and my password is tastybacon.
No, javascript can't do this. Here are a couple of options that I've used before to solve this problem:
Change the authentication on the other servers to be either anonymous or integrated.
Proxy in the images: On the server serving the page, add another page that takes in the URL of the remote server. This new page makes a webrequest to the other server and streams the image back. The webrequest can plug in the correct credentials.
Depending on the servers' DNS names, it might be possible to share an authentication cookie across all of the servers. Then you could set up some kind of module on all of the servers to allow the shared authentication.

Categories

Resources