CSP Header is not updated

[pinny13]

Checkboxes for prior research

• I've gone through Developer Guide and API reference
• I've checked AWS Forums and StackOverflow.
• I've searched for previous similar issues and didn't find any solution.

Describe the bug

After reading https://aws.amazon.com/blogs/developer/middleware-stack-modular-aws-sdk-js/ I tried to update my client's CSP policy. When I make the call I can see that middleware args does have my connect-src value, but I see get error saying that call failed due to CSP polity and the print out of the header does NOT include *.amazonaws.com

How can I fix that?

Regression Issue

• Select this option if this issue appears to be a regression.

SDK version number

@aws-sdk/package-name@version, ...

Which JavaScript Runtime is this issue in?

Node.js

Details of the browser/Node.js/ReactNative version

calling from a React component in the browser

Reproduction Steps

client.middlewareStack.add(
    (next) => async (args: any) => {
      // Add CSP headers to the request
      if (!args.request.headers) {
        args.request.headers = {};
      }

      args.request.headers["Content-Security-Policy"] = [
        "default-src 'self';",
        "script-src 'self' 'unsafe-inline' *.awswaf.com;",
        "connect-src 'self' *.amazonaws.com;",
        "img-src 'self' data: https:;",
        "style-src 'self' 'unsafe-inline';",
        "frame-ancestors 'none';",
        "object-src 'none'",
      ].join(" ");

      console.log("!!! ARGS !!!", args);
      // Call the next middleware in the stack
      // return next(args);

      const result = await next(args);
      return result;
    },
    {
      step: "build",
      name: "addSecurityHeadersMiddleware",
    }
  );

  return client;
};

Observed Behavior

CSP is not updated

Expected Behavior

CSP should be updated

Possible Solution

No response

Additional Information/Context

No response

[zshzbh]

Hey @pinny13 ,

Which client did you use? Since you didn't mention which client so I just used S3 client to reproduce and I can't reproduce this issue. the *.amazonaws.com exists in the header.

{
    "Content-Security-Policy": "default-src 'self'; script-src 'self' 'unsafe-inline' *.awswaf.com; connect-src 'self' *.amazonaws.com; img-src 'self' data: https:; style-src 'self' 'unsafe-inline'; frame-ancestors 'none'; object-src 'none'",
    "x-amz-user-agent": "aws-sdk-js/3.782.0 ua/2.1 os/macOS#10.15.7 lang/js md/browser#Chrome_134.0.0.0 api/s3#3.782.0 m/E,e",
    "host": "new-bucket-maggie-ma.s3.us-east-1.amazonaws.com",
    "amz-sdk-invocation-id": "d3c94b97-ccad-42ff-b6a5-d5a6428469bc",
    "amz-sdk-request": "attempt=1; max=3"
}

Sharing my code for reference -

import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";
import { ListObjectsCommand, S3Client } from "@aws-sdk/client-s3";

// Initialize S3 client with credentials
const client = new S3Client({ 
  region: "us-east-1",
  credentials: {
    accessKeyId: "xxxx", 
    secretAccessKey: "xxxx"
  }
});

client.middlewareStack.add(
  (next) => async (args) => {
    if (!args.request.headers) {
      args.request.headers = {};
    }

    args.request.headers["Content-Security-Policy"] = [
      "default-src 'self';",
      "script-src 'self' 'unsafe-inline' *.awswaf.com;",
      "connect-src 'self' *.amazonaws.com;",
      "img-src 'self' data: https:;",
      "style-src 'self' 'unsafe-inline';",
      "frame-ancestors 'none';",
      "object-src 'none'",
    ].join(" ");

    console.log("!!! ARGS !!!", args);
    const result = await next(args);
    return result;
  },
  {
    step: "build",
    name: "addSecurityHeadersMiddleware",
  }
);

function App() {
  const [objects, setObjects] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleListObjects = async () => {
    setLoading(true);
    try {
      const response = await client.send(
        new ListObjectsCommand({
          Bucket: "new-bucket-maggie-ma",
        })
      );
      console.log("S3 Response:", response);
      if (response.Contents) {
        setObjects(response.Contents);
      }
    } catch (error) {
      console.error("Error listing objects:", error);
      alert("Error listing objects: " + error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        
        <button
          onClick={handleListObjects}
          style={{
            padding: '10px 20px',
            margin: '20px',
            fontSize: '16px',
            cursor: 'pointer',
            backgroundColor: '#61dafb',
            border: 'none',
            borderRadius: '4px',
            color: 'white'
          }}
          disabled={loading}
        >
          {loading ? "Loading..." : "List S3 Objects"}
        </button>

        {objects.length > 0 && (
          <div style={{ maxWidth: '600px', textAlign: 'left' }}>
            <h3>Bucket Contents:</h3>
            <ul>
              {objects.map((object, index) => (
                <li key={index}>
                  {object.Key} ({object.Size} bytes)
                </li>
              ))}
            </ul>
          </div>
        )}

        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

And the call is successful.

[zshzbh]

It might be a client specific issue if you are still seeing this issue. Could you please share minimal reproduction including the client initialization?

Thanks!

[github-actions]

This issue has not received a response in 1 week. If you still think there is a problem, please leave a comment to avoid the issue from automatically closing.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in this thread.