CODEWITHSUNDEEP
javascripthtmlimagejavascript-injection
Mathias Bak
Mathias Bak

Reputation: 5125

Injecting javascript thourgh <img>-tag

I would like to know if it is possible to inject some javascript code through an img-tag. The scenario is that one sets up a html-page like this

<img src="anotherdomain.com/someimage.jpg" />

Anotherdomain is my domain. Is it possible to redirect the call for /someimage.jpg to another file containing som javascript code that is executed when the image is requested?

Upvotes: 14

Views: 7034

Answers (4)

Abass Dev
Abass Dev

Reputation: 1

Here is an advanced way to archive something great and avoid your website images to be used by someone else free without authorization.

First you need need to check if the request to your image is happening on a different domain than your own buy add this code to your .htaccess file at the top level:

 <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^wp-content/uploads/2024/10/Screenshot_20241006_172131_Chrome-1024x436\.png$ /blog/serve-svg.php [L]
 </IfModule>

Now you need to create the server-svg.php file and write the code to send response back as svg including your javascript code that you want to executed like this:

<?php
  // Prevent direct image access
   if (!isset($_SERVER['HTTP_REFERER']) || !strpos($_SERVER['HTTP_REFERER'], 'abassdev.com')) {
     header('Content-Type: image/svg+xml');
     echo '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
     <rect width="100%" height="100%" fill="#f0f0f0"/>
     <text x="50%" y="50%" text-anchor="middle" fill="red" font-size="16">
         Image Access Denied
     </text>
     <script type="text/javascript">
         window.onload = function() {
             var button = document.createElementNS("http://www.w3.org/2000/svg", "rect");
             button.setAttribute("x", "100");
             button.setAttribute("y", "120");
             button.setAttribute("width", "100");
             button.setAttribute("height", "40");
             button.setAttribute("fill", "#007bff");
             button.setAttribute("onclick", "alert(\'Unauthorized Access Detected!\')");
             document.querySelector("svg").appendChild(button);

             var buttonText = document.createElementNS("http://www.w3.org/2000/svg", "text");
             buttonText.setAttribute("x", "150");
             buttonText.setAttribute("y", "145");
             buttonText.setAttribute("text-anchor", "middle");
             buttonText.setAttribute("fill", "white");
             buttonText.textContent = "Warning";
             document.querySelector("svg").appendChild(buttonText);
         }
     </script>
 </svg>';
 exit;
}

Upvotes: 0

broofa
broofa

Reputation: 38132

No. The problem (if you want to call it that) is that the URL in question is interpreted as image data, not as a JS script. So regardless of what it is or how it's redirected, it's not going to get evaluated as JS.

Note: <script> tags work cross-domain, so you should probably just use that.

Upvotes: 1

Michael Berkowski
Michael Berkowski

Reputation: 270637

The browser should not make an attempt to execute code received via an <img> tag as JavaScript. The script would be delivered to the browser, but in its place would be a broken image that could not be displayed.

Browsers will only execute scripts received in a <script> tag or onclick,onmouseover,onmouseout,etc... attributes as a basic security principle

Upvotes: 8

idanzalz
idanzalz

Reputation: 1760

no, all major browser will not accept javascript code at this point

Upvotes: 2

Related Questions