{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"configure-custom-response-headers-for-portals-and-api-docs","__idx":0},"children":["Configure custom response headers for Portals and API docs"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"danger","name":"Deprecated docs"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The developer portal beta is ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/product-timelines"},"children":["approaching end of life"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use Realm and Reunite instead. Read the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs-legacy/developer-portal/migrate-from-legacy-portal"},"children":["migration guide"]},"."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When people visit your API docs or your developer portal website, their browsers receive more than just the text and images. Among other elements, the browser also receives the HTTP response header object. This object contains response headers that carry additional information about your website and the server hosting it. Some types of response headers can be used to control how the browser interprets and interacts with the data it receives."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can configure custom response headers for your API docs and Developer portals hosted in Workflows. Your custom headers are added to the response header object during the project build and according to criteria specified in the configuration file."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Workflows supports adding all standard ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers"},"children":["HTTP response headers"]}," to the configuration file."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"prerequisites","__idx":1},"children":["Prerequisites"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Access to the API version or Developer portal project repository"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Redocly Workflows user account"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"create-the-response-header-configuration-file","__idx":2},"children":["Create the response header configuration file"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The configuration file must be named ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customHeaders.yaml"]},". Create it in the root directory of your API version or Developer portal project."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The contents of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customHeaders.yaml"]}," file must be in the following format:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","header":{"controls":{"copy":{}}},"source":"customHeaders:\n  - pattern: 'example pattern'\n    headers:\n      - key: 'example response header name'\n        value: 'example value'\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pattern"]}," to specify the resource(s) to which the response headers should be added. For example, the general ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["**/*"]}," pattern means the headers are added to all resources, while the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["**/*.js"]}," pattern targets resources with the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".js"]}," file extension."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can add multiple ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pattern"]}," sections to the configuration file."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Every ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pattern"]}," section must contain at least one response header. Response headers are defined as key-value pairs under ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["headers"]},". When defining a response header, its ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["key"]}," must contain the header name, and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["value"]}," must contain one or more supported values for that response header."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"danger","name":"Important"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When building the project, Workflows reads the patterns from top to bottom and starts with the first matched pattern. If you want to use the general glob pattern (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["**/*"]},"), you must always place it at the end of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customHeaders.yaml"]}," file."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here is an example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customHeaders.yaml"]}," file with multiple patterns and response headers configured."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","header":{"controls":{"copy":{}}},"source":"customHeaders:\n  - pattern: '**/*.js'\n    headers:\n      - key: 'Referrer-Policy'\n        value: 'strict-origin'\n  - pattern: '**/*'\n    headers:\n      - key: 'Strict-Transport-Security'\n        value: 'max-age=31556926; includeSubDomains; preload'\n      - key: 'X-XSS-Protection'\n        value: '1;mode=block;'\n      - key: 'X-Content-Type-Options'\n        value: 'nosniff'\n      - key: 'Referrer-Policy'\n        value: 'strict-origin'\n      - key: 'Feature-Policy'\n        value: >-\n          autoplay 'none';\n          accelerometer 'none';\n          ambient-light-sensor 'none';\n          camera 'none';\n          encrypted-media 'none';\n          fullscreen 'none';\n          gyroscope 'none';\n          magnetometer 'none';\n          geolocation 'none';\n          microphone 'none';\n          midi 'none';\n          payment 'none';\n          picture-in-picture 'none';\n          sync-xhr 'none';\n          usb 'none';\n          encrypted-media 'none';\n          speaker 'none';\n          vr 'none';\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configure-the-content-security-policy-header","__idx":3},"children":["Configure the Content Security Policy header"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["One of the custom response headers you can configure in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customHeaders.yaml"]}," file is the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Content-Security-Policy"]}," header. This header is commonly used to implement security policies that prevent specific types of attacks, such as data injection and Cross-Site-Scripting (XSS). When defining the Content-Security-Policy header for your website, you are able to restrict which resources the browser is allowed to load. ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP"},"children":["Read more about CSP"]}," and the security features it supports."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To configure the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Content-Security-Policy"]}," header for your API docs or Developer portal project, add it to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customHeaders.yaml"]}," file. Follow the same ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"#create-the-response-header-configuration-file"},"children":["formatting rules"]}," as for the other headers. You can define multiple ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Content-Security-Policy"]}," headers targeting different resources."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here is an example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customHeaders.yaml"]}," file with CSP headers configured."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","header":{"controls":{"copy":{}}},"source":"customHeaders:\n  - pattern: '**/*.js'\n    headers:\n      - key: 'Content-Security-Policy'\n        value: >-\n          default-src 'none';\n          base-uri 'none';\n          object-src 'none';\n          connect-src 'none';\n          font-src 'none';\n          frame-src 'none';\n          child-src 'none';\n          form-action 'none';\n          media-src 'none';\n          worker-src 'none';\n          style-src 'self' 'none';\n          script-src 'self' 'none';\n          img-src 'self' 'none';\n          block-all-mixed-content;\n  - pattern: '**/*'\n    headers:\n      - key: 'Content-Security-Policy'\n        value: >-\n          default-src 'none';\n          script-src 'none';\n          img-src 'none';\n          base-uri 'none';\n          object-src 'none';\n          font-src 'none';\n          connect-src 'none';\n          frame-src 'none';\n          child-src 'none';\n          form-action 'none';\n          worker-src 'none';\n          media-src 'none';\n          frame-ancestors 'none';\n          block-all-mixed-content;\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"build-the-project-with-configured-custom-headers","__idx":4},"children":["Build the project with configured custom headers"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After adding your custom response headers to the configuration file, save the changes. Then, push the changes to your project's version control service."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Depending on your Workflows project settings, this either triggers a new build immediately, or triggers it after you merge the change to your production branch."]}]},"frontmatter":{"seo":{"title":"How to set up custom HTTP response headers"},"excludeFromSearch":true},"tagList":["admonition","partial"],"title":"How to set up custom HTTP response headers","lastModified":"2025-05-28T16:01:32.000Z"}