<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Dora</title>
    <description>The latest articles on DEV Community by Dora (@doramilitaru).</description>
    <link>https://dev.to/doramilitaru</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F927274%2F3f654b23-a418-4295-b248-0641a3c43202.jpg</url>
      <title>DEV Community: Dora</title>
      <link>https://dev.to/doramilitaru</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/doramilitaru"/>
    <language>en</language>
    <item>
      <title>Automatic request validation at the edge with OpenAPI and Fastly</title>
      <dc:creator>Dora</dc:creator>
      <pubDate>Thu, 24 Nov 2022 16:35:48 +0000</pubDate>
      <link>https://dev.to/fastly/automatic-request-validation-at-the-edge-with-openapi-and-fastly-1fgo</link>
      <guid>https://dev.to/fastly/automatic-request-validation-at-the-edge-with-openapi-and-fastly-1fgo</guid>
      <description>&lt;p&gt;If you provide an API to your developer community, you might be familiar with OpenAPI (but don’t worry if you aren’t – I’ll explain everything). Perhaps you’re already using it to define all the endpoints and methods available, to generate documentation, or to support client apps like Postman. &lt;/p&gt;

&lt;p&gt;What if you could also use your OpenAPI definition to improve your API security by ensuring that all requests to your API match the patterns supported by your server? What if that also meant reducing load on your servers?&lt;/p&gt;

&lt;p&gt;You can do this with &lt;a href="https://www.fastly.com/products/edge-compute" rel="noopener noreferrer"&gt;Compute@Edge&lt;/a&gt; on Fastly. I'm going to show you how. It's quick and there's no coding involved!&lt;/p&gt;

&lt;h2&gt;
  
  
  Request validation: Why and when?
&lt;/h2&gt;

&lt;p&gt;Request validation is an important part of any web application or service. It ensures that your server is receiving data in the format that it requires. This helps mitigate potential bugs (like unexpected errors and slow or invalid responses), and security vulnerabilities that might be exposed when the consumers of your API send wrong or malicious request data. &lt;/p&gt;

&lt;p&gt;There is nothing wrong with processes failing, and of course any good web application will include error handling. However, at scale, there are mounting costs both for the client, in terms of increased request latency, and for the server – in terms of resources. The &lt;strong&gt;deeper&lt;/strong&gt; a request goes into a system before it fails, the more complex the error handling needs to be; the more expensive handling that transaction is; the longer it takes for the client to get a response, and the higher the chance of a malicious client discovering something interesting about the system architecture. The costs – and the risks – increase with depth.&lt;/p&gt;

&lt;p&gt;That’s why it’s a good idea to fail fast and &lt;strong&gt;shallow&lt;/strong&gt;, by performing validation as early as possible in the request lifecycle. With Fastly’s &lt;a href="https://www.fastly.com/products/edge-compute" rel="noopener noreferrer"&gt;Compute@Edge&lt;/a&gt;, you can do this before a request reaches your origin! &lt;/p&gt;

&lt;h2&gt;
  
  
  What is the OpenAPI Specification?
&lt;/h2&gt;

&lt;p&gt;If the words “API specification” seem intimidating, think of flat-pack furniture, or, better yet, LEGO sets for grown-ups. These come with instructions for assembly, as well as for individual parts – a bit like a blueprint. A good blueprint will allow you to build something that looks and works exactly like it’s meant to. &lt;/p&gt;

&lt;p&gt;The principle behind the &lt;a href="https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md" rel="noopener noreferrer"&gt;OpenAPI Specification&lt;/a&gt; (OAS – the industry’s most popular API specification format) is similar. It’s supposed to act as a blueprint for describing RESTful APIs. &lt;/p&gt;

&lt;p&gt;To adopt OAS, you create a document that defines your API in OpenAPI’s &lt;a href="https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#format" rel="noopener noreferrer"&gt;standard format&lt;/a&gt;. Such documents are both machine and human-readable, which enables anyone to discover and understand the capabilities of a service without access to source code, additional documentation, or inspection of network traffic.&lt;/p&gt;

&lt;p&gt;If you’re lucky, you might already have OpenAPI definitions for your APIs. If not, don’t panic! There are &lt;a href="https://openapi.tools/#auto-generators" rel="noopener noreferrer"&gt;tools&lt;/a&gt; that can help you generate these documents from other API definition formats, source code, and even network traces.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;At Fastly, we rely on OpenAPI to &lt;a href="https://dev.to/fastly/better-fastly-api-clients-with-openapi-generator-3lno"&gt;generate our API clients&lt;/a&gt;, the &lt;a href="https://developer.fastly.com/reference/" rel="noopener noreferrer"&gt;API reference&lt;/a&gt; on our &lt;a href="https://developer.fastly.com" rel="noopener noreferrer"&gt;Developer Hub&lt;/a&gt;, and our &lt;a href="https://www.postman.com/fastly" rel="noopener noreferrer"&gt;Postman collection&lt;/a&gt;.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7xtd8xfnq1fombyqg9bc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7xtd8xfnq1fombyqg9bc.png" alt="An OpenAPI definition, on the left, and resulting endpoint reference rendered on Fastly's Developer Hub, on the right" width="800" height="281"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Adopting OpenAPI means you’ll be able to then reap the benefits of its growing ecosystem, to accomplish things like &lt;a href="https://dev.to/fastly/better-fastly-api-clients-with-openapi-generator-3lno"&gt;code generation&lt;/a&gt;, automatic documentation, &lt;a href="https://stoplight.io/openapi#what-are-the-benefits-of-openapi" rel="noopener noreferrer"&gt;and more&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to validate requests with Compute@Edge and OpenAPI
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.fastly.com/products/edge-compute" rel="noopener noreferrer"&gt;Compute@Edge&lt;/a&gt;, Fastly’s serverless compute platform, allows you to build high scale, globally distributed applications – without having to manage the underlying infrastructure.&lt;/p&gt;

