Access files outside public_html folder ?

ttmt · February 7, 2012

Hi all

I have this demo here to explain the problem I have

http://www.ttmt.org.uk/

This a app to test font by selecting the text, weight and size.

The image is created by capturing the values with jQuery

and passing them to a PHP script that uses the GD Library.

At the moment the fonts are contained in a folder in the public_html folder.

My problem is the fonts in the this location could be downloaded by anyone simple by viewing the html

and - THE FONTS HAVE TO BE SAFE AND CAN'T BE DOWNLOADABLE.

I was thinking I could have the fonts outside the public_html folder so no one could download them but I can't

get this to work.

Is there anyway I could contain the fonts outside the public_html folder and still use them?

Is there any other way I can have the fonts files not downloadable but this useable by the script?

I wouldn't mind having the fonts inside the public_html folder in a folder with a long or usual name so it can't be guessed.

If I did this is there a way to hide or conceal the name of the folder in the code?

Any help would be greatly appreciated.

t.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="robots" content="noindex, nofollow" />
  
<title></title>
<style type="text/css" media="screen">
 *{margin:0;padding:0;}
 #content{margin:20px;}
 form{margin:0 0 20px 0;}
 #inputText{width:300px;}
 #selectText,#inputText{width:200px;}
</style>
  
</head>

<body>
  
  <div id="content">
    
    <form method="" action="" id="testerForm">
      
      <select name="text" id="selectText" class="input">
        <option value="">Text</option>
        <option value="0123456789">0123456789</option>
        <option value="The quick brown fox jumps over the lazy dog">The quick brown fox jumps over the lazy dog</option>
        <option value="Fjord Nymphs XV beg quick waltz">Fjord Nymphs XV beg quick waltz</option>
      </select>
      
      <select name="size" id="selectWeight" class="input">
        <option value="">Weight</option>
        <option value="CORBEL.TTF">Regular</option>
        <option value="CORBELI.TTF">Italic</option>
        <option value="CORBELB.TTF">Bold</option>
        <option value="CORBELZ.TTF">Bold Italic</option>
      </select>
      
      <select name="size" id="selectSize" class="input">
        <option value="">Size</option>
        <option value="40">40</option>
        <option value="60">60</option>
        <option value="84">84</option>
        <option value="108">108</option>
      </select> 
      
    </form>
    
    <div class="fontTester">
    
    </div>  
    
  </div><!-- #content -->
  
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  
  <script type="text/javascript" charset="utf-8">
  
    var fontfile = "fonts/corbel/"
    
    window.theText = "Test Text";
    window.theSize = 50;
    window.theFont = fontfile+"CORBELB.TTF";
    
    text = window.theText;
    size = window.theSize;
    font = window.theFont;
  
    dataString = 'text=' + text + '&size=' + size + '&font=' + font;
    $(".fontTester").find("img").remove();	
    $(".fontTester").html("<img src='sample.php?" + dataString + "' class='fontTesterImg' />");
    $(".fontTesterImg").hide().fadeIn(800);
  
    $('.input').change(function(){

      if($('#selectText').val() != ''){
    	  text = $('#selectText').val();
      }else{
    		text = window.theText;
    	}
    	if($('#selectSize').val() != ''){
    		size = $('#selectSize').val();
      }else{
    		size = window.theSize;
    	}
    	if($('#selectWeight').val() != ''){
    		var fontVal = $('#selectWeight').val();
    		font = fontfile + fontVal;
      }else{
    		font = window.theFont;
    	}
      dataString = 'text=' + text + '&size=' + size + '&font=' + font;
      $(".fontTester").find("img").remove();	
      $(".fontTester").html("<img src='sample.php?" + dataString + "' class='fontTesterImg' />");
      $(".fontTesterImg").hide().fadeIn(800);
    })
    

  </script>  
</body>
</html>

kicken · February 7, 2012

Your PHP script can access the files outside the document root just fine. You just need to make sure the path to them is correct. It may be easiest to have your page/js have only the font's filename and keep the path static in the PHP file.

So you end up with a URL like:

sample.php?font=CORBELB.TTF

And in your PHP you would have something like:

<?php

define('FONT_PATH', '/the/absolute/path/to/the/fonts/');

