Develop Reference

Getting started with guppy wyswyg javascript plugin

Im trying to use guppy wyswyg javascript plugin for mathematical expressions rendering. I went to its basic example at its webpage https://guppy.js.org/site/examples/basic/, but i cant deploy it at my local xampp proyect.
According to the example, i already set these dependencies (different paths in my proyect):
<link rel="stylesheet" href="localhost/lib/build/guppy-default.min.css">
<script type="text/javascript" src="../../../build/guppy.min.js"></script>
And then this:
Guppy.init(
{
"path":"http://localhost/lib/guppy",
"symbols":"http://localhost/lib/guppy/sym/symbols.json"
}
);
Finally this:
<input type="text" id="myinputtypeelementid" placeholder="Type math here" >
var g1 = new Guppy("myinputtypeelementid");
I just can see this:
Does anybody know what else i need to do?

Issue solved:
It just needed use a <div> tag with the right id instead o a <input> tag. Now it works ! I reply myself in case anybody gets benefit of this issue i faced.

AutoComplete Google Javascript

Hi I am having trouble getting the autocomplete to display like here. My code works on submit and displays the map properly, but does not show results of autocomplete. I am wondering what could be the issue.
Here is my HTML
<div id="floating-panel">
//this is the text field that does not display the autocomplete
<input id="address" placeholder="Enter Starting Location" type="text"/>
<input id="submit" type="button" value="Directions">
</div>
<div id="right-panel"></div>
<div id="map"></div>
Here is my Javascript:
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'));
Here is my call to autocomplete, the API is enabled, I see calls being made on the data, but no results back:
https://maps.googleapis.com/maps/api/js?key=xxx&libraries=places&callback=initMap: {type: external, attributes: {async: true}}

Google maps API has new security changes in its new version, use version 3.0, this works for me:
<script src="https://maps.googleapis.com/maps/api/js?v=3.0&key=YOUR_KEY&libraries=places" async></script>

I'm getting the same thing with very similar code. For me that code was working for months and just today I got a report from a user that the drop down list of locations wasn't showing anymore.
var input = $("input[name='location']");
var formattedAddress = input.next("input[name='formattedLocation']");
var searchBox = new google.maps.places.SearchBox(input[0]);
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
formattedAddress.val('');
return;
}
formattedAddress.val(places[0].formatted_address);
});
I was thinking that maybe we went over our daily quota, but it doesn't seem so from the Google API console. I don't see any errors in the browser console. If I look in developer tools network tab I can see requests going to https://maps.googleapis.com/maps/api/place/js/AutocompletionService.GetQueryPredictions, but the responses seem rather cryptic (ex:/**/xdc._490z0c && xdc._490z0c( [4] ) ) so I can't tell if good data is coming back or not.
I'm wondering if something changed recently on the Google side that I haven't heard about.

My temp solution: I went with the experiential version, https://maps.googleapis.com/maps/api/js?v=3.32 and noticed at the bottom of my HTML there is a tag <div class="pac-container pac-logo hdpi">once you start typing it updates, style this and got fixed. I sent a issue request I am hoping they are going to fix this for the stable version.

https://developers.google.com/maps/documentation/javascript/versions
Specify that you want to use the release version rather than the experimental if you are on the standard plan.

Displaying user uploaded html content - Security Issue

I have a feature where user can upload html file which I then read its content via PHP and send it to the third party API as a string. Now before I send it to the API I want to generate a preview of the HTML they uploaded to the user so they can press Confirm button to send it.
The HTML files should be mostly letter templates but users can modify the html and add some script tags or inject other malicious code that might harm my website while displaying for preview. Is there a way I can avoid this?
I thought about stripping tags but what if they have onclick events within html elements?

Id start with something like this to strip scripts and comments:
$htmlblacklist[] = '#<script[^>]*?>.*?</script>#si'; //bye bye javascript
$htmlblacklist[] = '#<![\s\S]*?--[ \t\n\r]*>#'; //goodbye comments
//now apply blacklist
$value = preg_replace($htmlblacklist, '', $value);
For inline events, you should use DOMDocument, as it understands HTML whereas Regex is shooting in the dark.
In reality, you could use DOMDocument for all of it, and not use Regex at all. Load up the HTML in a DOMDocument object, and iterate through the tree, removing what you want.

Not 100% this will work for you, but it seems that rendering the HTML as an SVG onto a canvas will restrict the contents to within your requirements (no scripts, no loading outside sources).
See more documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas
You might wonder how this can be secure, in light of concerns about
the possibility of reading sensitive data out of the canvas. The
answer is this: this solution relies on the fact that the
implementation of SVG images is very restrictive. SVG images aren't
allowed to load any external resources, for example, even ones that
appear to be from the same domain. Resources such as raster images
(such as JPEG images) or s have to be inlined as data: URIs.
In addition, you can't include script in an SVG image, so there's no
risk of access to the DOM from other scripts, and DOM elements in SVG
images can't receive input events, so there's no way to load
privileged information into a form control (such as a full path into a
file element) and render it, then pull that information out by
reading the pixels.

