Spring Security, Webjars, and MIME type error

I volunteered to be JLO (Java Language Owner) at CircleCI and I am currently working on getting a sample Spring Framework project running on CircleCI 2.0. I made a simple app bootstrapped with the Spring Initializer. I included Spring Security for the first time and I decided to try out WebJars for static Javascript libraries such as bootstrap. I am using Thymeleaf for templating.The app does not actually do anything yet but I ran into a pretty strange issue today that I wanted to write up here.

My home page is pretty straightforward.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>CircleCI Spring Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />

    <link rel="stylesheet" th:href="@{/css/style.css}" href="../static/css/style.css" />
</head>
<body>

    <nav class="navbar">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">CircleCI Demo Spring</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <h1> CircleCI Spring Demo </h1>
    </div>

    <script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
</body>
</html>

However, when I tried to load up the app with mvn spring-boot:run none of the styles showed up and console showed the following error message:

Resource interpreted as Stylesheet but transferred with MIME type text/html

It turns out, that a default spring-security config will basically block any request unless you whitelist it. The MIME type is a red herring since what is actually happening is that my spring-security config is redirecting all unauthenticated users to my login page (which is login.html) instead of serving up the stylesheet from the /webjars directory.

The solution is to update my security configuration to whitelist anything that comes from /webjars

package com.circleci.demojavaspring;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                .antMatchers("/", "/home", "/webjars/**").permitAll()
                .anyRequest().authenticated()
                .and()
            .formLogin()
                .loginPage("/login")
                .permitAll()
                .and()
            .logout()
                .permitAll();
    }
}

Now, the styles load as expected.

The Best Autotools tutorial from the Ajunta docs

Autotools is probably the most overwhelming piece of software that I have encountered. Just when I think that I get how it works, something goes wrong and I spend hours digging through man pages and info docs trying to figure out what is going on.

I wish I had found the Anjuta docs that describe how the “magic” behind their project wizards actually work earlier. Like most IDE’s Anjuta takes care of doing a lot of heavy lifting in the background. Unlike most IDE’s they have excellent documentation (in addition to the source code of course) on how everything actually works. This is extremely valuable and I am grateful to the folks from the Anjuta project who took the time to describe how all of this works from doing everything as a single line gcc command all the way to clicking buttons via the new project wizard.

If you are new to autotools like me, check out this doc. If you dont care about auto tools but want to see what excellent documentation looks like, check out this doc as well.

Using gtk-doc with Anjuta on Debian Stable

gtk-doc is a library that helps extract code documentation. When you create a new project with Anjuta it asks if you wish to include gkt-doc. Unfortunately, on Debian stable there seems to be a bug because the autoconf configuration is looking for the wrong version of gtk-doc.

/home/levlaz/git/librefocus/configure: line 13072: syntax error near unexpected token `1.0'
/home/levlaz/git/librefocus/configure: line 13072: `GTK_DOC_CHECK(1.0)'

On Debian stable, the version of GTK doc that comes with the gtk-doc-tools package is 1.21. In order to resolve this error you need to update configure.ac to use the newer version of gtk-doc as shown below:

GTK_DOC_CHECK([1.21])

Then you need to regenerate the entire project and everything should work as expected.

Anjuta “You must have libtool installed”

Anjuta is an excellent IDE specifically when it comes to writing applications for GNOME.

On Debian stable, there seems to be a bug having to do with a missing dependency. When you create a project for the first time using the new project wizard and then try to execute it; Anjuta will complain that you must have libtool installed.

I already have libtool installed, but it is looking specifically for some tools found in the libtool-bin package. Installing this package resolves the issue.

sudo apt-get install libtool-bin

 

Posting to WordPress via Email with Mutt

Soemtimes you are hanging out in your terminal and you just want to be able to post something to your blog quickly. I was pretty inspired by Derek Siver’s OpenBSD post [1] where he really embraces the unix philosophy of having one tool to do a job correctly and putting together various small tools like this to come up with a solution for the problem that you are trying to solve with your computer.

WordPress with Jetpack makes it dead simple to post to your blog via email [2], even if you do not have a mail server configured. I was able to write a three line bash script to “automate” creating a new post from my command line.

#!/bin/bash
# Bash Utility to Post to WordPress using Mutt

subject="$1"
WP_ADDRESS=

mutt -s "${subject}" $WP_ADDRESS

I saved this file in /usr/local/bin/wp and whenever I am inspired to fire off some quick thoughts to this blog I can run wp "Blog Post Title" which dumps me into a vim buffer that once I complete is sent off via mutt to wordpress.

[1] https://sivers.org/openbsd
[2] https://jetpack.com/support/post-by-email/#examples

Serving a Static Home Page in Rails

TIL while working on this issue that if you dump a file into public/index.html then rails will just serve that up for you.

A lot of tutorials out there talk about making a static pages controller, which seems like overkill (unless you have a lot of static pages .. but if thats the case why are you using Rails?)

Do not Install Karma Globally

Wow, I spent so long trying to figure out why the hell karma was not working for me, it turns out its because it was installed globally.

For instance.

In my projects package.json I had:

"scripts": { "test": "karma start karma.conf.js" } ...

When I ran npm test – it told me sh 1: karma not found

Every other possible combination also did the same thing.

i.e.

node_modules/karma/bin/karma 

./node_modules/karma/bin/karma  

node ./node_modules/karma/bin/karma

I could totally execute this myself from the shell, so I had no idea what was wrong. Then I finally stumbled upon this GitHub Issue.

