DEV Community: kasu

eval() with WASM instead of sandbox with Web Extensions

kasu — Wed, 30 Oct 2024 11:27:09 +0000

in 4 lines

Manifest V3 is now required for eval() in Chrome extensions, so you need to use sandbox.
Firefox without sandbox can use unsafe-eval by reverting to V2...
Chrome and Firefox have different implementations, and I don't want to have a security gap between the two :(
Yes, let's succes with QuickJS(WASM)!

Background

I am working on a Web Extension¹.

What this extension provided was Google search and YouTube/X site search. These implementations were hard-coded.

We wanted to avoid having to make a release for every variation, so we were looking for a means for users to set up their own arbitrary site search or favorite search engine.

Policy

Based on the above background, we have decided to provide a function that allows users to register a function that can be used to process and copy URLs and page content, such as in Cocopy². We decided to provide a function that allows users to register functions they have entered.

Basically, the function entered by the user is in string form, and the browser has a function called eval()³ is built in.

However, extensions are limited by content_security_policy - Mozilla | MDN.

Extension `eval()` Fact

First, the extension has a version specification called Manifest.

Chrome is only available in V3, while Firefox currently allows you to choose between V2 and V3, whichever you prefer.
The basic eval() method differs depending on the version.

Manifest V3

Using eval() in a sandboxed iframe | Chrome for Developers

V3 does not allow direct use of eval(), so the method via sandbox is guided.
However, this is not the case in Firefox⁴.

Manifest V2

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"

In V2, eval() can be used by specifying unsafe-eval.

However, as the dangers of eval() are widely known, it is a method to be avoided if at all possible.

Here's what's wrong with the general method

Chrome requires V3, so it is sandboxed, and Firefox does not have a sandbox, so it is naturally fixed to the unsafe-eval implementation in V2.

Different implementations between Chrome and Firefox can be a maintenance cost
Security gap between sandbox and unsafe-eval

WASM may be an option.

There is a JavaScript engine called QuickJS⁵ made in C. engine made in C.

If this can be called from an extension as a WASM Module, the same implementation can be used in both Chrome and Firefox, and security can be ensured.

Implementation

Thankfully, a WASM build of QuickJS and a client for the JavaScript environment were available, so we were able to use these.

justjake / quickjs-emscripten

Safely execute untrusted Javascript in your Javascript, and execute synchronous code that uses async functions

quickjs-emscripten

Javascript/Typescript bindings for QuickJS, a modern Javascript interpreter compiled to WebAssembly.

Safely evaluate untrusted Javascript (supports most of ES2023).
Create and manipulate values inside the QuickJS runtime (more).
Expose host functions to the QuickJS runtime (more).
Execute synchronous code that uses asynchronous functions, with asyncify.
Supports browsers, NodeJS, Deno, Bun, Cloudflare Workers, QuickJS (via quickjs-for-quickjs).

Github | NPM | API Documentation | Variants | Examples

