如果我从 php 回显数据，如何防止将有害数据注入 img src？

Question

A little background of this problem wouldn't hurt I think:
I have a webservice to which I can upload images and then retrieve them by id via an api call. The return value is a link to an actual image on the server. However, that data is easy to substitute if the request is hijacked.

So the problem that arises from this is that you can replace the link with " onerror="alert(whatever); and it would alert the user with 'whatever' because this link is placed into <img src="<?= api/get.php?image_id=x?>" /> becoming <img src="" onerror"alert(whatever);" /> <img src="" onerror"alert(whatever);" /> .

How do I go about preventing that from happening? Is there a way to maybe escape the link before inserting it into the image tag? Or better yet base64 the link?

I have tried and failed using:
1. urlencode()
2. base64_encode()

Any help is appreciated! Thanks!

PS I cannot send base64 encoded images since I need to able to copy image's link easily.

Answer 1

As I was writing this question SO suggested some related topics where I found out that htmlspecialchars() works wonderfully solving this problem. However, this still might not be enough because this only works for my use-case, not every possible one. Please feel free to suggest more solutions.

Answer 2

It sounds like the first problem is you are allowing a user to control the filename. If you are controlling and hosting the uploads, generate a guid and use that to store the file. Removing the ability for users to control the filename removes the chance they can add a " to break out of your <img src" context.

I don't see why urlencode() would fail. As long as a " is displaying as %22 that will prevent that data from breaking out of the attribute context.

You also do need to ensure that <> characters are encoded as well. For this you may want to use htmlentities()