I may have found the library that handles this. Have not yet fully tested it but based on its description it might be the one: http://htmlpurifier.org/

Use a FileReader to read the contents of the file, and an iframe to safely (or not) view it:
document.querySelector("button").addEventListener(
'click',
function() {
let iframe = document.createElement("iframe"),
holder = document.querySelector("#iframeholder"),
sandboxFlags = [
...document.querySelectorAll('.sandbox-flags:checked')
].map(_ => _.value).join(','),
file = document.querySelector('input[type=file]').files[0],
reader = new FileReader();
reader.addEventListener("load", function() {
iframe.setAttribute("scrolling", "no");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("srcdoc", this.result);
/*
* Sandboxing is not allowed in code snippets
* iframe.setAttribute("sandbox", sandboxFlags);
*
*/
console.log(`sandbox=${sandboxFlags}`);
while (holder.firstChild)
holder.removeChild(holder.firstChild);
holder.appendChild(iframe);
}, false);
reader.readAsText(file);
},
false);
label {
display: block
}
#iframeholder>iframe {
border:1px solid black;
height:400px;
width:400px;
}
<div>
<input id="browse" type="file" >
</div>
<label>
<input type="checkbox" class="sandbox-flags" value='allow-script' />allow-scripts
</label>
<label>
<input type="checkbox" class="sandbox-flags" value='allow-popups-to-escape-sandbox' />allow-popups-to-escape-sandbox
</label>
<label>
<input type="checkbox" class="sandbox-flags" value='allow-forms' />allow-forms
</label>
<label>
<input type="checkbox" class="sandbox-flags" value='allow-modals' />allow-modals
</label>
<div>
<button type="button">Preview</button>
</div>
<div id="iframeholder"></div>

Simple code to read local file from a selection from dropdown box and display it in a textarea (Javascript/ XHTML)

I've been trying for days to create a simple code to create a page that can display text files from a local directory. These are the specifications.
XHTML/ Javascript only
Files are local and from the same directory as the homepage
Files are in txt/ log form
Files to be displayed are to be selected from a dropdown box
Files are to be displayed in a text area
Compatible for all web browsers, can't use ActiveXObject
This was my closest attempt.
JavaScript
function populate(filename)
{
var file = document.getElementById('log1').files.(0);
var reader = new FileReader();
reader.onload = function(e)
{
document.getElementById('myTextarea').value = e.target.result;
};
reader.readAsText(file);
}
(X)HTML
<div id="source1">
<form id="log1">
Select File from cng1wlsbe1b:<br />
<select name="file1">
<option value="CCS1be1" onclick="populate('log1','ACCS1be1.txt')">CCS1be1</option>
<option value="CCS1beadm1" onclick="populate('log1','cng1wlsbe1bCCS1beadm1.txt')">CCS1beadm1</option>
<option value="engine_A" onclick="populate('log1','cng1wlsbe1bengine_A.txt')">engine_A</option>
</select>
</form>
<textarea rows="10" id="myTextarea" name="comment" form="log1" style="width:100%"></textarea>
</div>
I just learned coding and I've been taking in bits and pieces of codes from everywhere, so I'm quite sure it's littered with errors. Will any kind Samaritan please enlighten me?
Thank you!
Robin :)

