Render .mht files dynamically without load/iframe/embed - javascript

I have .mht files that are stored on a folder on my server. This folder has a rule in .htaccess that only localhost is allowed inside.
I need to render files on my website depending on user actions.
<iframe> and <embed> and jquery .load() won't work as the request doesn't come from localhost.
I'm trying to get the data of the file via a phpscript and an ajax call :
PHP:
$file = htmlentities(filter_var($_GET['url'], FILTER_SANITIZE_STRING), ENT_QUOTES);
$content = file_get_contents(".".$file);
$return = array("content" => $content);
echo json_encode($return);
jQuery:
$.getJSON('queries.php',{q: 'getFile', url: file},
function(data){
$('#file_panel').html(data.content);
}
);
But it only displays the content of the file, it doesn't render it. Any suggestion to get it rendered?

It will not be possible unless you use an <iframe>. Browsers won't parse HTML & MHT within the same page.
Try this,
PHP File
$file = htmlentities(filter_var($_GET['url'], FILTER_SANITIZE_STRING), ENT_QUOTES);
echo file_get_contents(".".$file);
JS
$("#frame").attr("src", "queries.php?url="+file);

Related

PHP web page work with WAMP but fails on GoDaddy

I am developing a web page using HTML, PHP and Javascript. I am using aWAMP server to develop on my local machine. It has one PHP function:
<?php
$file = fopen("Records.txt","r");
$line = fgets($file);
fclose($file);
?>
It has one line of code within the Javascript portion to retrieve $line:
let fullstring = <?php echo json_encode($line); ?>;
It works fine using WAMP. If I view the source I see that the above line is:
let fullstring = "Record1,Record2,Record3,Record4,Record5,Record6";
I then uploaded the file to GoDaddy and it fails. I see this instead:
let fullstring = false;
Anyone know why? Is there a different way to retrieve a PHP variable via Javascript? Eventually I need to change this because the variable $line value should not be exposed to the user.

js: how to hide/crypt the src of the image?

I am looking for a way to hide/crypt the image src.
It is a quiz game and image name contains the solution
ex: <img src="solution.jpg">
Solution would be to encode64 the image, but this is quite heavy solution.
Suggestion does not have be to 100%secure, just avoid showing clearly the "solution.jpg" src
Best solution is to store the file path in database and serve it on request. An example using php would be
HTML
<img src="get-image.php?id=2653" />
PHP
// get image path from database
...
// output
header("Content-type: image/jpeg") // change format accordingly
header('Content-Length: ' . filesize($filepath));
ob_clean();
flush();
readfile($filepath);
die();
I know it's not php question but you can create php script that will read the file based on md5 hash. On the beginning of your main script you save hash in session:
session_start()
$time = array_sum(explode(' ', microtime()));
$_SESSION['hash'] = md5($time);
and in php script that you use for image
<img src="script.php?hash=<MD5 HASH>"/>
you check if $_GET['hash'] is equal to value from session:
session_start();
if (isset($_GET['hash']) && isset($_SESSION['hash']) &&
$_GET['hash'] == $_SESSION['hash']) {
header("Content-type: image/jpeg");
echo file_get_contents('your hidden image.jpg');
}

Downloading files using Header with a JS input

I have a page that has a JavaScript function that uses Post to send a variable to a php file. The problem is, that I am using "header" to download the file and my JS does not open the PHP script in a new page.
When I open the php file in a new page, it does not receive the needed variable from the JS.
I know it sounds confusing, but I hope my code can shed some light on my problem.
The short version is, I am trying to download a file that is selected by a radiobutton. I use JS to check which radiobutton is checked and then send that to my php file. Which then needs to download the file.
Thank you all in advance.
PHP:
<?php
if (isset($_POST['routenumber'])) {
if(!isset($_SESSION)){session_start();}
$routenumber = (isset($_POST['routenumber']) ? $_POST['routenumber'] : null);
$directory = ("Users/".$_SESSION['id']."/SavedRoutes/");
$routes = scandir($directory);
sort($routes);
$route = $routes[$routenumber];
$file =("Users/".$_SESSION['id']."/SavedRoutes/".$route);
header("Content-type: application/gpx+xml");
// header("Content-Disposition: attachment;Filename=".json_encode($route).".gpx");
header("Content-Disposition: attachment;Filename=route.gpx");
readfile($file);
}
?>
JS:
function fuAccountDownloadRoute(){
var i=2;
var SelectedRadio
while (i < routecounter){
var str1='radio';
var str2=JSON.stringify(i);
var result = str1.concat(str2);
if (document.getElementById(result).checked){
SelectedRadio = result.slice(5);
}
i=i+1;
}
$.post('accountPage.php',{routenumber:SelectedRadio});
}
When you open the url: http://localhost/accountPage.php in your browser it makes a GET request. You should change all the $_POST to $_GET in your code if you want to make it possible, and then you can open it like this: http://localhost/accountPage.php?routenumber=3, though it's probably not what you really want.

