Web Analytics Made Easy -
StatCounter using get query to fetch a css image url - CodingForum

Announcement

Collapse
No announcement yet.

using get query to fetch a css image url

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • using get query to fetch a css image url

    I am developing a project that has css source file with rule set background set to:

    .devLab
    {
    background:url('../?tag=bg');
    }
    when the browser gets and reads this rule it sends a request for the image file at
    the url.

    this is a self processing html/php page.

    Here is the script that intercepts the get query:
    <?php
    require_once('php/imageServer.php');
    require_once('php/imgIndex.php');
    if($_GET['tag'])
    {
    if(file_exists($_path.$_imgList[$_GET['tag']]))
    {
    if($_SERVER['HTTP_REFERER'] !== 'http://localhost/dev_lab_current/lab_51/')
    {
    print 'access denied';
    exit;
    }
    (new _IMG_SERVER(''))->serv($_GET);
    }
    else
    {
    header('HTTP/1.0 404 Not Found');
    exit;
    }
    }
    ?>

    I have been using Firefox for dev browser. But I also have Safari, Chrome and Opera to
    cross check. The only browser which actually DOES display the background tile in the
    browser window is Safari. All the others produce a white background with no network
    related errors

    All are getting the image file data from the _IMG_SERVER instance.
    The developer tools/ network indicates 200 ok and in Firefox the link in the css background rule does
    produce the image in a vignette. BUT, the background tile IS NOT BEING DISPLAYED in the browser
    window. It should be the background tile for the whole page.

    In addition: I have javascript that uses a get url to fetch an image file for an object.style.background rule.
    In this case it DOES work for all browsers.

    So, does anyone here have an idea of why this is happening?

    Thank you for time and attention.

  • #2
    Would you mind sharing a link to a live example?
    Stop solving problems you don’t yet have!

    Comment


    • #3
      unfortunately, my web site is down without a hosting service at this time.
      I could post on some other sites but I don't have any experience doing
      that. I need some time to manage a new hosting service into my budget
      So, this might take a few months.

      Comment


      • #4
        This almost looks like something that should be handled by a rewriteRule, not PHP.
        Walk the dark path, sleep with angels, call the past for help.
        https://cutcodedown.com
        https://medium.com/@deathshadow

        Comment


        • #5
          one thing that may be of interest:
          The Safari I am using is Version 13.1.2 (13609.3.5.1.5)
          which is the version current with MacOS High Sierra.
          The other browsers want to update every time I launch
          them.
          So there must be some recent security issue with loading
          a repeated tile image.

          I tried calling header('X-Content-Type-Options: nosniff');
          with no improvement. But the _IMG_SERVER class method
          serv just calls gd functions. I assume these send the correct
          headers. The php version is 7.1.33

          I also see a listing in the network panel on Firefox that repeats
          the get query for the tile image and has 'insector.js(line number)'
          This is not my javascript source. I presume it is doing a security audit(?)

          This is the code for the _IMG_SERVER serv method:
          public function serv($_a) // $_a will be the $_GET array
          {
          if(!isset(self::$_imgIndex[$_a['tag']]) || !file_exists(self::$_imgDir.self::$_imgIndex[$_a['tag']]))
          {
          header('HTTP/1.0 404 Not Found');
          // edted i added the following and it made no apparent difference
          exit;
          }
          header('Content-Type: image/jpeg');
          header('X-Content-Type-Options: nosniff');
          imagedestroy(imagejpeg(imagecreatefromjpeg(self::$_imgDir.self::$_imgIndex[$_a['tag']])));
          }
          Last edited by anotherJEK; Aug 16, 2021, 06:13 PM.

          Comment


          • #6
            Originally posted by anotherJEK View Post
            unfortunately, my web site is down without a hosting service at this time.
            I could post on some other sites but I don't have any experience doing
            that. I need some time to manage a new hosting service into my budget
            So, this might take a few months.
            You could sign up for some free web hosting temporarily, for testing/demonstration. Alternatively, you can also attach an archive with your files in it to a post here, so we can download and test it on our own local or remote servers.
            Stop solving problems you don’t yet have!

            Comment


            • #7
              As far as a site is concerned, I have a friend that I have been managing a site for.
              I put it on her site and tested it. None of the images fetched with get query loaded.
              I suspect the difference is the https (her remote site) vs http (which my localhost is).

              That also does not bode well for a new hosting service that I might get. It will be serving
              https as well. But maybe I can finagle it so https will process it. Perhaps that is beyond
              the scope of this forum.

              Thank you for time, attention, and response;
              JK

              Comment


              • #8
                I don’t think the transfer protocol has anything to do with it. If you can load a plain image with any protocol you should also be able to do GET requests. Also, if Firefox shows the image in the developer console, it is there; so, it must be something else that prevents it from showing up. I’d be really curious to know what happens. Please put your application in a ZIP file and attach it here (not sure if ZIP is allowed; if not, just change the file extension prior to uploading).
                Stop solving problems you don’t yet have!

                Comment


                • #9
                  It has been a while, something like 3 years. I had a node application that loads the image, video (etc), using a module which services the file request. What causing it to fail is that the browser was requesting a partial download.

                  Dump the request header into a file and see if the request is for a partial download. Look for header.range if it is specified.

                  Comment


                  • #10
                    I got a new hosting service today. I am waiting activation
                    and FTP access and name server addresses. I hope
                    this won't take more than a few days.
                    As soon as I saw that the project wasn't working on
                    my friends site, I took it down. I didn't want to tie her
                    site up with debugging work.

                    In addition I discovered this header in the request headers:
                    Sec-Fetch-Mode no-cors
                    I see on the Mozilla site that Safari doesn't support this
                    header. I am suspecting this may have something to do
                    with why Safari will display the background tile while others
                    (that do support the header) won't.
                    I also tried an alternative jpg tile image with the same result.
                    Last edited by anotherJEK; Aug 17, 2021, 02:53 PM.

                    Comment


                    • #11
                      In the following code the lines that are commented were being run.

                      Apparently the request is sent twice. The first time 'access denied' is returned.
                      I commented the code to disable it and now the background tile DOES display.

                      But this is the code I used to detect if the get query is being appended to the location
                      field url. So I will have to work on it some more.

                      if($_GET['tag'])
                      {
                      if(file_exists($_path.$_imgList[$_GET['tag']]))
                      {
                      //if($_SERVER['HTTP_REFERER'] !== 'http://localhost/dev_lab_current/lab_51/')
                      // {
                      // print 'access denied';
                      // exit;
                      // }
                      (new _IMG_SERVER(''))->serv($_GET);
                      exit;
                      }
                      else
                      {
                      header('HTTP/1.0 404 Not Found');
                      exit;
                      }
                      }

                      THIS WORKS:
                      if($_GET['tag'])
                      {
                      if(file_exists($_path.$_imgList[$_GET['tag']]))
                      {
                      switch($_SERVER['HTTP_REFERER'])
                      {
                      case 'http://localhost/dev_lab_current/lab_51/?src=lab_51&type=css':
                      case 'http://localhost/dev_lab_current/lab_51/':
                      (new _IMG_SERVER(''))->serv($_GET);
                      exit;
                      }
                      print 'access denied';
                      exit;
                      }
                      else
                      {
                      header('HTTP/1.0 404 Not Found');
                      exit;
                      }
                      }
                      BUT it is VERY weird:
                      This version of HTTP_REFERER:
                      'http://localhost/dev_lab_current/lab_51/?src=lab_51&type=css'
                      is from the get query that requested the css source. You can see
                      that that get query doesn't have 'tag' as a variable name in it.

                      I will still post a link to the demo when it is ready.
                      Thank you for time and attention;
                      JK
                      Last edited by anotherJEK; Aug 18, 2021, 01:02 AM. Reason: further relevant developments.

                      Comment


                      • #12
                        If anyone is still following this thread:
                        I have a demo up on a new hosting service;
                        From my experience with my friends web site, under https
                        the demo also did not work on my site, which I have under https
                        Although I was able to struggle my way through it and get all the
                        images to load and display, the screening code I used in my local
                        installation was not working as written.
                        Also I am suspecting that when a user looks at the dev tools panel
                        under inspector and finds a link in an img src or looks at the url
                        value in a css background: url(active link showing the get query used)
                        and clicks the link in the css rule the image still is produced.
                        By my php query handling code it should have caused the string
                        'access denied'. But instead it produces the background tile image.
                        I am suspecting that the browser is using its cache to produce the
                        image.

                        Anyhow; the link is:
                        www.jekillen.com/lab_51

                        Comment


                        • #13
                          Considering that the developer console built into modern browsers can slap that aside, you're really wasting code on a bunch of nothing. If you're worried about the IP rights of images, don't put them online,. Anything else violates the spirit, intent, and implementation of the web.
                          Walk the dark path, sleep with angels, call the past for help.
                          https://cutcodedown.com
                          https://medium.com/@deathshadow

                          Comment


                          • #14
                            If this is your first encounter with Fetch, you’ll likely be surprised by the response Fetch returns. If you console.log the response, you’ll get the following information:

                            Comment


                            • #15
                              Hi there anotherJEK,

                              If anyone is still following this thread:
                              I was following it, until I found this aggravation...
                              Code:
                              window.oncontextmenu = function(e) { return false; };
                              For the life of me, I cannot think why anyone would be
                              using that whilst seeking help from a coding forum.

                              coothead
                              ~ the original bald headed old fart ~

                              Comment

                              Working...
                              X