&lt;p&gt;In a few short minutes, you’ll have a working Compute@Edge service, configured to perform basic validation of API requests against an OpenAPI definition. On every invocation, this service will ensure that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;All required request parameters in the URI, query string, and headers of an incoming request are included and non-blank.&lt;/li&gt;
&lt;li&gt;Any applicable request payload adheres to the OpenAPI &lt;a href="https://spec.openapis.org/oas/latest.html#request-body-object" rel="noopener noreferrer"&gt;request model&lt;/a&gt; of a corresponding API &lt;a href="https://spec.openapis.org/oas/latest.html#operation-object" rel="noopener noreferrer"&gt;operation&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Let’s do this! &lt;/p&gt;

&lt;h3&gt;
  
  
  Step 0
&lt;/h3&gt;

&lt;p&gt;If you’ve never experimented with Compute@Edge, start by &lt;a href="https://developer.fastly.com/learning/compute" rel="noopener noreferrer"&gt;getting set up&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 1
&lt;/h3&gt;

&lt;p&gt;In an empty directory, run the following command using the &lt;a href="https://developer.fastly.com/learning/compute/#download-and-install-the-fastly-cli" rel="noopener noreferrer"&gt;Fastly CLI&lt;/a&gt; to initialize a new Compute@Edge project in JavaScript, based on Fastly's &lt;a href="https://developer.fastly.com/solutions/starters/compute-starter-kit-javascript-openapi-validation/" rel="noopener noreferrer"&gt;OpenAPI validation starter kit&lt;/a&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;fastly compute init &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--from&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;https://github.com/fastly/compute-starter-kit-javascript-openapi-validation
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 2 (optional)
&lt;/h3&gt;

&lt;p&gt;The project you just created comes pre-configured with an example origin (&lt;a href="https://httpbin.org" rel="noopener noreferrer"&gt;httpbin.org&lt;/a&gt;) and an &lt;a href="https://github.com/fastly/compute-starter-kit-javascript-openapi-validation/blob/main/src/definition.json" rel="noopener noreferrer"&gt;OpenAPI definition&lt;/a&gt;, so if you don’t have your own OpenAPI document handy, you can skip this step. Otherwise, now is a good time to: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Replace &lt;code&gt;src/definition.json&lt;/code&gt; with your API definition.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Important!&lt;/strong&gt; API definitions must be:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Written (or &lt;a href="https://mermade.org.uk/openapi-converter" rel="noopener noreferrer"&gt;converted&lt;/a&gt;) to the 3.x version of the OpenAPI standard;&lt;/li&gt;
&lt;li&gt;In &lt;a href="https://onlineyamltools.com/convert-yaml-to-json" rel="noopener noreferrer"&gt;JSON format&lt;/a&gt;;&lt;/li&gt;
&lt;li&gt;Fully &lt;a href="https://redocly.com/docs/cli/commands/bundle/#introduction" rel="noopener noreferrer"&gt;dereferenced&lt;/a&gt; (it cannot contain any &lt;code&gt;$ref&lt;/code&gt; pointers).&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Replace references to &lt;code&gt;httpbin.org&lt;/code&gt;, in &lt;code&gt;fastly.toml&lt;/code&gt;, with your API origin – and make any other &lt;a href="https://developer.fastly.com/reference/compute/fastly-toml/#reference" rel="noopener noreferrer"&gt;configuration changes&lt;/a&gt;, as necessary.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Step 3
&lt;/h3&gt;

&lt;p&gt;Run &lt;code&gt;fastly compute serve&lt;/code&gt; to run the Compute@Edge service on your local machine. Check the console to see both stdio and log output from your application.&lt;/p&gt;

&lt;p&gt;Next, open up a new terminal instance and try sending valid and invalid requests to the local server:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Valid request: returns the response from the origin&lt;/span&gt;
curl &lt;span class="nt"&gt;-L&lt;/span&gt; &lt;span class="nt"&gt;-X&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  POST &lt;span class="s1"&gt;'http://127.0.0.1:7676/anything'&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-H&lt;/span&gt; &lt;span class="s1"&gt;'Custom-Header: Hello!'&lt;/span&gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Invalid request: returns a synthetic response (400 Bad Request)&lt;/span&gt;
curl &lt;span class="nt"&gt;-L&lt;/span&gt; &lt;span class="nt"&gt;-X&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  GET &lt;span class="s1"&gt;'http://127.0.0.1:7676/not-an-existing-endpoint'&lt;/span&gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can also run &lt;code&gt;fastly compute publish&lt;/code&gt; and follow the steps in the wizard to publish your Compute@Edge service online.&lt;/p&gt;

&lt;p&gt;That’s it!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;💡 You can customize the behavior of this Compute@Edge service, for example, by returning validation errors in the client response, or adding more complex request handling logic after validation. Check out our growing collection of &lt;a href="https://developer.fastly.com/solutions/examples/javascript/" rel="noopener noreferrer"&gt;JavaScript code examples&lt;/a&gt; on Fastly’s Developer Hub for more inspiration.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>watercooler</category>
    </item>
  </channel>
</rss>
