Integrating TravelPayouts with Astro: Overcoming CSP and YAML Frontmatter Pitfalls

If you’re building a modern static site with Astro and want to monetize with TravelPayouts affiliate widgets, you’ll quickly discover two major hurdles: Content Security Policy (CSP) restrictions and YAML frontmatter formatting errors. Here’s how I solved both—and how you can, too.

The Problem: CSP and YAML Don’t Like Affiliate Scripts

TravelPayouts provides embeddable scripts for affiliate widgets. A typical snippet looks like this:

<div style="display: flex; justify-content: center; margin-bottom: 2rem;">
  <div style="width: 100%; max-width: 600px;">
    <script
      async
      src="https://tpembd.com/content?currency=usd&trs=YOUR_ID&shmarker=YOUR_MARKER.header&locale=en&powered_by=true"
      charset="utf-8">
    </script>
  </div>
</div>

If you paste this directly into your Astro content’s frontmatter (e.g., as an injectBeforeContent field), you might see an error like:

bad indentation of a mapping entry
  Location:
    /src/content/blog/your-article.md:16:13

Or, if your CSP is too strict, the widget simply won’t load.

Step 1: Fixing Content Security Policy (CSP) Issues

Astro sites often ship with a strict CSP, which blocks scripts from unknown domains. To allow TravelPayouts widgets, you need to update your CSP headers to include their domain.

Example for a static host (e.g., Netlify, Vercel, or your own server):

/*
  Content-Security-Policy: script-src 'self' https://tpembd.com; img-src 'self' https://tpembd.com; style-src 'self' 'unsafe-inline' https://tpembd.com
  • Add https://tpembd.com to script-src, img-src, and style-src as needed.
  • If your widget loads assets from other domains, add those too.

Tip:
Check your browser’s DevTools Console for CSP errors. They’ll tell you exactly which domains are being blocked.

Step 2: YAML Frontmatter Formatting—The Gotcha

Astro uses YAML frontmatter for content fields. YAML is picky about indentation and multi-line values. If you paste a multi-line HTML snippet directly, you’ll likely get a parsing error.

What NOT to do:

injectBeforeContent: "<div>...</div>
<div>...</div>"

or

injectBeforeContent:
  <div>...</div>
  <div>...</div>

The Right Way: Use Block Style and Indentation

  1. Use the pipe (|) to indicate a multi-line string.
  2. Indent every line of your HTML at least one space (two is safest).

Example:

injectBeforeContent: |
  <div style="display: flex; justify-content: center; margin-bottom: 2rem;">
    <div style="width: 100%; max-width: 600px;">
      <script
        async
        src="https://tpembd.com/content?currency=usd&trs=YOUR_ID&shmarker=YOUR_MARKER.header&locale=en&powered_by=true"
        charset="utf-8">
      </script>
    </div>
  </div>

If you forget the pipe or the indentation, you’ll get errors like:

bad indentation of a mapping entry
can not read a block mapping entry; a multiline key may not be an implicit key

Troubleshooting Checklist

  • CSP errors?
    Update your site’s headers to allow all required TravelPayouts domains.

  • YAML errors?

    • Use | for multi-line HTML.
    • Indent every line under the field.
    • Avoid tabs; use spaces.

  • Widget not showing?

    • Check for CSP errors in the browser console.
    • Make sure the script is not being blocked by an ad blocker.
    • Confirm the script and IDs are correct.

Conclusion

Integrating third-party scripts like TravelPayouts in Astro is totally doable—but you need to be precise with both your CSP and your YAML formatting. Once you get the hang of block-style YAML and update your headers, you’ll be able to embed affiliate widgets anywhere in your content.

Happy building—and happy earning!

Have you run into other integration headaches with Astro or affiliate scripts? Share your tips in the comments below!