Serverless and user input beyond dynamic slugs or query parameters

[stevenmilstein]

Regarding https://www.11ty.dev/docs/plugins/serverless/#escaping-user-input, are there any other options for passing data to serverless pages aside from dynamic slugs or query parameters via the URL? Among URL length limitations, special characters like {% %} are also not permitted.

Is it possible to send form data or, JSON to the Data Cascade?

Any insight is greatly appreciated!

[solution-loisir]

I tried to hack my way through this, but couldn't find a solution. Especially tried to add a property to the eleventy.serverless object which is made available to templates, but couldn't find the handle. In the end, I opt out of Eleventy to write a regular Netlify function, but I would prefer to stick with Eleventy for convenience. I'm sure the feature will comme there's definitely security issues to be careful of. Maybe that's why it's been delayed.

[stevenmilstein]

@solution-loisir Thanks for taking a shot at it. I also tried the Netlify Functions route but still feel like I'm missing something.

It looks like the answer lies in https://www.11ty.dev/docs/plugins/serverless/

config: function(eleventyConfig) {}

Run your own custom Eleventy Configuration API code inside of the serverless function. Useful for a wide variety of things, but was added to facilitate developers wiring up additional serverless information from the event object to templates using eleventyConfig.addGlobalData. For example, wire up cookies using event.headers.cookie or form post data using event.body. Coming soon in v1.0.0-beta.4

See Config Global Data coming in v1.0.0.

I'm hoping that's the route to creating serverless NetlifyCMS Custom Previews #2019. Unfortunately, I don't have the skillset to test the theory :-(

[solution-loisir]

I've tried to use the config property, but it didn't seem to work. What is not clear to me is how the event object is made available to the serverles plugin. Now I was on v1.0.0-beta.8 is v1.0.0-beta.4 an earlier version or is it a count down? It's probably just me, I'll give it another go when I have time.

[stevenmilstein]

@solution-loisir Same here. I certainly feel like I'm missing something very key.

I thought the dates under the tags https://github.com/11ty/eleventy/tags imply the beta numbers are increasing.

[solution-loisir]

@stevenmilstein Might be of interest to you. I answered myself here: #2137. Turns out the config feature was not shipped yet in 1.0,0-beta.8. I upgraded version to 1.0.0-canary.46 and everything works so far!

[stevenmilstein]

@solution-loisir Thanks for the addGlobalData example.

Now the only blocking issue is

For example, wire up cookies using event.headers.cookie or form post data using event.body.

I tried POSTing a request body but I think serverless functions are restricted to GET.

[solution-loisir]

@solution-loisir Thanks for the addGlobalData example.

My pleasure, I like playing around to learn new useful things, and learning in public is a great way make others benefit!

I tried POSTing a request body but I think serverless functions are restricted to GET.

I'm pretty sure you can POST request to a serverless function. There are a lot of exemple here (not exclusively POST request exemples): https://functions.netlify.com/examples/. Any time a user submit sensitive information like a password it would need to be submitted through a POST method. Maybe you have an exemple of your implementation.

[stevenmilstein]

@solution-loisir you're absolutely right about POSTs and Netlify Functions. I've even been able to implement a few of my own.

However, as per 11ty Serverless:

A plugin to run Eleventy in a serverless function for server side rendering (e.g. Previews in your CMS) and/or in very large sites with On-demand Builders.

And according to On-demand Builders | Netlify Docs:

They accept GET requests only.

So I'm still confused about 11ty Serverless Bundler Options stating

KEY: DEFAULT VALUE	DESCRIPTION
config: function(eleventyConfig) {}	Run your own custom Eleventy Configuration API code inside of the serverless function. Useful for a wide variety of things, but was added to facilitate developers wiring up additional serverless information from the event object to templates using eleventyConfig.addGlobalData. For example, wire up cookies using event.headers.cookie or form post data using event.body.

When I console.log for http://localhost:8080/dynamic-data/posts/preview/my-slug/?my-parm1=one&my-parm2=two event, I see:

{
  httpMethod: 'GET',
  path: '/dynamic-data/posts/preview/my-slug/',
  queryStringParameters: { 'my-parm1': 'one', 'my-parm2': 'two' }
}

even after trying a POST with event.body json and Cookies.

Thanks for hanging in there!

[solution-loisir]

Hi, due to their nature, I guess it's logic for On-demand Builders to only accept GET request. The Serverless plugin can also be setted to dynamic template rendering mode. I believe POST requests can be used with dynamic template mode.

[zachleat]

Stale per project slipstream changes in #3074.