I need to follow these steps:
Load an script text encoded base64 using Ajax (multiline included before encode).
Edit and Decode using atob()
Run it like in eval().
But I have some issues:
eval() doesn't works because It can't have line break.
I can't use "dataType=script" in Ajax because when dataType is script I just can't edit it before run.
I've tried to remove all comments and line breaks from loaded codes but it doesn't works. I got some errors and I things it's not the best way to do it.
I've tried:
var F = new Function(atob(data));
F();
But it doesn't works.
The only way to works was:
var script = "<script type='text/javascript'> " + atob(data) + " </script>";
$('body').append(script);
But I can't use that because my project will load a lot of requests and it isn't the ideal way since will add a lot of script tags in the DOM. In addition It is not synced with my main codes.
Sorry for my bad grammar, English is not my main language :)
I'm developing a fully ajax frontend based wordpress theme based on user comments and I wanted to add a rich text editor (Froala). And as we all know that; that brings a lot of security problems.
I don't want to use HTML Purifier library, it's too heavy.
I guess I found a good way to sanitize all of my data sent from the users but I'm stuck.
My sanitize opinion->
On submit form -> get all HTML data and convert it to bbcode like style with javascript.
var htmlToBBCode = function(html) {
...
html = html.replace(/<a(.*?)href="(.*?)"(.*?)>(.*?)<\/a>/gi, "[url url=$2 kelime=$4]");
html = html.replace(/<textarea(.*?)>(.*?)<\/textarea>/gmi, "\[code]$2\[\/code]");
html = html.replace(/<b>/gi, "[b]");
html = html.replace(/<\/b>/gi, "[/b]");
html = html.replace(/<img(.*?)width="(.*?)"(.*?)height="(.*?)"(.*?)src="(.*?)"(.*?)>/gi, "[img weight=$2 height=$4 src=$6]");
...
}
let editor = new FroalaEditor('#entry_html_input', {}, function () {
});
var bbcode = htmlToBBCode(editor.html.get());
On the server side -> sanitize_text_field() all $_POST["comment"] (So I can protect against ppl who sent a dirty xss code via console - ajax)
$clean_comment = sanitize_textarea_field(nl2br(wp_unslash($_POST["comment"])));
On the server side -> Use add_shortcode() function of wordpress.
function img_shortcode($atts, $content)
{
$weight = intval($atts["weight"]);
$height = intval($atts["height"]);
$src = esc_url($atts["src"])
$return = '<center><img src="' . $src . '" width="'.$weight.'" height="'.$height.'" rel="nofollow"/></center>';
return $return;
}
add_shortcode('img', 'img_shortcode');
function b_shortcode($atts, $content)
{
$bold_text = sanitize_text_field($content);
return '<b>'.$bold_text.'</b>';
}
add_shortcode('b', 'b_shortcode');
And it works perfect! Correct if I'm wrong, this is a fully secure way against XSS. I know all paramaters passed to shortcode and I know how to deal with them. If they bypasses bbcode converter there is a sanitize_text_field(); when $_POST arrived.
But this is where I'm stuck...
When editor sends a HTML like this:
<p>
<strong>
sdfsfsdfsfd
<img src="https://i.ibb.co/9bxPvhM/86a9d5b8bc498dc5eb3689f0b983a5a7a3f1c1bb.jpg" style="width: 300px;" class="fr-fic fr-dib">
qwrrwqqrwqwrrqw
</strong>
</p>
Yeah bbconverter trying to this:
[b]
sdfsfsdfsfd
[img]
https:/i.ibb.co/9bxPvhM/86a9d5b8bc498dc5eb3689f0b983a5a7a3f1c1bb.jpg
[/img]
qwrrwqqrwqwrrqw
[/b]
And sanitize_text_field(); inside b_shortcode function compelety killing-removing the image...
This is only a simple example. As you can imagine this is happening with "i","sub","sup" tags either.
I tried solutions like this:
html = html.replace(/<strong>(.*?)<img(.*?)src="(.*?)"(.*?)style="(.*?)"(.*?)>(.*?)<\/strong>/gi, "[bold_image_mixed text_before=$1 text_after=$7 img_url=$3 img_width=$5]");
And yeah this is works. But there are so many tags and combinations that can broke my image or my youtube video (iframe) with those tags.
How can I prevent that?
Whats your thought about my way to sanitize html input?
I hope somebody can help me...
God! I just figured it out!
function b_shortcode($atts, $content)
{
$bold_text = sanitize_text_field($content);
return '<b>'.$bold_text.'</b>';
}
add_shortcode('b', 'b_shortcode');
If I change this, to this ->
function b_shortcode($atts, $content)
{
$bold_text = sanitize_text_field($content);
return '<b>'.do_shortcode($bold_text).'</b>';
}
add_shortcode('b', 'b_shortcode');
So if I adds do_shortcode() to $bold_text; it applies other shortcode functions to this string. If there is no other shortcode values matches; it returns plain text!
But my other question is still up...
Is this a secure way to stop XSS?
I am having a weird problem with a system that I am making. I am attempting to create a system to upload files to a server. I do not have direct file write privileges, and HTTP POST multipart/form-data file uploads do not work. I unfortunately do not have direct access to the server.
My solution is to use jQuery's $.ajax function to upload the file via HTTP PUT, then read it in from STDIN in PHP on the server, and upload the contents to a different location via FTP.
Everything appears to work, however somewhere along the line, extra bytes are being added. On the client, Windows claims that the file (I am testing with my website's favicon.ico file) is 7358 bytes. Once I read in the file using a standard Javascript FileReader object, it appears to be only 7311 bytes. Then, I successfully PUT it to a PHP script on the server, which claims that it read 10890 bytes, which FileZilla agrees with when I check the dump folder over FTP.
Here is my Javascript code to upload (jQuery 1.11.3 is included, and file_input is <input type="file" id="file_input"/>:
function upload(){
console.log("upload");
var f = file_input.files[0];
var r = new FileReader();
r.onload = function(event){
var d = r.result;
console.log("data loaded");
console.log(d.length);
$.ajax({
url: "upload.php?name="+encodeURIComponent(f.name)+"&mime="+encodeURIComponent(f.mime),
context: document.body,
method: "PUT",
contentType: "application/octet-stream",
data: d
}).done(function(data){
console.log("done");
console.log(data);
});
};
r.onerror = function(event){
alert("ERROR READING FILE!\nCode " + event.target.error.code);
};
r.readAsText(f);
console.log("initiated");
}
As you can see, the name and MIME type are included via the GET query string.
Here is my PHP that accepts the upload (part of upload.php):
if(strtoupper($_SERVER['REQUEST_METHOD'])=="PUT"){
echo "uploading\n";
echo "connected\n";
var_dump($_POST);
echo "x";
$file=fopen("php://input","r");
var_dump($file);
$x="";
while($byte=fgetc($file)!==false){
$x.=$byte;
}
echo strlen($x);
echo "\n";
$ftp=fopen('ftp://user:pass#example.com/admin/fs/upload/'.uniqid('',true),'w');
var_dump($ftp);
fwrite($ftp,$x);
fclose($ftp);
echo "done\n";
}
I examined the files in notepad, and the majority of the file appeared to be unchanged (there weren't any HTTP headers or anything), however the new file refused to open in any image viewer (the original would). Based on the differences in the files - only some parts are changes, and they are changed to what appear to be random non-visual characters - I would guess that it has something to do with a character encoding discrepancy. Any ideas would be appreciated.
Thanks,
MagikM18
EDIT
My server is Apache/2.4.6 and running on x86_64-redhat-linux-gnu (according to phpinfo()).
Also, I tested it with a text-based file (a PHP script) and it worked just fine - it must be something to do with the file's binary content.
For binary files (i.e. ain't text), you can try appending b to the flags of fopen:
fopen("php://input","rb");
/*
...
*/
$ftp=fopen('ftp://user:pass#example.com/admin/fs/upload/'.uniqid('',true),'wb');
Edit
You have to send files as binary too, in addition to receiving the stream. See the link in comments.
I'm looking to run this bit of PHP within a text/javascript environment. The point is to display a description for certain media files within the Jplayer Playlister. So how can I run this within a text/javascript environment? If you need an example of the Playerlister working fine, and then breaking upon implementation of the PHP, I can provide that.
Here's the PHP:
// CONFIGURE THESE VARIABLES:
// actual place where your mp3s live on your server's filesystem. TRAILING SLASH REQ'D.
$musicDirectory="myServerPathHere";
// corresponding web URL for accessing the music directory. TRAILING SLASH REQ'D.
$musicURL="myURLhere";
// step through each item...
$fileDir = opendir($musicDirectory) or die ($php_errormsg);
while (false !== ($thisFile = readdir($fileDir))) // step through music directory
{
$thisFilePath = $musicDirectory . $thisFile;
if (is_file($thisFilePath) && strrchr ($thisFilePath, '.') == ".mp3") // not . or .., ends in .mp3
{
// only include files that have a corresponding .txt file
$thisTextPath = substr_replace($thisFilePath, ".txt", (strlen($thisFilePath) - 4));
if (is_file($thisTextPath))
{
$myFullURL=$musicURL . $thisFile;
$myFileSize=filesize($thisFilePath);
$textContents = file($thisTextPath);
foreach ($textContents as $thisLine) echo htmlspecialchars($thisLine) . "\n";
}
}
}
closedir($fileDir);
It's possible I don't fully understand what you're asking, so forgive me if that is the case, but what you seem to be asking is how to run PHP client side.
The simple answer is you can't.
PHP is a server-side language. To accomplish what you're trying to do you need to pass some data from PHP to your javascript.
This has always been a bit of a tricky thing to do for me. I usually resort to setting my variables via an on-page <script> tag like this:
<script>
var myJSVar = <?= $myPHPVar ?>
</script>
I've also used a simple JS object to configure a later script using this same method. There are also some neat tools that enable you to create JSON objects from your PHP objects and pass that to the client side. This makes things pretty smooth, and I recommend you check it out on your own.
I have a simple html file in which there's javascript code referring to google charts.
The code I use is this (I'll show the important part):
function drawChart(){
var data = google.visualization
.arrayToDataTable([ ['Label', 'Value'],['Temp', 22.75],]);
// etc...
}
I use a bash command (sed) to replace that 22.75 value with a new one from the last line of a .txt file. However, this throws some errors which I haven't been able to neither correct nor ever identify.
So is there any javascript code that takes that file, extracts the last value and simply displays it on the right place of the code?
UPDATE:
Sorry for the lack of info in this question, I really appreciate all the people that took the time on reading my question. I'll try to fill with more information in the next minutes.
I am able to extract the last line of the .txt file, extract the value on the right part of the '-' symbol and store it in a variable. Then that value is taken to update the html file with a sed command. The error comes when the value is updated but with no value. I guess that happends due to a failed record of temperature in the txt file, then the extracted value is a null. Finally is the html fiel with javascrit code happens to be like this:
(...)['Temp', ],]);
Then the updater can't update the value since due to the way that sed command is written I guess there's no way that it can detect a no-number-value in there. So the html remains without a value all the time.
TXT File structure:
(...)
20:25:03-23.312
20:26:02-23.312
20:27:03-23.375
20:28:03-23.375
20:29:02-23.375
20:30:02-23.312
Bash script:
# (...code...)
lastRecord=`cat /home/pi/scripts/temp_control/logs/"$today".log | awk 'END{print}'`
function rightNow {
lastTemp=`echo $lastRecord | cut -d'-' -f2`
timeOfTemp=`echo $lastRecord | cut -d'-' -f1` # Not used yet
#Command used to update
sed -i "s/['Temp', [0-9]\{1,2\}.[0-9]\{1,3\}]/$lastTemp]/" /var/www/rightnow.html
}
rightNow
You cud get your file just like any other ajax request.
Using javascript
var request = new XMLHttpRequest();
request.open('GET', 'public_path_to_file.txt', false);
request.send();
var textFileContent = request.responseText
Using jQuery
var textFileContent;
$.get('public_path_to_file.txt', function(data) {
textFileContent = data;
});
Whats left is to get the right part from textFileContent. Dependent of the structure of the file we can do this in different ways. Without an example file you are on your own but here is some examples.
If you need the last line
var lines = textFileContent.split("\n");
var lastLine = lines[lines.length - 1];
If you need to use regex
var regex = //* some regex to get your content*//gm;
var result = regex.exec(textFileContent);
// result should now the content who matches your regex
First I'll assume that you ultimately want to read a local file with your browser and your current workflow is something like a local 'bash-script' that
first updates/modifies an inline piece of javascript (inside a locally stored html
file) with the last occurring value retrieved from a local txt-file (using sed)
opens the (just modified html-) file (via commandline) inside a common browser.
Then I assume the sed-route once worked but now doesn't work anymore (probably because the html file has changed?) and now you'd like the inline javascript (in the html file) to fetch that value from the textfile itself and subsequently use it (thus without the need for the 'bash-script'/sed solution.
Thus, the answer (based on above assumptions) to your final question: 'is there any javascript code that takes that file, extracts the last value and simply displays it on the right place of the code?', depends on your final requirement:
are you ok with a file-input where you select the text-file every time you view the html-file?
If your answer is YES, then, (depending on the browser you use) you can read a local file (and work your magic on it's contents).
In modern browsers, using the File API (which was added to the DOM in HTML5) it's now possible for web content to ask the user to select local files, then read the contents of those files.
For example, using FireFox's 'FileReader' you could do:
html:
<input type="file" id="fileinput" multiple />
javascript:
function readAllFiles(evt){
var files = evt.target.files, i = 0, r, f;
if(files){
for(; f = files[i++]; ){
r = new FileReader();
r.onload = (function(f){
return function(e){
alert(e.target.result);
};
})(f);
r.readAsText(f);
}
} else {
alert("Error loading files");
}
}
document.getElementById('fileinput')
.addEventListener('change', readAllFiles, false);
Note that for accessing local files in Chrome you must start Chrome with this switch: chrome --disable-web-security
However,
if the answer is NO (so you want to specify the file, and more importantly it's path, inside the 'code', so you don't have to select the text-file every time your local app runs) then you (usually) can't (because you can't get/set the path, thank the great maker)...
Unless you choose a specific older/unpatched browser (specifically for this task) where you know of a (hack) way to do this anyway (like the IE xml vulnerability or the XMLHTTP vulnerability or etc... you get the picture..).
Some alternative solutions (that don't require you to select the correct textfile over and over again)
Setup a fullblown web (LAMP) server (to use the XMLHttpRequest way as used in aross answer, but this might feel like shooting at a mosquito with a cannon..)
Explore different script languages (but effectively still do the same as your now broken sed-solution)
Combine 1 and 2, choosing from php (the latest version has a small webserver included, you might start/stop it when needed (even in the bash-script workflow) OR using node.js (which is 'javascript' and where you can program/control a small task-specific server in just a couple of lines).
Hope this helps!
Update:
Based on your updated question, comments and request for recommendation, I'd like to suggest to use PHP to dynamically fetch the value from your log txt file and have it generate your html code with inline javascript on the fly (every time you visit the page).
The browser will never see the php code, only what php inserted to your page (in this example the last found value or 0).
You'd rename the rightnow.html file to rightnow.php and modify it (something like) this:
<!DOCTYPE html>
<html><head>
<!-- your header code -->
<script type="text/javascript">
//parts of your javascript
<?php // start php script
$logFile= '/pathToYour/logFile.log'; // <-Modify
if( $fp= #fopen($logFile, "r") ){ // if logfile succesfully opened,
fseek($fp, -30, SEEK_END); // set pointer 30 chars from EOF
$val= array_pop(explode("-", rtrim(fread($fp, 30)))); //get last value
fclose($fp); // close file
}
?> // end php script
function drawChart(){
var data=google.visualization
.arrayToDataTable([ ['Label', 'Value'],
['Temp', <?php echo $val? $val : "0"; ?>],
]); // ^php above inserts value or 0
// etc...
}
//parts of your javascript
</script>
</head><body>
<!-- your body code -->
</body></html>
Note that fopen in combination with setting the filepointer via fseek and sequentially fread-ing from the pointer to EOF does not load the complete logfile (60min * 24hour=1440 lines of 16 bytes=22.5kB at the end of the day) into memory (good for this purpose), but only the last 30 chars (as in this example).
The variable to your logfile and path must still be modified to your situation (I don't know the format of your $today variable).
Depending on your further needs you might want to perform some extra checks/logic on the array of values that explode returns (instead of popping the last value). Or what about modifying the html a little so you could also include the last temperature's time reading, etc. (But this tested piece of code should get you started and explains the procedure of going the php way).
Update:
Since you have chosen to place the last known value of your logfile as in textfile placed inside your public www-root (with a bash script I assume, every minute of the day?), you can now indeed go the 'ajax' way, as answered by aross!
However I want to hint that the code/solutions in all current answers here could be mixed (since you now also have ajax working): instead of ajax-ing (loading) a txt file, you could have php fetch and send this value to the browser on-the-fly/on-demand!
So, instead of requesting http://url_to_my_rpi/file_to_download.txt, you could request http://url_to_my_rpi/read_last_temperature.PHP which should fetch the last known value out of the log-file (set proper security/access) and send it to the browser (set proper headers), just like your text-file did. You wouldn't have to change anything in the html/javascript except the url you request.
The advantage would be (depending on how your current bash-scripts works) that your PI now only does this 'work' (of getting the last value of your logfile) when you are viewing your monitor-page. And that you are not writing that file in your www-root every minute of every day (as I suspect).
The solution achieved, finally, was like this:
I did it with a jQuery statement and reusing the javascript code of Google Charts.
First I added javascript and jQuery tags in the html file:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
Then I merged jquery code and javascript code that I had in one script:
<script type='text/javascript'>
// Needed this var so that I could use it in other places of the code
var t;
jQuery.get('http://url_to_my_rpi/file_to_download.txt',function(data){
console.log(data)
t=data;
},'text');
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
t=eval(t);
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Temp', t],]);
// (... more javascript with Google Charts options, display parameters..)
</script>
Finally, and even if it's not listed as the main question, be sure to enable *mod_headers* on your apache and add Header set to apache2.conf file (In my case: /etc/apache2/apache2.conf)
1) Enable the module:
a2enmod headers
2) Add the line on your configuration file
Header set Access-Control-Allow-Origin "*"
3) Restart apache 2
4) In case the 3 steps above didn't work, follow the instrcutions by entering in this website or reinstall apache2.