Sanitizing & Validating User Input for Amazon Product Advertising API

Summary:  Remove apostrophes to prevent Amazon from returning “No Results”

As a security-conscious web programmer, I always sanitize user input. It’s something you have to do to prevent attacks like SQL Injection and Cross-Site Scripting.  Basically it means that you never trust user input to be safe, and you always filter or sanitize it to remove potentially dangerous input.   PHP has lots of filters for sanitization, so that part is easy.  For Amazon item search, my PHP code filters the user input like this:


if(isset($_POST['title']) && !empty($_POST['title'])) {
     $search_values['Title']= filter_var($_POST['title'], FILTER_SANITIZE_STRING);
}

But there’s a second step.   In addition to sanitizing data, you also want to validate it to make sure that it’s in the expected format.  But, in order to validate correctly, you have to understand the rules about what’s expected. Sometimes the rules are obvious, but other times you’re working with a bit of a black box.

Third party APIs are like black boxes.  You can’t read the code.   You only have the documentation to rely upon.   Giving the wrong input will get you errors or no results, and you might not know what you’re doing wrong.  So, you need to experiment and see if you can figure out what’s allowed and what’s not.

This post is specific to the Amazon Product Advertising API, which is an Amazon service that allows you to look up product information, like availability, pricing, keyword search, etc.

I use the Amazon Product Advertising API for several different projects, and for one of them, my application uses the ItemSearch operation. Specifically, I often search the Books category by Title.

Amazon’s API behaves differently than the search function on their site.  On their site, if you put in an apostrophe, the site just ignores it.  When using the API, you get no results.

So, the solution is to always strip the user input of all apostrophes. Or, if you’re a fellow programmer, you might call them single quotes. If you leave the apostrophe in, you’ll get no results. If you remove it, you hopefully get lots of results!

In my program, I am sending the user input via an HTML Form using Ajax.  My browser actually encodes the user input before sending it to the server.  It encodes the apostrophe character as its html entity which is '.

So, in my back end PHP code, I remove the apostrophe with this:


str_replace("'", "", $my_search_string);

Problem solved!   In actuality, I have combined that function with my code for sanitization, and the whole thing looks like:

 


if(isset($_POST['title']) && !empty($_POST['title'])) {
     $search_values['Title'] = str_replace("'", "", filter_var($_POST['title'], FILTER_SANITIZE_STRING));
}

How to embed C3.js Javascript Charts in WordPress Posts

I’ve been working with C3.js graphs for an admin website and thought it would be fun to use it on this WordPress blog.  You can use most Javascript libraries in WordPress, but it takes a little more work.  If you know how to write Javascript, then you’ll find that C3.js offers a relatively easy way to create custom pie charts, timeseries charts, line and bar graphs, etc.   Here’s an example of a graph created with C3.js.  I used real historical weather data to compare the record high July 2015 temperatures to average temperatures.

Tacoma, WA: Record High July 2015 Temperatures

Here’s how I created the above graph.

First, I downloaded the c3 and d3 libraries (you can get the zip file on github). I unzipped the file and put the c3.css, c3.min.js, d3.min.js files into the root directory of my wordpress theme.

Side note: I am using a child theme, as you should too, to prevent problems if your theme gets automatically updated.  If you are not familiar with child themes, check out this WordPress tutorial.

Next, I added the following code to my functions.php file:

functions.php


add_action( 'wp_enqueue_scripts', 'add_c3_scripts' );

function add_c3_scripts() {
	$d3_url =  get_stylesheet_directory_uri() . '/d3.min.js';
	$c3_url =  get_stylesheet_directory_uri() . '/c3.min.js';
	$c3_css =  get_stylesheet_directory_uri() . '/c3.css';
	$my_graphs_url =  get_stylesheet_directory_uri() . '/my_graphs.js';
	wp_enqueue_script( 'd3', $d3_url );
	wp_enqueue_script( 'c3', $c3_url, 'd3' );
	wp_enqueue_script( 'my_graphs', $my_graphs_url, 'c3' );
	wp_enqueue_style( 'c3', $c3_css );
}

Next, I create the my_graphs.js file in the root directory of my theme.  For better organization, you could put this in a scripts folder and change the above url accordingly.

In the my_graphs.js file, I write a Javascript function which creates a C3 chart.  It looks like this:

