Allow List Not Working

[elevationathletics]

I have:

    shield({
      sri: {
        // hashesModule: modulePath,
        enableMiddleware: true,
        scriptsAllowListUrls: [
          `https://www.google.com/recaptcha/api.js?render=MYKEY`,
        ],
      },
    }),

And I receive the error: Detected reference to not explicitly allowed external resource "https://www.google.com/recaptcha/api.js?render=MYKEY". Removing it.

I actually copied and pasted the URL from the error into my code, and it does not seem to help. Not sure what I'm doing wrong.

[castarco]

Hi @elevationathletics , sorry for the delay in the response. Could you share the Astro/HTML snippet where you include that script? That extra context might help to understand what's going on.

P.S.: Was hashesModule set in your configuration? or commented as in the example code that you passed? That detail could make a big difference (as it must be set for middleware to work well with external scripts).

[castarco]

Closing this, @elevationathletics hasn't said anything for a while, and I can't reproduce anything similar to what's being described.

[adleviton]

Sorry for a delayed response, I finally got a chance to revisit this. Maybe my issue has something to do with hybrid rendering? Also, this error is occuring during development (npm run dev). Let me know if this helps.

Here's stripped down version of my Astro config:

import { defineConfig } from "astro/config";
import { shield } from "@kindspells/astro-shield";
import { resolve } from "path";

const srcDir = "./src/app";

//Astro Shield
const rootDir = new URL(".", import.meta.url).pathname;
const modulePath = resolve(rootDir, "src", "config", "sriHashes.mjs");

// Begin Astro config
// https://astro.build/config

export default defineConfig({
  output: "hybrid",
  security: {
    checkOrigin: true,
  },
  srcDir,
  build: {
    inlineStylesheets: "auto",
    assets: "assets",
    assetsInlineLimit: 0,
  },
  prefetch: {
    prefetchAll: true,
    defaultStrategy: "hover",
  },
  integrations: [
    shield({
      sri: {
        hashesModule: modulePath, // SHOULD be set!
        enableMiddleware: true, // MUST be enabled for dynamic pages!
        scriptsAllowListUrls: ["https://www.google.com/recaptcha/api.js"],
      },
    }),
  ],
});

Here's an Astro component trying to load the Google recaptcha library:

---
const public_key = import.meta.env.PUBLIC_RECAPTCHA_KEY;
---

<link rel="preconnect" href="https://www.google.com" />
<link rel="preconnect" href="https://www.gstatic.com" crossorigin />

<style is:inline>
  .grecaptcha-badge {
    visibility: hidden !important;
    z-index: -1 !important;
  }
</style>

<script src={`https://www.google.com/recaptcha/api.js?render=${public_key}`}></script>

And here are the errors I'm seeing from Astro Shield:

Detected reference to not explicitly allowed external resource "https://www.google.com/recaptcha/api.js?render=6LcNawQqAAAAAEcUoZiBIe6Y1lyYJPZVNtaetIo5". Removing it.
Unable to obtain SRI hash for local resource: "/@id/astro:scripts/page.js"
Unable to obtain SRI hash for local resource: "/src/config/index.scss"
Unable to obtain SRI hash for local resource: "/node_modules/astro/components/viewtransitions.css"

[adleviton]

This has been resolved. Two issues I ran into:

I needed to change the example code for sriHashes.mjs to this (to avoid spaces in file path getting converted to "%20"):

const rootDir = fileURLToPath(new URL(".", import.meta.url));
const modulePath = resolve(rootDir, "src", "config", "sriHashes.mjs");

The scriptsAllowListUrls needs to be an exact match. In my case, I needed to figure out a way to append the URL paramteter.