import { getQuickJS } from "quickjs-emscripten"
async function main() {
  const QuickJS = await getQuickJS()
  const vm = QuickJS.newContext()

  const world = vm.newString("world")
  vm.setProp(vm.global, "NAME", world)
  world.dispose()

  const result = vm.evalCode(`"Hello " + NAME + "!"`)
  if (result.error) {
    console.log

…

View on GitHub

The default method in the documentation fetches the WASM Module remotely, so the extension must import it directly to bundle the main body.

import variant from "@jitl/quickjs-singlefile-browser-release-sync"
import { newQuickJSWASMModuleFromVariant } from "quickjs-emscripten-core"

const QuickJS = await newQuickJSWASMModuleFromVariant(variant)
console.log(QuickJS.evalCode("1 + 1")) // 2

For user input, we asked the user to define an anonymous function, which was immediately executed and evaluated.

const inputCode = `
({keyword}) => {
return "https://www.google.com/search?q=" + keyword
}`
const result = QuickJS.evalCode(`(${inputCode})({ keyword: "Golang"})`)
expect(result).toBe("https://www.google.com/search?q=Golang")

Reference Implementation

This is a pull request for actual incorporation into the extension.

Add custom filter #10

ergofriend posted on Oct 10, 2024

I have improved the search methods for user.

[x] Browser's default search engine
[x] Building custom search url
[x] Escape hatch for custom filters
[x] Sorting custom filters

View on GitHub

This article is a translation from Japanese.
https://ergofriend.hatenablog.com/entry/2024/10/17/005830

Go's template engine “templ” is convenient (it also works with TinyGo)

kasu — Tue, 29 Oct 2024 15:51:06 +0000

Synopsis

I wanted to run an application in Go that returned plain HTML,
I decided to use Cloudflare Workers, which can convert it to Wasm and deploy it.

I recommend syumai/workers's template for deploying Go applications to Cloudflare Workers.

syumai/workers: Go package to run an HTTP server on Cloudflare Workers.

Go + `text/template`

First, let's build using text/template in a straightforward manner.

❯ ls -lh . /build
   total 15656
   -rwxr-xr-x 1 ergofriend staff 7.6M 8 8 20:12 app.wasm
   -rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:12 shim.mjs
   -rw-r--r-- 1 ergofriend staff 16K 8 8 20:12 wasm_exec.js
   -rw-r--r-- 1 ergofriend staff 160B 8 8 20:12 worker.mjs

It was almost 8 MB.

https://developers.cloudflare.com/workers/platform/limits/#account-plan-limits

Cloudflare Workers has worker size limits depending on the plan.

The free slot is 1MB, and the paid slot ($5~) is 10MB.

Even with the final limit based on size after compression, it will be tough to fit into the free quota starting at 8MB.

TinyGo + `text/template`

So I decided to switch to TinyGo, which is supposed to be for WebAssembly (Wasm).

After building, the size is about 0.75 MB, which seems to fit into the free frame.

❯ ls -lh . /build
total 1160
-rwxr-xr-x 1 ergofriend staff 556K 8 8 20:23 app.wasm
-rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:23 shim.mjs
-rw-r--r-- 1 ergofriend staff 15K 8 8 20:23 wasm_exec.js
-rw-r--r-- 1 ergofriend staff 160B 8 8 20:23 worker.mjs

Oops!

But here is where tragedy strikes.

When I try to access the built application, I get an error.

[wrangler:inf] GET / 200 OK (35ms)
✘ [ERROR] Uncaught (in response) RuntimeError: unreachable

      at main.runtime._panic (wasm://wasm/main-0022bc46:wasm-function[35]:0x2b4a)
      at main.(*text/template.state).evalField
  (wasm://wasm/main-0022bc46:wasm-function[540]:0x6c5f4)
      at main.(*text/template.state).evalFieldChain
  (wasm://wasm/main-0022bc46:wasm-function[531]:0x697fe)
      at main.(*text/template.state).evalFieldNode
  (wasm://wasm/main-0022bc46:wasm-function[530]:0x6959a)
      at main.(*text/template.state).evalPipeline
  (wasm://wasm/main-0022bc46:wasm-function[535]:0x6a1d2)
      at main.(*text/template.state).walk (wasm://wasm/main-0022bc46:wasm-function[569]:0x72cdd)
      at main.(*text/template.state).walk (wasm://wasm/main-0022bc46:wasm-function[569]:0x730b0)
      at main.main$1 (wasm://wasm/main-0022bc46:wasm-function[261]:0x2ac52)
      at main.(net/http.HandlerFunc).ServeHTTP
  (wasm://wasm/main-0022bc46:wasm-function[463]:0x5973a)
      at
  main.interface:{ServeHTTP:func:{named:net/http.ResponseWriter,pointer:named:net/http.Request}{}}.ServeHTTP$invoke
  (wasm://wasm/main-0022bc46:wasm-function[459]:0x56f72)

panic: unimplemented: (reflect.Value).MethodByName()

The method MethodByName, which is called when a template variable is passed in template.ExecuteTemplate(), is not yet It seems to be unimplemented.

Since TinyGo is a subset of the original, there are many unsupported features,
I found that text/template was calling unsupported methods.

https://github.com/tinygo-org/tinygo/blob/1154212c15e6e97048e122068730dab5a1a9427f/src/reflect/type.go#L1086-L1088

Now, I would like to be cool and say p-r for TinyGo, but this time I'm going to look for a quick alternative.

TEMPL

So I was looking for another template engine to replace text/template and came across templ.

a-h / templ

A language for writing HTML user interfaces in Go.

An HTML templating language for Go that has great developer tooling.

Documentation

See user documentation at https://templ.guide

Tasks

build

Build a local version.

go run ./get-version > .version
cd cmd/templ
go build

nix-update-gomod2nix

gomod2nix

install-snapshot

Build and install current version.

# Remove templ from the non-standard ~/bin/templ path
# that this command previously used.
rm -f ~/bin/templ
# Clear LSP logs.
rm -f cmd/templ/lspcmd/*.txt
# Update version.
go run ./get-version > .version
# Install to $GOPATH/bin or $HOME/go/bin
cd cmd/templ && go install

build-snapshot

Use goreleaser to build the command line binary using goreleaser.

goreleaser build --snapshot --clean

generate

Run templ generate using local version.

go run ./cmd/templ generate -include-version=false

test

Run Go tests.

go run ./get-version > .version
go run ./cmd/templ generate -include-version=false
go test ./...

test-short

Run Go tests.

go run ./get-version > .version
go run ./cmd/templ generate -include-version=false
go test ./... -short

test-cover

Run…

View on GitHub

Features

Here is a summary of TEMPL.

Own DSL

It is not difficult to write a unique program, but it can be written like templ ≈ Go + JSX.

templ hello() {
  <div>Welcome back!
}

It looks like a very familiar writing style.

templ login(isLoggedIn bool) {
  if isLoggedIn {
    @hello() <! -- @ to use other components -->.
  } else {
    <input name="login" type="button" value="Log in"/>
  }
}

When you use it, you call Go functions generated from the DSL by templ generate on a component-by-component basis.

func login(isLoggedIn bool) templ.Component {
  return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5
  ...
}

Handle("/", templ.Handler(login(false))))

The function of the generated component inherits the argument types defined in the template, so it can be safely called.
Unlike some ExecuteTemplate, this is safe.

VSCode Extensions

https://marketplace.visualstudio.com/items?itemName=a-h.templ

Syntax Highlight and LSP completion will be very useful.

TinyGo + `templ`

Just to be sure, I checked and found that it only depends on reflect's TypeOf, which is already implemented in TinyGo.

https://github.com/tinygo-org/tinygo/blob/1154212c15e6e97048e122068730dab5a1a9427f/src/reflect/type.go#L494-L500

Now let's try using templ.
The build seemed to have enough room.

❯ ls -lh . /build
total 1008
-rwxr-xr-x 1 ergofriend staff 477K 8 8 20:35 app.wasm
-rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:35 shim.mjs
-rw-r--r-- 1 ergofriend staff 15K 8 8 20:35 wasm_exec.js
-rw-r--r-- 1 ergofriend staff 160B 8 8 20:35 worker.mjs

Here is the actual application.

goworkers-demo.ergofriend.workers.dev

When accessed, the HTML can be returned without error.

> wrangler deploy
Total Upload: 493.48 KiB / gzip: 187.91 KiB
Total Upload: 493.48 KiB / gzip: 187.91 KiB

The final deployed size is also 187.91 KiB, so there is plenty of room to expand the application.

This verification is left in this repository.
ergofriend/goworkers-demo

This article is a translation from Japanese.
https://ergofriend.hatenablog.com/entry/2024/08/08/230603

DEV Community: kasu

eval() with WASM instead of sandbox with Web Extensions

in 4 lines

Background

Policy

Extension eval() Fact

Manifest V3

Manifest V2

Here's what's wrong with the general method

WASM may be an option.

Implementation

justjake / quickjs-emscripten

Safely execute untrusted Javascript in your Javascript, and execute synchronous code that uses async functions

quickjs-emscripten

Reference Implementation

Add custom filter #10

Go's template engine “templ” is convenient (it also works with TinyGo)

Synopsis

Go + text/template

TinyGo + text/template

Oops!

TEMPL

a-h / templ

A language for writing HTML user interfaces in Go.

An HTML templating language for Go that has great developer tooling.

Documentation

Tasks

build

nix-update-gomod2nix

install-snapshot

build-snapshot

generate

test

test-short

test-cover

Features

Own DSL

VSCode Extensions

TinyGo + templ

Extension `eval()` Fact

Go + `text/template`

TinyGo + `text/template`

TinyGo + `templ`