Liquid header tag

An HTTP header is a part of the HTTP request or response that carries metadata between the client (usually a browser) and the server when making web requests. It communicates information like content type, encoding, authentication details, cache instructions, and more between the client and server.

The header tag lets you set HTTP response headers directly from a Liquid layout or page template, without needing server-side configuration. This allows for the storage of persistent session information about the customer without relying on cookies, enhancing security and flexibility by enabling developers to manage session data directly through HTTP headers.

Usage

The header tag only has an effect when used in layout or page templates. You can set any header you like, but some core platform headers will be overwritten by StoreConnect regardless.

{%- header name: "Header-Name", value: "header-value" %}

Example

Set Content-Security-Policy for the home page only:

{%- if current_page.identifier == "home" %}
  {%- header name: "Content-Security-Policy", value: "frame-ancestors 'self' example.com;" %}
{%- endif %}

This produces the following response header:

Content-Security-Policy: frame-ancestors 'self' example.org;

Configuring custom HTTP headers

Configurable HTTP headers can be tailored to specific requirements, providing a powerful tool for web applications to handle session management and user data more effectively.

Define your headers

1. Identify the data: Determine what session information you need to store and ensure it complies with privacy and security standards.
2. Header naming: Use clear and descriptive names for your headers to avoid conflicts and ensure readability. For example, X-Custom-User-Session for session data.

Implement headers in Liquid

1. Header configuration: In your Liquid configuration file or server settings, specify the custom headers by adding directives to manage them.

   {% assign session_header = "X-Custom-User-Session" %}
   {% assign session_value = "session_data" %}
   

2. Setting headers: Use Liquid's built-in functionality to set the headers in your responses. This can involve server-side scripts or middleware configurations.

   {{ response.set_header(session_header, session_value) }}
   

3. Persistent storage: Ensure that the headers are configured to store session data persistently across user interactions. This may require integrating with your backend systems to maintain session state.

Example usage

Here is an example of how you might configure and use custom HTTP headers in a Liquid-based application:

{% assign user_id = "12345" %}
{% assign session_id = "abcde12345" %}

{% assign custom_headers = {
  "X-Custom-User-ID": user_id,
  "X-Custom-Session-ID": session_id
} %}

{% for header, value in custom_headers %}
  {{ response.set_header(header, value) }}
{% endfor %}

Security notes

• Do not expose sensitive information through headers. Use encryption or other security measures as necessary.
• Adhere to legal requirements regarding data privacy and user consent when handling session information.

Troubleshooting tips

• Header conflicts: Avoid naming conflicts with standard HTTP headers or other custom headers used by your application.
• Performance: Monitor the performance impact of using custom headers, especially with large amounts of session data.