my_graphs.js


function july_2015_graph() {
    var chart = c3.generate({
        bindto: '#july_2015_graph',
        color: {
            pattern: ['#396ab1', '#cc2529']
        },
        data: {
            x: 'x',
            columns: [
                ['x', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ,16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
                ['Average', 69, 70, 70, 70, 71, 71, 71, 71, 72, 72, 72, 72, 72, 73, 73, 74, 74, 75, 75, 75, 76, 76, 76, 76, 76, 76, 76, 76, 75, 75, 75]
            ],
            type: 'spline'
        },
        axis: {
            x: {
                label: 'Date'
            },
            y: {
                label: 'Temperature (F)',
                min: 65,
                max: 95
            }
        },
        transition: {
            duration: 100
        }
    });

    setTimeout(function () {
        chart.load({
            columns: [
                ['2015', 89, 92, 92, 91, 91, 84, 83, 87, 81, 71, 72, 78, 79, 81, 80, 79, 80, 91, 94, 80, 75, 74, 77, 75, 71, 71, 75, 81, 88, 92, 95]
            ]
        });
    }, 1000);

}

The “bindto:” line at the top of that code segment tells the c3.js Javascript Library where to put the graph.

To display the graph in this post, I edit the post in “text” mode (select the text tab at the top of the wordpress post editor) and add this code:


<div id="july_2015_graph"></div>
<script type="text/javascript">
july_2015_graph();
</script>

 

For more information about how to use Javascript with WordPress, check out this page: Using Javascript in WordPress

How to Fix Sidebar Drop Down in WordPress [Visual Tutorial]

A sidebar that drops below the content can be a puzzling problem to fix. In WordPress, you can have sidebars that appear on the left and/or right side of your post content. These sidebars usually hold widgets and are easily customizable. However, sometimes things go wrong with the blog layout and the sidebars will be in the wrong place, or sometimes the sidebars are at the top but the post content has dropped lower.

The problem is usually an HTML or CSS error. The most likely culprit is an extra DIV tag or a missing one. Some blogs have hundreds of DIV tags, so troubleshooting can be a real pain.

This is how I attack such a problem.  Maybe these step-by-step instructions will help you.

First, if you recently installed a WordPress Plugin, try disabling it. If disabling the plugin fixes the problem, then the plugin is the cause. If you want to still use the plugin, you’ll have to edit the code manually.  Wordpress plugins are written in PHP so you’ll need to understand PHP programming to fix the plugin.  If you need help, I’m available for freelance work and I can fix it for you.

If disabling a plugin doesn’t fix your problem, the next step is to look at your blog’s source code.  I like to use the Firefox web browser.  You can try to look at the code with other browsers, but Firefox displays the information in the most user-friendly way.

In Firefox, I right-click on the problematic sidebar and click on “Inspect Element.”

This will show me the source code.  Now, all I do is move my cursor over the different “Div” tags and Firefox tells me exactly what each “Div” tag references.  Here’s a photo to show you what I’m talking about:

 

Troubleshoot sidebar layout problems with Firefox Inspector
Inspecting a WordPress Blog Source Code in Firefox

See that blue line in the photo above?  My cursor is hovering over that DIV tag.   When I hove over it, Firefox highlights the section of the website in blue that the div is referring to.  It also tells me the CSS class that DIV belongs to, which is .row.column-content-wrapper   That tells me my problem. In many wordpress themes content-wrapper divs are used to hold the content.  There is an extra div that is closing the content too early.  Now I just have to go into the WordPress theme files and remove that div.

How will I know which file to edit?  It depends on the theme and which pages the error occurs on.  In my example case above, my error was only occurring on one post, so the extra DIV was actually in that post. However, if it occurs on most or all of the pages, then it’s probably in a theme page.  If it’s only on single posts, then the error may be in single.php.  If it only occurs on pages and not posts, then the problem may be with page.php.

I hope that helps.  If you think you fixed it, be sure to check out your site on multiple devices to see if it looks correct on your phone, tablet, and desktop.  This issue can happen for mobile users only, or for everyone.  It all depends on your WordPress theme, plugins, and customization.

If you would like expert assistance, I will gladly help.  I have solved problems like this for as low as $15.  Contact me and I’ll be glad to help.