AWS solutions high security documentation change
Summary
Restructured documentation to differentiate between Lambda and ECS architectures. Added detailed configuration examples for image transformations, security restrictions, content moderation, custom headers, request expiration, and ECS administration workflows.
Security assessment
The change explicitly documents restricted Sharp operations (clone, metadata, stats, etc.) to prevent potential abuse, and mentions a deny-list for custom headers to block security-sensitive headers. These are concrete security controls to limit attack surfaces.
Diff
diff --git a/solutions/latest/dynamic-image-transformation-for-amazon-cloudfront/use-the-solution.md b/solutions/latest/dynamic-image-transformation-for-amazon-cloudfront/use-the-solution.md index b8ce2bf3f..9b861c542 100644 --- a//solutions/latest/dynamic-image-transformation-for-amazon-cloudfront/use-the-solution.md +++ b//solutions/latest/dynamic-image-transformation-for-amazon-cloudfront/use-the-solution.md @@ -5 +5 @@ -Use the demo UI +Lambda architectureECS architecture @@ -9 +9 @@ Use the demo UI -This section provides a user guide for utilizing the AWS solution. +This section provides a user guide for utilizing the AWS solution based on your chosen architecture. @@ -11 +11,5 @@ This section provides a user guide for utilizing the AWS solution. -## Use the demo UI +## Lambda architecture + +This section covers how to use the solution when deployed with the Lambda architecture. + +### Use the demo UI @@ -43,0 +48,693 @@ The Dynamic Image Transformation for Amazon CloudFront demo UI offers a limited +### Dynamically resize photos + +This solution offers the following **fit** options to dynamically resize an image: `cover`, `contain`, `fill`, `inside`, and `outside`. Refer to the [sharp documentation](https://sharp.pixelplumbing.com/api-resize) for a description of each fit. For example: + + + const imageRequest = JSON.stringify({ + bucket: "<myImageBucket>", + key: "<myImage.jpeg>", + edits: { + resize: { + width: 200, + height: 250, + fit: "cover" + } + } + }) + +If you use `contain` as the resize **fit** mode, you can specify the color of the fill by providing the hex code of the color you want to use. For example: + + + const imageRequest = JSON.stringify({ + bucket: "<myImageBucket>", + key: "<myImage.jpeg>", + edits: { + resize: { + width: 200, + height: 250, + fit: "contain", + background: { + r: 255, + g: 0, + b: 0, + alpha: 1 + } + } + } + }) + +### Edit images + +You can use this solution to edit your images, such as rotating them or changing the coloring to negative. Refer to the [sharp documentation](https://sharp.pixelplumbing.com/api-operation) for a description of each operation. For example, to produce a negative of an image, enter the following: + + + const imageRequest = JSON.stringify({ + bucket: "<myImageBucket>", + key: "<myImage.jpeg>", + edits: { + negate: true + } + }) + +#### Restricted operations + +Certain Sharp operations are restricted by the solution to help enhance security. This includes (but may not be limited to): + + * clone + + * metadata + + * stats + + * composite (Though this is permitted through the use of overlayWith) + + * certain [output options](https://sharp.pixelplumbing.com/api-output) (Including toFile, toBuffer, tile and raw) + + + + +For an exact list of allow-listed Sharp operations, you can visit [constants.ts](https://github.com/aws-solutions/serverless-image-handler/blob/main/source/image-handler/lib/constants.ts) on the Solution GitHub repository. + +### Use smart cropping + +This solution uses Amazon Rekognition for face detection in images submitted for smart cropping. To activate smart cropping on an image, add the **smartCrop** property to the **edits** property in the [image request](./use-the-solution-with-a-frontend-application.html). + + * **smartCrop(optional, boolean || object)** \- Activates the smart cropping feature for an original image. If the value is `true`, then the feature returns the first face detected from the original image with no additional options. For example: + + const imageRequest = JSON.stringify({ + bucket: "<myImageBucket>", + key: "<myImage.jpeg>", + edits: { + smartCrop: true + } + }) + +The following **smartCrop** variables are shown in the following code sample: + +**smartCrop.faceIndex(optional, number)** \- Specifies which face to focus on if multiple are present within an original image. The solution indexes detected faces in a zero-based array from the largest detected face to the smallest. If this value isn’t specified, Amazon Rekognition returns the largest face detected from the original image. **smartCrop.padding(optional, number)** \- Specifies an amount of padding in pixels to add around the cropped image. The solution applies the padding value to all sides of the cropped image. + + const imageRequest = JSON.stringify({ + bucket: "<myImageBucket>", + key: "<myImage.jpeg>", + edits: { + smartCrop: { + faceIndex: 1, // zero-based index of detected faces + padding: 40, // padding expressed in pixels, applied to all sides + } + } + }) + + + + +###### Note + +**smartCrop** is not supported for animated (such as, GIF) images. + +### Use round cropping + +This solution can crop images in a circular pattern. To activate round cropping on an image, add the **roundCrop** property to the **edits** property in the [image request](./use-the-solution-with-a-frontend-application.html). + + * **roundCrop(optional, boolean || object)** \- Activates the round cropping feature for an original image. If the value is true, then the feature returns a circular cropped image that’s centered from the original image and has a diameter of the smallest edge of the original image. For example: + + const imageRequest = JSON.stringify({ + bucket: "<myImageBucket>", + key: "<myImage.jpeg>", + edits: { + roundCrop: true + } + }) + +The following **roundCrop** variables are shown in the following code sample: + +**roundCrop.rx (optional, number)** \- Specifies the radius along the x-axis of the ellipse. If a value isn’t provided, the image handler defaults to a value that’s half the length of the smallest edge. **roundCrop.ry (optional, number)** \- Specifies the radius along the y-axis of the ellipse. If a value isn’t provided, the image handler defaults to a value that’s half the length of the smallest edge. **roundCrop.top(optional, number)** \- Specifies the offset from the top of the original image to place the center of the ellipse. If a value isn’t provided, the image handler defaults to a value that’s half of the height. **roundCrop.left (optional, number)** \- Specifies the offset from the left-most edge of the original image to place the center of the ellipse. If a value isn’t provided, the image handler defaults to a value that’s half of the width. + + const imageRequest = JSON.stringify({ + bucket: "<myImageBucket>", + key: "<myImage.jpeg>", + edits: { + roundCrop: { + rx: 30, // x-axis radius + ry: 20, // y-axis radius + top: 300, // offset from top edge of original image + left: 500 // offset from left edge of original image + } + } + }) + + + + +###### Note + +**roundCrop** is not supported for animated (such as, GIF) images. + +### Overlay an image + +This solution can overlay images on top of others, for cases like watermarking copyrighted image. To overlay an image, add the **overlayWith** property to the **edits** property in the [image request](./use-the-solution-with-a-frontend-application.html). + +**overlayWith(optional, object)** \- Overlays an image on top of the original. For example: + + + const imageRequest = JSON.stringify({ + bucket: "<myImageBucket>", + key: "<myImage.jpeg>", + edits: { + overlayWith: { + bucket: "<myImageBucket>", + key: "<myOverlayImage.jpeg>", + alpha: 0-100, // Opaque (0) to Transparent (100) + wRatio: 0-100, // Ratio of the underlying image that the overlay width should be + hRatio: 0-100, // Ratio of the underlying image that the overlay height should be + options: { + top: "-10p", + left: 150 + } + } + } + }) + +The following **overlayWith** variables are shown in the previous code sample: + + * **overlayWith.bucket (required, string)** \- Specifies the bucket that the overlay image should be retrieved from. This bucket must be present in the `SOURCE_BUCKETS` parameter. + + * **overlayWith.key (required, string)** \- Specifies the object key that is used for the overlay image. + + * **overlayWith.alpha (optional, number)** \- Specifies the opacity that should be used for the overlay image. This can be set from 0 (fully opaque) and 100 (fully transparent). + + * **overlayWith.wRatio (required, number)** \- Specifies the percentage of the width of underlying image that the overlay image should be sized to. This can be set from 0 and 100, where 100 indicates that the overlay image has the same width as the underlying image. + + * **overlayWith.hRatio (required, number)** \- Specifies the percentage of the height of underlying image that the overlay image should be sized to. This can be set from 0 and 100, where 100 indicates that the overlay image has the same height as the underlying image. + + * **overlayWith.options.top (optional, number | string)** \- Specifies the distance in pixels from the top edge of the underlying photo that the overlay should be placed. A number formatted as a string with a `p` at the end is treated as a percentage.