Remove XML Node With jQuery

I wonder whether someone may be able yo help me please.
I've put together this page which allows users to view a gallery of their uploaded images.
Upon initial upload, the physical images are saved in the following file structure:
UploadedFiles/userid/locationid/image and the details of the image i.e. description etc are saved in an xml file called files.xml which is in the same directory as the physical images.
I'm now working on allowing the user to be able to delete these images.
By way of a deletion icon under each image, I've, admitedly with some help, put together the following which successfully deletes the physical image.
'Deletion Icon Onclick Event'
<script type="text/javascript">
Galleria.ready(function() {
this.$('thumblink').click();
$(".galleria-image").append(
"<span class='btn-delete ui-icon ui-icon-trash'></span>");
$(".btn-delete").live("click", function(){
var img = $(this).closest(".galleria-image").find("img");
// send the AJAX request
$.ajax({
url : 'delete.php',
type : 'post',
data : { image : img.attr('src') },
success : function(){
alert('Deleting image... ');
img.parent().fadeOut('slow');
}
});
return false;
});
});
</script>
Original 'delete.php'
<?php
if (!empty($_POST)) {
$image = $_POST['image'];
if (file_exists($image)) {
unlink($image);
}
}
?>
Updated 'delete.php'
<?php
if (!empty($_POST)) {
$image = $_POST['image'];
if (file_exists($image)) {
unlink($image);
}
}
$doc = new DOMDocument;
$doc->load('files.xml');
$thedocument = $doc->documentElement;
$list = $thedocument->getElementsByTagName('files');
$nodeToRemove = null;
foreach ($list as $domElement){
$attrValue = $domElement->getAttribute('file_name');
if ($attrValue == 'image') {
$nodeToRemove = $domElement;
}
}
if ($nodeToRemove != null)
$thedocument->removeChild($nodeToRemove);
echo $doc->saveXML();
?>
The problem I'm having is deleting the xml node form the xml file. I've provided an extract of the XML file below.
<?xml version="1.0" encoding="utf-8" ?>
- <files>
<file name="stag.jpg" source="stag.jpg" size="21341" originalname="stag.jpg" description="No description provided" userid="1" locationid="1" />
</files>
I've done quite a bit of research about how to go about this and found that jQuery had it's own command i.e. jQuery.remove which I thought would be able to delete the node. Following the brief tutorial I added the following to the end of my 'Onclick Event' script:
var doc = $(files.xml);
doc.find('file_name:src').remove();
Unfortunately, although I don't receive a specific error, the node isn't being deleted from the file. I'm a complete beginner when it comes to XML so perhaps I'm looking at this too simplistically.
I just wondered wheteher someone could perhaps have a look at this please and let me know where I'm going wrong.
Many thanks and regards
This is because JavaScript(JQuery) loads the XML DOM in memory and then when you delete a node,
it gets deleted from the in-memory xml doc(the object).
It wont be removed from the physical XML file.
JS runs in a sandbox Browser environment and cannot alter local files on the system.
and if you are trying to load xml from a remote server then its a very bad idea.
the XML file from remote server is downloaded as temp file and then when you load XML again an in-memory DOM is created and the node is deleted from it.
So in case you want the actual file to be changed,
you will need to use AJAX and send some HTTP request to your server to do the same to the physical file.
UPDATE:
Check this tutorial
http://www.phpeveryday.com/articles/PHP-XML-Removing-Node-P415.html
and try to load the xml file in your delete.php and remove the corresponding node from it and then save this xml back to the original file which will be overwritten.

.innerHTML from .js file?

i want to print all text from .js file to div
document.getElementById('cart-status').innerHTML = "/numberOfcart.js"
You could use jQuery to do something like this:
$.get('/numberOfcart.js', function(data) {
$('#cart-status').text(data);
}
but you are simply loading in the .js file, not running it.
Directly displaying the the contents of js file by JavaScript is not possible (or I don`t know, if somebody knows a way - welcome). So by PHP:
$file = file_get_contents( 'script.js' );
echo "<pre>" . htmlentities ( $file ) . "</pre>";
With an ajax callback to the php script, set to the div.

Categories