AWS solutions medium security documentation change
Summary
Added content moderation feature using Amazon Rekognition to detect/blur inappropriate content
Security assessment
Content moderation helps prevent exposure to inappropriate material, which is a content security measure. The documentation specifies confidence thresholds and blurring controls.
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.