I have enough time to at least get you on track with some very insightful things that will put gas in your tank and across the desert.
Use XHTML5 (file names ending with .xhtml until you learn how to work with server code). HTML is parsed (looked at and done stuff with) by the HTML parser which is akin to the army recruiting 4channers only there will be no lulz. XHTML is rendered by the XML parser, it's strict and while not perfect it will (while using Firefox) tell you when you reload the page what the error is as well as what line and column it's located at so you can fix the problem now instead of lulz-wat-problem?
In JavaScript when you have an array (more than one item being contained it will use solid brackets. In example document.getElementById('example)is singular though if you want to usedocument.getElementsByTagName('a)[0] it will use [0] for the first occurrence, [1] for second, [2] for third and so forth (without quotes).
Use double quotes for (X)HTML <element attribute="values" /> and single quotes for JavaScript syntax, it will save you a lot of hassle in the future. Also don't mind the whitespace, if you code well you'll use minimal spaces and only ever have more than one space in a row (or more) in JavaScript and your server (aka back-end) code. HTML is text/html whereas XHTML is only XHTML if it's served as application/xhtml+xml; what version the (X)HTML is has nothing to do with the media type/mime.
When in doubt check MDN (Mozilla Developer Network). Just append mdn to your search queries. https://developer.mozilla.org/en/docs/Web/API/FileReader
Never use a framework if you want to be competent, most people can't do actual real code and the more dependencies you add the weaker your code becomes and the easier an update to something third party will break everything...on your wedding day.
Use WinMerge to compare old code to new code, it's freeware and I've never stopped using it.
Use your browser's developer tools (specifically the console) when trying to debug any JavaScript code. Keep in mind that not all errors will produce output, silent errors suck and hopefully you won't have to deal with silent errors for a good while.
Save this code using Notepad++ and ensure it's encode as UTF-8 without a BOM (byte order mark) which is only necessary for UTF-16 (you won't be using that unless you're exceptionally local to India I think it is). There is no perfect editor though for freeware once you get used to it you'll find it fairly capable and not sucking up 4GB of RAM, a very respectable balance.
I've cleaned up the code in general and made a basic application. I've never worked with local text files...I know that the user will have to initiate a request to the client (while testing your computer is both the client and the server). The user will have to use a file input element to select files before anything can happen.
This is a fairly advanced topic for you to take on initially though with enough tenacity you'll be able to conquer it.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Sample XHTML5 Application</title>
<script defer="defer" type="application/javascript">
//<![CDATA[
function populate(filename)
{
var file = document.getElementById('log1').files[0];
var reader = new FileReader();
reader.onload = function(e)
{
document.getElementById('myTextarea').value = e.target.result;
};
reader.readAsText(file);
}
//]]>
</script>
<style type="text/css">
</style>
</head>
<body>
<form id="log1">
<fieldset>
<p>Select File from cng1wlsbe1b:</p>
<input onclick="populate(document.getElementById('file1').value);" type="button" value="clicky clicky" />
<input id="file_upload" type="file" value="" />
<select id="file1" name="file1">
<option value="CCS1be1" onclick="populate('log1','ACCS1be1.txt')">CCS1be1</option>
<option value="CCS1beadm1" onclick="populate('log1','cng1wlsbe1bCCS1beadm1.txt')">CCS1beadm1</option>
<option value="engine_A" onclick="populate('log1','cng1wlsbe1bengine_A.txt')">engine_A</option>
</select>
<textarea rows="10" id="myTextarea" name="comment" form="log1" style="width:100%"></textarea>
</fieldset>
</form>
</body>
</html>
This won't directly answer your question though it will help you get a couple years past the challenges you'd face on your own and put you in striking distance of your goal. Good luck!

Make Vim correctly highlight script type="text/html"

How can I get Vim to correctly syntax-highlight in a situation such as this (used, e.g. with Knockout templates):
<script type="text/html" id="my-template">
<!-- This should be rendered as HTML -->
<div>Some template</div>
</script>
<script>
//This should be rendered as Javascript
var x = function() { return 3; }
</script>
The solution given here involves editing Vim's internal syntax file, which seems wrong, and it specifically looks for "text/javascript" which is no longer needed in <script> tags.
I assume the solution is some sort of syntax plugin I can keep in my .vim directory but am not familiar enough with Vim's syntax internals to figure it out.
(Note that this question and answer don't apply as I'm not using Ruby on Rails.)

Maybe this will help you: https://coderwall.com/p/vgk5-q/make-vim-play-nice-with-html-templates-inside-script-tags.
In case the link above is broken one day - put the following code into ~/.vim/after/syntax/html.vim:
unlet b:current_syntax
syn include #HTML $VIMRUNTIME/syntax/html.vim
syn region htmlTemplate start=+<script [^>]*type *=[^>]*text/template[^>]*>+
\ end=+</script>+me=s-1 keepend
\ contains=#HTML,htmlScriptTag,#htmlPreproc
Somebody should write a plugin for that! ;)

First copy the vim's internal html syntax file to $HOME/.vim/syntax/html.vim so that you only change the behaviour for yourself not globally.
Then find the line starting syn region javaScript and replace it with two lines
syn region script_notype start=+<script>+ keepend end=+</script>+me=s-1 contains=#htmlJavaScript,htmlCssStyleComment,htmlScriptTag,#htmlPreproc
syn region script_jstype start=+<script[^>]*type="text/javascript"[^>]*>+ keepend end=+</script>+me=s-1 contains=#htmlJavaScript,htmlCssStyleComment,htmlScriptTag,#htmlPreproc
The first line is for plain <script> tab, the second for <script type="text/javascript">.
However, this won't cover a situation with <script> tag without type attribute having other attributes. This case should get javascript syntax but won't. I guess this is a minor problem.