Adobe Developer App Builder — Support for Setting Response Headers

Learn how to use our latest feature in your App Builder application.

Adobe Developer App Builder provides a unified third-party extensibility framework for integrating and creating custom experiences to extend Adobe solutions.

For developers building applications with UI, the static assets (like HTML, JS, CSS, Images and so on) are served by the CDN (adobeio-static.net domain). Up to now, developers had no control over the response headers included as part of the response when these assets were served.

Following the recent CLI release — aio-cli 9.3.0 — Adobe Developer App Builder now supports setting response headers for static content. In this blog post, we’ll demonstrate how to best use this new feature in your App Builder application.

Leveraging response headers

Developers can now set any user-defined response headers to be included as part of the response.

This feature is applicable to any App Builder applications with UI, and is helpful for several use cases, including:

• Setting CORS Headers to enforce access policies
• Enabling Content Security Policy for your assets
• Add any custom headers required by the App UI

So how do you use this feature?

App Builder developers can now set the intended response headers in the app manifest file (either ext.config.yaml or app.config.yaml) during app development.

Manifest allows these headers to be set as rules which can select or reject various type of static assets/paths or all static assets within the app. These rules are as follows:

These rules are applied in the order in which they are specified in the manifest. For example, rules placed after a given rule can override the previous rule if both match the same file.

Here is an example of how to specify these rules in app manifest:

application:
  actions: actions
  web:
    src: web-src
    response-headers:
      /*: // add headers to all content
        X-custom-header: generic header
      /secure-dir/*: // specific folder
        Content-security-policy: default-src 'self'
      /widgets/*.html: // add headers to all html content
        X-custom-header: widget specific header
        Content-security-policy: default-src 'self'
      /lib/sample.js: // add headers to specific ile
        Content-security-policy: default-src 'self' example.com *.example.com

Once headers are added, they can be easily deployed with the app using the aio app:deploy command.

Note: the paths specified in rules are relative to the dist folder (created post app build) and not to app root.

Which headers can be set?

This feature allows developers to set any HTTP or custom response headers, except those in the list below.

If these headers are specified in manifest, they are ignored and are not included in the response. These particular headers are ignored because they are either meant for internal usage or are CDN-specific headers which should not be overridden.

Why not try it out?

To start using this feature in App Builder applications, simply run npm install –g @adobe/aio-cli to update to the latest version of the CLI. You can then update the manifest file to start leveraging these new header controls.

If you have any questions, reach out to us on our Experience League Forum.