$fontFile = FONT_PATH.$_GET['font'];

ttmt · February 7, 2012

Thanks for replying kicken

I realise I can access the file outside the public_html with PHP but can I use

that with my code where I am using jQuery to call the sample.php.

dataString = 'text=' + text + '&size=' + size + '&font=' + font;

$(".fontTester").html("<img src='sample.php?" + dataString + "' class='fontTesterImg' />");

Can I use the PHP variable in the jQuery code.

Sorry if I being really stupid here but I've been trying to working this out for days now and

I'm going round in circles.

ttmt · February 7, 2012

If I created the link to the fonts folder

<?php
  $fontsPath = "/fonts";
?>

Could then use it in the jquery

font = fontsPath + fontVal;

//

dataString = 'text=' + text + '&size=' + size + '&font=' + font;

//

$(".fontTester").html("<img src='sample.php?" + dataString + "' class='fontTesterImg' />");

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="robots" content="noindex, nofollow" />
  
  
<title></title>
<style type="text/css" media="screen">
 *{margin:0;padding:0;}
 #content{margin:20px;}
 form{margin:0 0 20px 0;}
 #inputText{width:300px;}
 #selectText,#inputText{width:200px;}
</style>
  
</head>

<body>
  
  <?php
    
    $fontsPath = "/fonts";
    
  ?>
  
  
  <div id="content">
    
    <form method="" action="" id="testerForm">
      
      <select name="text" id="selectText" class="input">
        <option value="">Text</option>
        <option value="0123456789">0123456789</option>
        <option value="The quick brown fox jumps over the lazy dog">The quick brown fox jumps over the lazy dog</option>
        <option value="Fjord Nymphs XV beg quick waltz">Fjord Nymphs XV beg quick waltz</option>
      </select>
      
      <select name="size" id="selectWeight" class="input">
        <option value="">Weight</option>
        <option value="CORBEL.TTF">Regular</option>
        <option value="CORBELI.TTF">Italic</option>
        <option value="CORBELB.TTF">Bold</option>
        <option value="CORBELZ.TTF">Bold Italic</option>
      </select>
      
      <select name="size" id="selectSize" class="input">
        <option value="">Size</option>
        <option value="40">40</option>
        <option value="60">60</option>
        <option value="84">84</option>
        <option value="108">108</option>
      </select> 
      
    </form>
    
    <div class="fontTester">
    
    </div>  
    
  </div><!-- #content -->
  
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  
  <script type="text/javascript" charset="utf-8">
  
    var fontfile = "fonts/corbel/"
    
    window.theText = "Test Text";
    window.theSize = 50;
    window.theFont = fontsPath+"CORBELB.TTF";
    
    text = window.theText;
    size = window.theSize;
    font = window.theFont;
  
    dataString = 'text=' + text + '&size=' + size + '&font=' + font;
    $(".fontTester").find("img").remove();	
    $(".fontTester").html("<img src='sample.php?" + dataString + "' class='fontTesterImg' />");
    $(".fontTesterImg").hide().fadeIn(800);
  
    $('.input').change(function(){

      if($('#selectText').val() != ''){
    	  text = $('#selectText').val();
      }else{
    		text = window.theText;
    	}
    	if($('#selectSize').val() != ''){
    		size = $('#selectSize').val();
      }else{
    		size = window.theSize;
    	}
    	if($('#selectWeight').val() != ''){
    		var fontVal = $('#selectWeight').val();
    		font = fontsPath + fontVal;
      }else{
    		font = window.theFont;
    	}
      dataString = 'text=' + text + '&size=' + size + '&font=' + font;
      $(".fontTester").find("img").remove();	
      $(".fontTester").html("<img src='sample.php?" + dataString + "' class='fontTesterImg' />");
      $(".fontTesterImg").hide().fadeIn(800);
    })
    

  </script>  
</body>
</html>

kicken · February 7, 2012

Your javascript code doesn't matter as it is not the one that needs to access the file. All you need in your JS code is some value that you can pass to the PHP script which represents which file it needs to use. The base filename without any path info should be sufficient.

Sign In

Access files outside public_html folder ?

Recommended Posts

ttmt

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

ttmt

Link to comment

Share on other sites

ttmt

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information