Tuesday, April 17, 2018

Using The Coldfusion XMLValidate Function To Validate User Content

Sometimes you want to allow a limited set of HTML tags in user generated content.  This can be done with the XMLValidate function in Coldfusion as long as the content is valid XHTML.

Several years ago I read an article about escaping form values posted by Ben Nadel on his site www.bennadel.com. Some discussion came up in the comments about allowing a limited set of html tags for paragraphs, bold text, and so on.  I had a need to do this for forum comments on a site that I was working on. This site was written in Coldfusion so I was looking at some of the same options mentioned in Ben's article. I ended up doing something a little different though.

We were using TinyMCE for the forum comments. TinyMCE produces XHTML code so I was able to use Coldfusion's abilities to handle XML to accomplish this task. Using the XMLValidate function and an XML schema that was modified to accept a small list of tags and attributes the comments were correctly limited. Here is the relevant portion of the code.  Below is an explanation of how it works. 



The first line takes the content from the form and wraps a content tag around it. This is done because valid XML has to have a root element. Naming this element content was just an arbitrary decision. It could have been anything. Also before parsing non-breaking spaces are escaped in the content. If I remember right the non-breaking spaces were causing the XMLFormat function to error.

The next section is a cfxml tag containing the XML schema. This XML was created from some examples and then modified to include the desired tags.

The schema allows the following tags:

  • any number of br, strong, em, ul, ol, u, strike, li, spans with style and class attributes, 
  • a tags with href, title, target, and class attributes, 
  • img tags with src, alt, height, and width attributes, 
  • p tags with align, class, and style attributes, 
  • and finally content tags 


As mentioned above the content tag is just a container added to act as the root document element. Also the href attribute on a tags can only contain urls not javascript.

Then XMLValidate is called with the content and the schema. This returns a struct with information about the validity of the document. Finally the status key is used to decide if the content is acceptable or we need to reject it.

This article was rewritten from an article that I wrote several years ago on a different blog.  That blog is no longer online.  I think the information is still useful though.  I have a few other articles from that old site that I am going to re-publish.

Sunday, April 15, 2018

Setting Up an Angular 5 site on Github Pages

Getting Started

This article will go over all the steps to setup an Angular site on GitHub pages.  The site will use Angular's AOT compiling and be served from the docs folder of the repository.

To start with you can follow the guide here to setup a new Angular project. Then you will need to setup a repository on Github.com.  The name of the repository doesn't matter, this site will use the docs folder, not the specially named repository with USERNAME.github.io as the name.



Project Changes

After that open up the project in your editor and open the .angular.cli.json file.  Change the "outDir" to "docs".  This is where the files will be created when you build the project.  The contents of .angular.cli.json are shown below with all the changes discussed in the article.

Custom Domain

To use a custom domain for your site you need to create a file name CNAME that contains only the domain name.  The GitHub help page explains how to setup DNS and everything else you need for this.  Create the file in the src folder of your project.  Then you need to add "CNAME" to the "assets" setting in your .angular.cli.json.  You can see this in the example file below.

If your site is using routing and you want the links to pages, other than the home page, to work you will need to setup a custom 404 page on your GitHub site.  There is a help document here explaining how to do that.  If all you do is add a custom 404.html file to the site it still won't make your links work.  For the Angular site to work correctly the easiest way is for your 404.html file to be the index page of your site.  In your src folder make a 404.html file and copy the contents of the index.html file into the 404.html file.  Then in the .angular.cli.json change the "index" setting to 404.html.

This is the .angular.cli.json with all the changes.


Site Setup

Now you are ready to build the site and commit all the changes.  Run the following command in your project folder:

ng build --aot --prod --env=prod

This should create a docs folder with files similar to the following:



Then you need to add all the changed files and commit everything.  Run the following commands to send everything up to GitHub.

git add .
git commit -m 'initial commit'
git push

At GitHub.com on your repository there is a Settings section.  Scroll down to the GitHub pages section.  Change the Source dropdown to the "master branch /docs folder" option.  After this your site should be up and running.  You can access it at your custom domain if you set one up, or the standard GitHub url for your repository.

Here is the output of "ng --version" for the setup used for this article.  Things could change as time goes on, but I am happy to answer any questions in the comments below.  Let me know if anyone has handled the index.html / 404.html situation differently.


Friday, April 13, 2018

Listening For JS Error Events

I was recently reading a blog article, Ben Nadel JS Error.   In the article Ben showed how to setup an error event handler that would be triggered for any failed image loads on a page.  This was done by attaching an error event handler to the body element.  Also he had to pass the last argument to addEventListener as true so that it would trigger in the capture phase of the event. This event handler will run whenever an external resource like an image or a style sheet fails to load on the page.

After some experimenting I found that if I attach the event to the window object it is triggered for all the failed resources and also for any javascript errors that happen on the page.  Setting this up on a site with quite a bit of traffic from different browsers was very interesting.  It was a bit overwhelming at first until some things were fixed and some checking was added to filter out some of the errors.  In the event handler the event and error information is being posted back to a server and then sent in an email so it can be reviewed.


Wednesday, April 11, 2018

My First Memories of Coding

The first time I remember writing code was in grade school in the computer lab.  We were learning Basic.  I'm not sure how old I was, but it would have been sometime in the late '80s or early '90s.  I remember they had us write a program that would take some numbers from the user and print out the average.  I had to ask how to do division. I had only seen it with the standard division symbol in math class, not the forward slash.  Soon after that I was able to get Basic on my home PC.  Actually I think it was included in MS-DOS.

At school and in the beginning at home I was using Basic where you had to use line numbers to write your code.  Then to edit a line you had to retype that line with the number.  Soon after that I was able to get QBasic and a book to help me get started.


Using Brave

For a few weeks now I have been using the Brave browser.  It is based on Chromium , so switching from Chrome was a quick adjustment since ...