Forge Macro - AWS throws signing (403) Error loading React JS and CSS for Modal

AndrewTyson · February 8, 2025, 3:29am

Hi,

I am migrating a Connect app for Confluence to Forge. The app uses Modal for full screen rendering - see: Forge Custom UI - full screen view - #4 by AndrewTyson

When testing using the forge tunnel everything is working fine. However, when running against the deployed Development version opening the Modal causes the following 403 to be thrown trying to load some CSS file:

https://11mjj9z-1mjrd8qlkz-2mvzxg0itn--f9tn2a-1sufx9hajk-8n2z7khqh.cdn.prod.atlassian-dev.net/static/css/main.b17c460b.css

Loading the CSS into a browser window I can see the following:

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>SignatureDoesNotMatch</Code>
<Message>The request signature we calculated does not match the signature you provided. Check your key and signing method.</Message>
<AWSAccessKeyId>ASIA4OY4SXX6TFOY6EFW</AWSAccessKeyId>
<StringToSign>AWS4-HMAC-SHA256 20250208T025533Z 20250208/us-west-2/s3/aws4_request 85bc3a6778a4bb3a4844c650580d5c43d47412b813932998fb1cf5f78bdd6533</StringToSign>
<SignatureProvided>253b1910a4d405370408af2625bf9fd52c7c93dfd82b63fc221bdf70d2cae0a7</SignatureProvided>
<StringToSignBytes>41 57 53 34 2d 48 4d 41 43 2d 53 48 41 32 35 36 0a 32 30 32 35 30 32 30 38 54 30 32 35 35 33 33 5a 0a 32 30 32 35 30 32 30 38 2f 75 73 2d 77 65 73 74 2d 32 2f 73 33 2f 61 77 73 34 5f 72 65 71 75 65 73 74 0a 38 35 62 63 33 61 36 37 37 38 61 34 62 62 33 61 34 38 34 34 63 36 35 30 35 38 30 64 35 63 34 33 64 34 37 34 31 32 62 38 31 33 39 33 32 39 39 38 66 62 31 63 66 35 66 37 38 62 64 64 36 35 33 33</StringToSignBytes>
<CanonicalRequest>GET /static/css/main.b17c460b.css host:11mjj9z-1mjrd8qlkz-2mvzxg0itn--f9tn2a-1sufx9hajk-8n2z7khqh.cdn.prod.atlassian-dev.net x-amz-content-sha256:e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 x-amz-date:20250208T025533Z x-amz-security-token:IQoJb3JpZ2luX2VjEGsaCXVzLWVhc3QtMSJIMEYCIQCkEZcPafI4IfgOK0IW2lgCJwv73zFs2LNK2kcOTa2S8gIhAK1DMayjnnhoH6gi1ow2ch9KpC1c31ld3oQJgGwbLHWHKpcCCIT//////////wEQABoMODU2MzY5MDUzMTgxIgyOiVKU0UK31W/6qoAq6wG78TMvUB+GLJgQtGImUaC+r+vbtpVCpAyBCpcSoL6q0MahQiYy4tnRjwBTGcitr8VGYP0dy8uJ8051Zz8tEJxLW4ucIw4xFHauYIC+NNW7d2XkLojvESkPpXZpGpw/+BzWTlqTjfQ3SHob+sHxgcgvWmx9kEmuF9hiHNOzuPdAR1u6OtN38kwh0+0hQ2vG0l6sgBArlu4vc+3OnuDuFD+o5EgRsDPpQpYy+Iq0B1Obml7WDzw1c/aVWLyNTh4jKmBWuQ4tbDSDGcYtEANki9fMna48o0iOyJYPEZu4MEeHFJ9DfUub4XruX9jnMOeBm70GOo4BsdjxSc9Ai5r1PEs/3NTVVMm0FReFL39cPPTZjeNyOZDUmfZK538EDStXl5FHq8IjBhB84W/ynOT2qUlEM/yf0cN+VbaGltFuvrpPdpEtPpa0QsCIB0xiyxqvvcmDTZyWDDcYq1fJhw83+sWGTsfO9SK+2BWItFdF8hQkT+I0jDR1kzI5Be1c54Oh6T9pMQ== x-amz-source-account:550879909989 x-amz-source-arn:arn:aws:cloudfront::550879909989:distribution/E2UB95Z1GRM0E6 host;x-amz-content-sha256;x-amz-date;x-amz-security-token;x-amz-source-account;x-amz-source-arn e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855</CanonicalRequest>
<CanonicalRequestBytes>47 45 54 0a 2f 73 74 61 74 69 63 2f 63 73 73 2f 6d 61 69 6e 2e 62 31 37 63 34 36 30 62 2e 63 73 73 0a 0a 68 6f 73 74 3a 31 31 6d 6a 6a 39 7a 2d 31 6d 6a 72 64 38 71 6c 6b 7a 2d 32 6d 76 7a 78 67 30 69 74 6e 2d 2d 66 39 74 6e 32 61 2d 31 73 75 66 78 39 68 61 6a 6b 2d 38 6e 32 7a 37 6b 68 71 68 2e 63 64 6e 2e 70 72 6f 64 2e 61 74 6c 61 73 73 69 61 6e 2d 64 65 76 2e 6e 65 74 0a 78 2d 61 6d 7a 2d 63 6f 6e 74 65 6e 74 2d 73 68 61 32 35 36 3a 65 33 62 30 63 34 34 32 39 38 66 63 31 63 31 34 39 61 66 62 66 34 63 38 39 39 36 66 62 39 32 34 32 37 61 65 34 31 65 34 36 34 39 62 39 33 34 63 61 34 39 35 39 39 31 62 37 38 35 32 62 38 35 35 0a 78 2d 61 6d 7a 2d 64 61 74 65 3a 32 30 32 35 30 32 30 38 54 30 32 35 35 33 33 5a 0a 78 2d 61 6d 7a 2d 73 65 63 75 72 69 74 79 2d 74 6f 6b 65 6e 3a 49 51 6f 4a 62 33 4a 70 5a 32 6c 75 58 32 56 6a 45 47 73 61 43 58 56 7a 4c 57 56 68 63 33 51 74 4d 53 4a 49 4d 45 59 43 49 51 43 6b 45 5a 63 50 61 66 49 34 49 66 67 4f 4b 30 49 57 32 6c 67 43 4a 77 76 37 33 7a 46 73 32 4c 4e 4b 32 6b 63 4f 54 61 32 53 38 67 49 68 41 4b 31 44 4d 61 79 6a 6e 6e 68 6f 48 36 67 69 31 6f 77 32 63 68 39 4b 70 43 31 63 33 31 6c 64 33 6f 51 4a 67 47 77 62 4c 48 57 48 4b 70 63 43 43 49 54 2f 2f 2f 2f 2f 2f 2f 2f 2f 2f 77 45 51 41 42 6f 4d 4f 44 55 32 4d 7a 59 35 4d 44 55 7a 4d 54 67 78 49 67 79 4f 69 56 4b 55 30 55 4b 33 31 57 2f 36 71 6f 41 71 36 77 47 37 38 54 4d 76 55 42 2b 47 4c 4a 67 51 74 47 49 6d 55 61 43 2b 72 2b 76 62 74 70 56 43 70 41 79 42 43 70 63 53 6f 4c 36 71 30 4d 61 68 51 69 59 79 34 74 6e 52 6a 77 42 54 47 63 69 74 72 38 56 47 59 50 30 64 79 38 75 4a 38 30 35 31 5a 7a 38 74 45 4a 78 4c 57 34 75 63 49 77 34 78 46 48 61 75 59 49 43 2b 4e 4e 57 37 64 32 58 6b 4c 6f 6a 76 45 53 6b 50 70 58 5a 70 47 70 77 2f 2b 42 7a 57 54 6c 71 54 6a 66 51 33 53 48 6f 62 2b 73 48 78 67 63 67 76 57 6d 78 39 6b 45 6d 75 46 39 68 69 48 4e 4f 7a 75 50 64 41 52 31 75 36 4f 74 4e 33 38 6b 77 68 30 2b 30 68 51 32 76 47 30 6c 36 73 67 42 41 72 6c 75 34 76 63 2b 33 4f 6e 75 44 75 46 44 2b 6f 35 45 67 52 73 44 50 70 51 70 59 79 2b 49 71 30 42 31 4f 62 6d 6c 37 57 44 7a 77 31 63 2f 61 56 57 4c 79 4e 54 68 34 6a 4b 6d 42 57 75 51 34 74 62 44 53 44 47 63 59 74 45 41 4e 6b 69 39 66 4d 6e 61 34 38 6f 30 69 4f 79 4a 59 50 45 5a 75 34 4d 45 65 48 46 4a 39 44 66 55 75 62 34 58 72 75 58 39 6a 6e 4d 4f 65 42 6d 37 30 47 4f 6f 34 42 73 64 6a 78 53 63 39 41 69 35 72 31 50 45 73 2f 33 4e 54 56 56 4d 6d 30 46 52 65 46 4c 33 39 63 50 50 54 5a 6a 65 4e 79 4f 5a 44 55 6d 66 5a 4b 35 33 38 45 44 53 74 58 6c 35 46 48 71 38 49 6a 42 68 42 38 34 57 2f 79 6e 4f 54 32 71 55 6c 45 4d 2f 79 66 30 63 4e 2b 56 62 61 47 6c 74 46 75 76 72 70 50 64 70 45 74 50 70 61 30 51 73 43 49 42 30 78 69 79 78 71 76 76 63 6d 44 54 5a 79 57 44 44 63 59 71 31 66 4a 68 77 38 33 2b 73 57 47 54 73 66 4f 39 53 4b 2b 32 42 57 49 74 46 64 46 38 68 51 6b 54 2b 49 30 6a 44 52 31 6b 7a 49 35 42 65 31 63 35 34 4f 68 36 54 39 70 4d 51 3d 3d 0a 78 2d 61 6d 7a 2d 73 6f 75 72 63 65 2d 61 63 63 6f 75 6e 74 3a 35 35 30 38 37 39 39 30 39 39 38 39 0a 78 2d 61 6d 7a 2d 73 6f 75 72 63 65 2d 61 72 6e 3a 61 72 6e 3a 61 77 73 3a 63 6c 6f 75 64 66 72 6f 6e 74 3a 3a 35 35 30 38 37 39 39 30 39 39 38 39 3a 64 69 73 74 72 69 62 75 74 69 6f 6e 2f 45 32 55 42 39 35 5a 31 47 52 4d 30 45 36 0a 0a 68 6f 73 74 3b 78 2d 61 6d 7a 2d 63 6f 6e 74 65 6e 74 2d 73 68 61 32 35 36 3b 78 2d 61 6d 7a 2d 64 61 74 65 3b 78 2d 61 6d 7a 2d 73 65 63 75 72 69 74 79 2d 74 6f 6b 65 6e 3b 78 2d 61 6d 7a 2d 73 6f 75 72 63 65 2d 61 63 63 6f 75 6e 74 3b 78 2d 61 6d 7a 2d 73 6f 75 72 63 65 2d 61 72 6e 0a 65 33 62 30 63 34 34 32 39 38 66 63 31 63 31 34 39 61 66 62 66 34 63 38 39 39 36 66 62 39 32 34 32 37 61 65 34 31 65 34 36 34 39 62 39 33 34 63 61 34 39 35 39 39 31 62 37 38 35 32 62 38 35 35</CanonicalRequestBytes>
<RequestId>DXME8Y5JT3RS5DBS</RequestId>
<HostId>Pggzudp98cOiKu6NAtmlBkBmLgKpCl3N1AvZIoJ4RuN8kuCro+mWcAzPGX89rcmmpTnFoual3SM=</HostId>
...
</Error>

The macro in the main page is working as expected and serves the same CSS.

Thanks and regards,
Andrew

AndrewTyson · February 11, 2025, 10:49am

Doing a bit more investigation this seems to be an AWS signing request issue when loading the modal artefacts like JS and CSS from an AWS S3 buckt where Forge hosts the application:

This seems to be a Forge bug - how do I go about raising it with the team?

AndrewTyson · February 15, 2025, 2:15am

Ok - got to the bottom of the problem. There were some minor differences in the @forge/bridge and @forge/react versions in the package.json for the primary app React app compared with the modal React app. When these were aligned (amongst some other settings) it works fine. The git change log can be seen below:

The modal documentation should emphasize that the versions need to be aligned, because the resulting error is very obscure and hard to diagnose the root cause.