After uninstalling karma globally, npm uninstall -g karma I was able to run npm test without any issues.

I still have no idea why this works or didn’t work. But at this point I just want to go back to writing tests.

Injecting Stuff into your Python Path

Similar to a previous post where I wrote about how to run flask tests without installing your app, another common thing that you might want to be able to do is import your app from some arbitrary script.

This is especially useful when running your app with apache mod_wsgi. This module expects the app to be installed globally or at least in the python path. Unless you install the app in a traditional sense this will not be true.

The solution is just to inject the path prior to running your import statement like this.

sys.path.insert(0, '/var/www/blog')
from blog import app as application

This import will actually work.

Using the Flask CLI

Who knew that flask had a cli? Previously I used to just use manage.py just like Django does it to “do stuff”.

The CLI is great, but again it follows the theme of kind of wanting you to install your flask app. (I really should do this).

So in order to get your app to work you must point the FLASK_APP variable to the actual python file (not your app module). This is true even if you have a true python module.

For instance.

export FLASK_APP = blog/blog.py
flask run

Works, while

export FLASK_APP = blog
flask run 

Does not. Even though blog consists of:

blog/
  __init__.py
  blog.py

Follow Me on Twitter CTA on Ghost and WordPress

The other day I read a post on Hacker News about premature optimization in web application development. This was an excellent post in its own right, but one thing that jumped out at me was the call to action from the author to follow him on Twitter at the end of his post. I liked that it was subtle, simple, and effective  (I followed him on Twitter). Naturally, I stole this idea for my own blogs. This method uses the Follow Button provided by Twitter. In this post, I will show you how to add your own “Follow Me on Twitter” Call to Action on  your own WordPress or Ghost blog.

WordPress

I used the Bottom of Every Post WordPress Plugin because I found that hacking the main wordpress loop caused my CTA to show up at the very bottom of a page rather than at the end of the post content. In addition, I made a small change to this plugin to make sure that it only appears on single posts rather than on the home page.

Edit bottom-of-every-post/bottom_of_every_post.php from the WordPress Plugins Editor and update the method to be:

if( is_single() && file_exists( $fileName )){

 /* open the text file and read its contents */

 $theFile = fopen( $fileName, "r");
 $msg = fread( $theFile, filesize( $fileName ));
 fclose( $theFile );
 
 /* detect the old message in code to try and eradicate my name and #
 showing up on strange websites that are run by lazy people */
 
 if( $msg == "<p>Call for an estimate 724-498-1551<br><a href=\"mailto:[email protected]\">[email protected]</a></p>" ){
 $msg = "<p>Thank you for installing the Bottom of every post WordPress plugin. To find out how to change or remove this message, read <a href=\"http://wordpress.org/extend/plugins/bottom-of-every-post/installation/\">the instructions</a>.</p>";
 }

 /* append the text file contents to the end of `the_content` */
 return $content . stripslashes( $msg );
 } else{

 /* if `the_content` belongs to a page or our file is missing
 the result of this filter is no change to `the_content` */

 return $content;
 }

The key here is

is_single()

Next, edit bottom-of-every-post/bottom_of_every_post.txt and add your call to action. Mine looks like this.

<p>
 If you made it this far, you should probably follow me on twitter. :) 
 <a class="twitter-follow-button" href="https://twitter.com/levlaz"> Follow @levlaz</a>
</p>

<script>window.twttr = (function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0],
 t = window.twttr || {};
 if (d.getElementById(id)) return t;
 js = d.createElement(s);
 js.id = id;
 js.src = "https://platform.twitter.com/widgets.js";
 fjs.parentNode.insertBefore(js, fjs);

 t._e = [];
 t.ready = function(f) {
 t._e.push(f);
 };

 return t;
}(document, "script", "twitter-wjs"));</script>

You only need to replace your twitter username in the above example and it should work as is. The end result is shown below:

Screen Shot 2017-04-10 at 4.44.14 PM.png

Ghost

I used ghosts code-injection tool to get this to work for every page. I added the following two scripts to the Blog Footer.

<script> 
 article = document.getElementsByClassName('post-content');
 child = document.createElement('p');
 cta = '<p class="follow"> If you read this far, thank you! Follow me on Twitter to stay up to date on what the fuss is all about.<br />';
 link = '<a class="twitter-follow-button" href="https://twitter.com/tralevnet"> Follow @tralevnet</a></p>'
 child.innerHTML = cta + link;
 article[0].appendChild(child);
</script>

<script>
 window.twttr = (function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0],
 t = window.twttr || {};
 if (d.getElementById(id)) return t;
 js = d.createElement(s);
 js.id = id;
 js.src = "https://platform.twitter.com/widgets.js";
 fjs.parentNode.insertBefore(js, fjs);

 t._e = [];
 t.ready = function(f) {
 t._e.push(f);
 };

 return t;
}(document, "script", "twitter-wjs"));
</script>

In the example above you need to change your call to action as well as your twitter username for it to work. I also added a custom style to the Blog Header

<style> 
.follow {
 line-height: 1.5;
 width: 50%;
 padding: 15px;
 border: dashed 1px lightgrey;
 font-size: smaller;
 color: #555;
 font-family: sans-serif;
 font-weight: bold;
 }
 
 .twitter-follow-button {
 margin-top: 10px;
 }
</style>

The end result looks like this:

Screen Shot 2017-04-10 at 4.46.57 PM.png

That’s pretty much it. You can go wild with the style to your hearts content. I like this simple CTA and I am excited to see how effective it is on my own blogs.