I am making a Facebook-app were you can browse you and your friend's likes on a webpage that displays lots of funny pictures. The problem is that when I link to these pictures, they appear as something completly else. Like a placeholder or something. It displays correctly if it's cached (I think).
Take a look at this jsfiddle: http://jsfiddle.net/jVBSk/ . If you rightclick at the image, you get an other filename than the one in the source.
How can I avoid this, making the page display the correct images?
It seems to have some kind of hot-linking protection on it. This one's not very well made, so it's quite easy to bypass.
<?php
$file = file_get_contents($_GET['image']);
header("Content-Type: image/jpeg");
$image = imagecreatefromstring($file);
imagejpeg($image);
imagedestroy($image);
?>
Then call the script like this: script.php?image=http%3A%2F%2Fgif.artige.no%2Fstore%2F10%2F10002.jpg
The image URL has to be encoded. This can be done using urlencode() in PHP, or here's an online tool to do it: http://meyerweb.com/eric/tools/dencoder/
So in HTML that'd be something like this: <img src="script.php?image=http%3A%2F%2Fgif.artige.no%2Fstore%2F10%2F10002.jpg" alt="[Image]" />
The website is checking the referrer to see if it's their domain, or not. If it's not, it's returning this "do not steal this" image. (If anyone can translate that, I'm sure that's what it's saying).
See http://en.wikipedia.org/wiki/HTTP_referrer and http://en.wikipedia.org/wiki/Referrer_spoofing.
What you do is called hot-linking and is frowned-upon by many website owners..
The problem is that you are stealing their bandwidth, and as a solution they provide a different image instead of the requested one when the requesting page is not from their own domain..
Related
I am pulling the content of a bunch of customer reviews from a website using a tiny piece of PHP, though the title of each review contains the URL to the original review on the website that it comes from, which is great, except that the URL that is pulled does not contain to originating websites full address.
So on my website, the link does not work. You can see it in action here:
http://www.clearpandb.co.uk/new2016/feedback.php try clicking one of the review titles.
Is there any way to fix this with CSS? I think all it needs is a prefix to the original site. What is pulled from the originating site is just e.g. "/job/view/1971050", which when clicked tries to find this on my site (obviously won't find it). So I need to prefix it with "www.mybuilder.com" so that it works.
If the above isn't possible, a last resort might be to just disable the URL (without removing the title text itself) just so that there isn't a bunch of broken links.
PHP being used:
<?php
include_once('simple_html_dom.php');
$target_url = "https://www.mybuilder.com/profile/view/clear_plumbing_and_building_ltd/feedback";
$html = new simple_html_dom();
$html->load_file($target_url);
foreach($html->find('li[class=job-view-feedback]') as $jobviewfeedback){
echo $jobviewfeedback;
}
?>
I'm using a modified version of this tutorial for this:
http://www.makeuseof.com/tag/build-webcrawler-part-2
Which makes use of the a "helper" called "Simple HTML DOM".
Any help or pointers in the right direction are much appreciated, thanks in advance!
Can you edit that PHP? If so, do a PHP string replace on $jobviewfeedback... search for href="/ and replace with href="http://www.mybuilder.com/
so instead of
echo $jobviewfeedback;
you'd have
echo str_replace('href="/', 'href="http://www.mybuilder.com/', $jobviewfeedback);
I'm working on a site. It contains a lot of comments. When a user click the view page source in any browser, I want to hide or remove the comments from the HTML.
Is this possible? If possible, could someone say a way to achieve it.
Easiest way to hide code from browser and page source, use php comments:
For quick one liner notes:
<?php //Hide this ?>
For blocks of code:
<?php /*
(html code to comment out here)
*/ ?>
Another advantage to using ?php as comments, is they're ...secret... you won't expose comments you want only for your team. Seeeee-cret
At the moment I decided to use php to create html and jquery comments to hide them in view source
like
<input type="submit" value="Submit">
<?php //this is comment regarding input ?>
Possibly it affects performance... but found no other way
Regarding jquery one note.
//$('#upper_level_id0').css('color', 'red');<?php //works ?>
$('#upper_level_id'+index).remove();
In this example $('#upper_level_id'+index).remove(); does not work.
$('#upper_level_id0').css('color', 'red');<?php //works ?>
//$('#upper_level_id0').css('color', 'red');
<?php //works ?>
$('#upper_level_id'+index).remove();
But in this example all works. So conclusion that <?php comment better tos start in new line
Well you cant do that. But before you upload the html files to your server you can minify the source and upload them. But before uploading check if everything is working as expected or not. Try this website.
http://www.willpeavy.com/minifier/
The source view shows the source. You have no control over how the browser will render it.
If you don't want comments to show up when the user of the browser views the source, then don't put them in the source that your server delivers to the browser.
If you have your own webserver, you can use Google's plugin called PageSpeed that is available both for Apache and Nginx, one of it's many features is to remove your comments from the code both html and css.
I think the only workaround would be to open a new browser window and copy the html contents there using javascript - it will be the rendered code already so there you won't have any comments.
But it's rather unlikely that you need this. The simple way is not to output your comments on server side. Now there are a lot of options (output buffering plus minification seems to be the most reasonable).
Jsource view shows the source. You have no control over how the browser will render it.
If you don't want comments to show up when the user of the browser views the source, then don't put them in the source
I'm sending an e-mail newsletter in HTML.
Inside the HTML I have something like
<img height='70' width='70' style='display:block' src='myDomain.com/imageName.png'>
When I open the newsletter with Thunderbird or Outlook, the image is being displayed. However, when I open it with Gmail, no image is shown.
I'm not sure if it's about the proxy that Gmail uses for security reasons or if it's something else. Either way, I'd like to know if anyone ever came across this and if so, how it was solved.
Late to the party but here goes... I have experienced this problem as well and it was solved with the following:
Including the scheme in the src url (using "//" does not work - use full scheme EG: "https://")
Including width and height attributes
Including style="display:block" attribute
Including both alt and title attributes
EG:
<img src="https://static.mydomain.com/images/logo.png" alt="Logo" title="Logo" style="display:block" width="200" height="87" />
For me, the problem was using svg images. I switched them to png and it worked.
Google only allows images which are coming from trusted source .
So I solved this issue by hosting my images in google drive and using its url as source for my images.
Example:
with:
http://drive.google.com/uc?export=view&id=FILEID'>
to form URL please refer here.
Please also check your encoding: Google encodes spaces as + instead of %20. This may result in an invalid image link.
You might have them turned off in your gmail settings, heres the link to change them https://support.google.com/mail/answer/145919?hl=en
Also gmail may be blocking the images thinking they are suspicious.
from the link above.
How Gmail makes images safe
Some senders try to use externally linked images in harmful ways, but
Gmail takes action to ensure that images are loaded safely. Gmail
serves all images through Google’s image proxy servers and transcodes
them before delivery to protect you in the following ways:
Senders can’t use image loading to get information like your IP
address or location. Senders can’t set or read cookies in your
browser. Gmail checks your images for known viruses or malware. In
some cases, senders may be able to know whether an individual has
opened a message with unique image links. As always, Gmail scans every
message for suspicious content and if Gmail considers a sender or
message potentially suspicious, images won’t be displayed and you’ll
be asked whether you want to see the images.
Try to add title and alt properties to your image.... Gmail and some others blocks images without some attributes.. and it is also a logic to include your email to be read as spam.
I noticed that Google was stripping the src attribute from my img tags. I tried every answer on this page - with no luck.
What finally worked for me was replacing img tags with divs that have background images. For example, instead of:
<img style="height: 24px; width: 24px; display: block;" src="IMAGE SOURCE"/>
I replaced it with:
<div style="height: 24px; width: 24px; display: block; background: url(IMAGE SOURCE); background-size: contain;"></div>
Hope this helps others who spent way too long pulling their hair out over this.
In addition to what was said by Howard
You have to keep in mind that Google encodes spaces as +
To avoid this, the ulr must be encoded in RFC 3986, which means spaces encoded at %20, for example:
https://example.com/My Folder/image 1.jpg
to
https://example.com/My%20Folder/image%201.jpg
I had the same issue and for me it was because I was using an SVG image, once I changed to a JPG or PNG, it worked. Maybe this can assist someone who will come across the same issue. It seems Gmail doesn't support SVG images.
HTTP or HTTPS should be full address
background-image: url(http://fulladdress.com/ca/1/product_assets/T/C/X/M/K/NMTCXMK_mu.jpg)
var mailOptions = {
from: 'fulladdress#gmail.com',
to: emails,
subject: 'i super another ma node mailer cool test',
text: 'That was easy!',
html: '<div style="background-image: url(http://fulladdress.com/ca/1/product_assets/T/C/X/M/K/NMTCXMK_mu.jpg);width:500px;height:500px">ascfas</div>'
};
I know Gmail already fix all the problem above, the alt and stuff now.
And this is unrelated to the question but probably someone experiences the same as me.
So my web designer use "image" tag instead of "img", but the symptom was the same. It works on outlook but not Gmail.
It takes me an hour to realize. Sigh, such a waste of time.
So make sure the tag is "img" not "image" as well.
My issue was similar.
This is what my experience has been on testing the IMG tag on gmail
(assuming most of the organization's would have a dev qa and prod server.)
I had to send emails to customers on their personal email id's and we could see that gmail would add something of its own like following to src attribute of img tag. Now when we were sending these images from our dev environment they would never render on gmail and we were always curious why?
https://ci7.googleusercontent.com/proxy/AEF54znasdUhUYhuHuHuhHkHfT7u2w5zsOnWJ7k1MwrKe8pP69hY9W9eo8_n6-tW0KdSIaG4qaBEbcXue74nbVBysdfqweAsNNmmmJyTB-JQzcgn1j=s0-d-e2-ft#https://www.prodserver.com/Folder1/Images/OurImage.PNG
so an image sent to my gmail id as following never worked for me
<img src="https://ci7.googleuser....Blah.Blah..https://devserver.com/Folder1/Images/OurImage.PNG">
and our dev server we can't render this image by hitting following URL on Chrome(or any browser).
https://www.devserver.com/folder1/folder2/myactualimage.jpg
now as long as the src has www on it worked all the time and we didnt had to add any other attributes.
<img src="https://www.**prodserver**.com/folder1/folder2/myactualimage.jpg">
I was using Cloudflare. As soon as I disabled the proxy for my host's website IP address images in Gmail appeared immediately.
I have now added a new firewall rule to allow requests where the URI contains 'googleimageproxy' and everything is working fine.
I am even later to this party, but after spending about 2 hours trying everything imaginable and not having any luck, I finally realized it will work if I upload the pics to GOOGLE PHOTOS instead of GOOGLE DRIVE. Then I can right-click on the pic, copy the address, paste it in, and it works beautifully.
In backend i created endpoint for showing images. Laravel code looks like:
public function getImage($name)
{
return response()->file(base_path() . '/resources/img/' . $name . '.png');
}
Then in my html email template i created div with background-image.
<div style='background: url("https://mysite1.com/api/v1/get_image/logo")'></div>
And it's works for me.
I tried another image from internet which url starts https://
it worked on gmail and outlook.
get your images from domain which has SSL.
For me, the problem was using images name as equity investments.png . I switched them to equity_investments.png and it worked.
Not working :-
<img src="https://xxxxxxx.com/webinar_images/equity investments.png" alt="" />
Working :-
<img src="https://xxxxxx.com/webinar_images/equity_investments.png" alt="" />
I tried all the suggestions this thread (setting width, height, title, full url, etc). The final fix for me was switching from SVG to PNG did the trick for me.
I then tried removing all the other extra decorators (title, display block), and it still worked as long as I left the image type as PNG. So, PNG seems to be the only required change.
This is how I am adding image tag under div
<img src='/files/images/remove.gif' border='0' " +
" onClick='function(\"" + url + "\");' />";
When I open my page in Firefox, everything works fine and here the HTML gets generated in FF
<div class="myclass"><img border="0" onclick="myfunction("http://127.0.0.1:8080/abc/attachments/1d28bc6b-f637-426f-8bca-e27f1c6f2ed9/debug.txt");" src="/files/images/remove.gif">
</div>
But in Chrome HTML gets generated like this
<div class="myclass"><img src="/files/images/remove.gif" border="0" onclick="myfunction(" http:="" 127.0.0.1:8080="" abc="" attachments="" 1d28bc6b-f637-426f-8bca-e27f1c6f2ed9="" debug.txt");"="">
</div>
See the url it add extra quotes and = sign.
Can anyone please help me to understand what's wrong here, any workaround/solution for this problem?
Thanks.
Well, at first, it looks like a bug in your script that emits the contents of the onclick. But then, it'd show up also in other browsers..
However, let's try from this view and assume it is a bug in your code, not Chrome.
Is the onclick generated by JS code, or on the server? If on JS, then please show us the code that generated and set that onclick handler, just to be sure it is correct.
OTOH, if it is generated on the server (ie. PHP, ASP, Ruby, ..), then have you tried peeking what exactly is sent over the wire? Open Chrome's DeveloperTools, go to "network" and refresh the page. Then watch the 'responses' and check if the HTML code embedded in them is correct. If it is incorrect, then look for a bug in the serverside scripts. If HTML seen in responses is correct, then indeed it is the browser.
If this is the latter case - the fact that HTMLInspector shows you the tag/link as damaged, it does not mean it has to malfunction. The Inspector is only a software too, so it may have some bugs in parsing/displaying - but the HTML tag may be correct and work properly. I've seen similar mis-displays a couple of times with various URLs before, but the links always worked properly. Try opening the ChromeConsole and $jquerying the URL out of that onclick. It might happen that you'll get the correct result - in that case, that's just presentation bug and the click/link should work properly - so ignore it or report to Google as a bug. Were the obtained URL incorrect, I'd double- or triplecheck the HTML in Network/Response to ensure that it really really as properly formatted, and then I'd call it a bug and try to work it around - i.e. by setting it via JS in onload, etc..
You are using some server infrastructure in between that is not pure HTML or JS, so we can't help properly. You have onClick (looks like .net), +" " + in the middle, which is not pure HTML.
I created a replication here: http://jsbin.com/ubacak/latest Note, I changed your code and just had it as pure js + html and all is fine.
I have a couple of twitter-powered news aggregation website. I have been planning to add images from articles that I find on twitter.
If I download the page and extract image using <img> tag, I get a bunch of images; not all of them relevant to the article. For example, images of button, icons, ads etc are captured. How do I extract the image accompanying the article? I know there is a solution -- Facebook link sharer does this pretty well.
Mithun
Duplicate of : How to find and extract "main" image in website
Download all images from the page,
blacklist all images coming from an ad server.
then find some heuristic which will get you the correct image...
I think something like:
Biggest resolution += 5pts
Biggest filesize += 10 pts
Jpeg += 2 pts
then take the image with the most points and throw the rest away
Probably works for majority of sites.
(Would require some fiddling with the heuristics though)
It's been a long time. But this may help next time.
You can use this API https://urlmeta.org/
It's very simple to use and result is the best we need.
example for using API:
<?php
$url = "http://timesofindia.indiatimes.com/business/india-business/Raghuram-Rajan-not-fit-to-be-RBI-Governor-Subramanian-Swamy/articleshow/52236298.cms";
$result = file_get_contents('https://api.urlmeta.org/?url='.$url);
$array = json_decode($result,1);
print_r($array['meta']['image']);
?>
And that's the result you needed.
I kind of came-up with a solution that is a bit hacky but works for me. Here is what I do to get thumbnails.
Say the headline of the page I find is "this is a headline"
I use this as a query to the Google Image API and then extract the first thumbnail I find.
It actually works quite well for a majority of the cases. Check it out for yourself http://cricketfresh.in
Mithun
ps: I think this is a good answer. Will give credit to someone who comes with a more elegant answer.
I would guess that Facebook has a link extractor for the various sites it supports. Something like id="content" -> img (1st).
Guess I am wrong. Seems that Facebook uses the Open Graph Protocol to define which image (og:image) and which metadata to use.