WMHub: easy Web Monetization for all

Bruno Luis Panuto Silva — Thu, 04 Jun 2020 14:41:10 +0000

What I built

A web app that allows you to automatically add Web Monetization to your project without having to code JS or add <meta> tags. It also collects metrics on pages with Web Monetization and consolidates that into the platform.

Submission Category:

Foundational Technology

Demo

https://wmhub.live

Link to Code

WebMonetizationHub / wmhub-legacy

Wmhub

Here you'll find our application!

Setup

Install the Elixir programming language, clone this repo and run:

mix deps.get
cd assets/ && npm install && cd ..
iex -S mix phx.server

View on GitHub

How I built it

The stack for this project is Elixir, with PostgreSQL for the database and Phoenix as the web framework.

The "library" injected in pages to handle Web Monetization events is made in JavaScript, the ES5 version. We want to include everyone!

All interactions apart from the landing page, signin and signup forms are Phoenix LiveViews, which classifies this app as an SPA (after you login).

Communication with pages to broadcast real-time payment pointer updates to users that are already connected to your app are handled by Phoenix Channels.

Additional Resources/Info

The plan is to expand WMHub beyond a simple "payment pointer" update tool. Here are some of the ideas in the roadmap:

A templating tool that allows you to hook Web Monetization events and display content. Maybe display a link to paying users! There is a challenge here in flexibility vs mitigating XSS attack vectors.
A "trigger" tool that runs on Web Monetization events and allows you to hook any type of code.
A marketplace of triggers and templates, so that users can install things without any knowledge whatsoever.
Collect (anonimized/with consent) data from users visiting a WMHub powered project, allowing the content creator more insight on how their content is consumed.

How to serve JavaScript from a Phoenix View

Bruno Luis Panuto Silva — Sun, 10 May 2020 05:46:08 +0000

When we first hear and use Phoenix Views, it's primary use case is to render HTML or JSON views.

But that's not all Phoenix Views can do!

JavaScript!

HTLM and JSON have their uses in web apps and APIs, for sure. But what if we are an API or web application providing a service not to a user or system, but to a browser?

A web browser can deal with different assets. But if you want it to do something, you have to speak JavaScript. There are some notable exceptions (WebAssembly?) but this is the de-facto way of getting code to a user's browser.

So, are we able to create a Phoenix View that renders JavaScript? Let's give it a shot.

In order to pull this off, we would need:

1) A Phoenix.View that is going to render our JavaScript file
2) A template, probably with an extension like .js.eex
3) A controller that sets up the correct Content-Type and renders this .js.eex template.

Let's try!

The View

defmodule Myapp.JSView do
  use MyappWeb, :view
end

We're stating that the template is available in the directory configured by the :root property. By default, that would be myapp_web/templates/#{myresource}/#{mycontroller.html.eex}.

But we are not HTML.

The Template

# myapp_web/templates/js/something.js.eex
(function() {
  console.log('oh my, from Elixir? This is <%= @adjective %>!');
})()

As you can see it's a normal template. But there's a key difference: we're actually a .js.eex extension. This is just to signal that we're building a .js template, it is not dealt with differently by EEx.

And we have access to any assigns, as you can see when we read the @adjective. No surprises here!

So, how do we render it?

The Controller

defmodule MyappWeb.JSController do
  use MyappWeb, :controller

  def index(conn, _params) do
    render(conn, "something.js", adjective: "awesome")
  end
end

something.js gets mapped to the corresponding something.js.eex template we defined above. Not unlike building a "normal" HTML Phoenix View. Super clean!

There's only one last thing we need to do in order to correctly serve this file as valid JavaScript: the Content-Type.

# lib/myapp_web/router.ex
defmodule MyappWeb.Router do
  # lots of stuff above...

  pipeline :js do
    plug :put_js_content_type
  end

  defp put_js_content_type(conn, _params) do
    put_content_type(conn, "text/javascript")
  end

  scope "/custom_js", MyappWeb do
    pipe_through :js
    get "/myjsfile.js", JSController, :index
  end
end

So there you have it. Phoenix Views are great and really flexible!

DANGER

Be Careful with how you deal with user input when pasting it inside JS code. You could be opening yourself up to a XSS attack! You can read more about XSS here.

Phoenix has facilities to deal with (some) JavaScript data escaping. Refer to javascript_escape.

In short: make sure that data you put on your file is not able to run arbitrary code. This is not meant to be a security guide, so viewer discretion is advised.

Conclusion

Granted, this is not your common use case. Usually, JS files are static and served from a CDN. But sometimes we need to step out of the ordinary, and it's amazing that it's so simple to do in Phoenix!

DEV Community: Bruno Luis Panuto Silva