phpimageechoreadfilecross-origin-resource-policy

If I dont use this code the instagram image is never displayed

The picture is displayed in my website only when I use this code ...

<?php
$remoteImage = "https://scontent-frt3-2.cdninstagram.com/v/t51.2885-19/s150x150/67310557_649773548849427_4130659181743046656_n.jpg?tp=1&_nc_ht=scontent-frt3-2.cdninstagram.com&_nc_ohc=M1hegfYF3_AAX9GkTGH&edm=AAuNW_gBAAAA&ccb=7-4&oh=50ba784cd64600a025031f7fc00740c1&oe=60BAEE93&_nc_sid=498da5";
$imginfo = getimagesize($remoteImage);
header("Content-type: {$imginfo['mime']}");
readfile($remoteImage);
?>

but if use this:

<?php 
$link = "https://scontent-frt3-2.cdninstagram.com/v/t51.2885-19/s150x150/67310557_649773548849427_4130659181743046656_n.jpg?tp=1&_nc_ht=scontent-frt3-2.cdninstagram.com&_nc_ohc=M1hegfYF3_AAX9GkTGH&edm=AAuNW_gBAAAA&ccb=7-4&oh=50ba784cd64600a025031f7fc00740c1&oe=60BAEE93&_nc_sid=498da5";
echo "<img src='$link'>"; 
?>

It shows corrupted image like here: https://i.sstatic.net/LrXRp.png and it happens only with instagram images because the ending of the url is not like xxxx.jpg Please help !

Solution

  • If you had used your browser's console to actually debug the whole thing, you'd have gotten your answer.

    Regarding your variants:

    1. Is downloading the actually image to your server and outputs the binary content.
    2. Is embedding the image by using the img tag, therefore the client will request the image from Instagram's CDN directly.

    The reason why variant 2) isn't working, is a rather simple one:

    Same Origin

    I will just quote Chrome's devtools here:

    To use this resource from a different origin, the server may relax the cross-origin resource policy response header: Cross-Origin-Resource-Policy: same-site Choose this option if the resource and the document are served from the same site. Cross-Origin-Resource-Policy: cross-origin Only choose this option if an arbitrary website including this resource does not impose a security risk.

    And the policy of Instagram's CDN is set to cross-origin-resource-policy: same-origin - which denies requests from other origins. More about this can be found here.

    Examples about what an Origin is (i.e. scheme + host + port) can be found here.