I deployed Serverless Image Handler to S3 bucket with using this guide. And it was successfull.
Also i tried Demo UI and it's working. But i can not get images in S3 bucket with Thumbor image requests. Like this;
https://<distName>.cloudfront.net/fit-in/500x500/image.png
For my current images when i add "fit-in/500x500" to url it gives "AccessDenied" error.
For urls produced by Serverless Image Handler Demo UI it says;
{
"status":400,
"code":"RequestTypeError",
"message":"The type of request you are making could not be processed. Please ensure that your original image is of a supported file type (jpg, png, tiff, webp) and that your image request is provided in the correct syntax. Refer to the documentation for additional guidance on forming image requests."
}
How can i make current buckets working with Serverless Image Handler by url?
Related
I am using AWS API Gateway put method to post an image to S3 bucket. In API Gateway settings when I add / in Binary Media Types I get the following error message
Access to fetch at ‘some_invokation_request/my_s3_bucket/image.png’ from origin ‘http://localhost:3001’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.
When I remove / from Binary media types in settings I can post an image and when I check the posted image in S3 it's messed up.
I'll post the original image and S3 image
Apparently this is an open issue right now and you can find further details here
I believe you have two different errors present. One is CORS related and the other is the upload of an image getting messed up. I don't think they are necessarily related. I've hit the same issue with the image upload showing the tiny white square but faced no CORS issue.
For me, the problem turned out to be trying to combine the use of Convert to Binary (if needed) and a mapping template on the Integration Request. According to the documentation (and my experience as well), if a mapping template is defined, APIGW doesn't run the Convert to Binary passthrough functionality. What gets passed to the S3 bucket for saving is a base64 encoded string instead of actual binary, thus the messed up image.
Excerpt from the linked documentation:
"On the contentHandling property of the Integration resource, set CONVERT_TO_BINARY. Set WHEN_NO_MATCH as the passthroughBehavior property value without defining a mapping template. This enables API Gateway to invoke the passthrough template."
I have created a React Application to upload a file to the S3 bucket. To do this, I have created a PUT API from the AWS API Gateway and the API is working well in the POSTMAN. The problem is, when I call the API from my React Application locally (http://localhost:3000), I'm getting a 500 error from the OPTIONS request (Preflight).
I have set the Binary Media Types to "image/jpeg" and When I remove the Binary Media Types, the API returns the 200 response, but then, an empty image is uploaded without its content.
How can I solve this?
This is my Request Integrations of both the PUT method and the OPTIONS method
PUT
OPTIONS
Binary Media Types
We have enabled AWS WAF solution before my ALB and have SQL injection and XSS detection enabled. We have tried to setup a custom rule to check if the content-type is multipart/form-data* using regex.
We have set that custom rule with higher priority. When using the custom rule the images are uploaded but the script tags are not forbidden. Without having the custom rule if we try uploading the images one particular image alone is not getting uploaded and throws 403 forbidden.
Any hints on adding XSS and custom rule to allow image uploads?
Goto your Web ACL and click on edit AWS-AWSManagedRulesCommonRuleSet and make Override rules action to True for rule SizeRestrictions_BODY
Check your image metadata. I recently encountered this issue, and was getting the "GenericRFI_BODY" error in the ACL logs. It turns out the test image I was uploading had an illegal path in its exif data. There was a URL that pointed to the site where the image came from in some metadata field, and the "://" pattern in that URL was triggering the rule. Stripping the metadata from the image allowed it to upload.
I strongly discourage base64 encoding to circumvent firewall rules. This will bloat the size of your files, and multipart/form-data exists specifically to stream large binaries back and forth from client to server - not to post massive serialized text blocks.
Here's the RFC: https://www.ietf.org/rfc/rfc2388.txt
I faced 403 issue in AWS firewall when I try to add image as multipart/form-data.
Some of the WAF rules which blocks the image upload are, AWS#AWSManagedRulesSQLiRuleSet#GenericRFI_BODY, AWS#AWSManagedRulesSQLiRuleSet#SQLi_BODY and AWS#AWSManagedRulesCommonRuleSet#CrossSiteScripting_BODY.
I solved this issue by uploading the image as base64 string instead of uploading as multipart/form-data.
In my case this was due to the following WAF rule:
ruleGroupList.0.ruleGroupId AWS#AWSManagedRulesCommonRuleSet
ruleGroupList.0.terminatingRule.ruleId SizeRestrictions_BODY
And I solved the problem by overriding the default rule action from BLOCK to CHALLENGE
I created a API Gateway which is Integrated to use S3 bucket. I see that when I tried to retrieve the object I am getting a 200 response. However I am getting some ackward text(probably a base64 or binary text rather than the image. Can you please let me know the fix.
So the answer is set the following headers:-
I'm using AWS Cloudfront to service audio files to user. Recently several user reported that they are unable to play my audio file. A browser refresh is required to make it work if the audio is stuck.
In the Google Chrome console, it outputs
Failed to load resource:
net::ERR_CACHE_OPERATION_NOT_SUPPORTED
I already have a cache settings in my Cloudfront Behavior settings,
Only default settings is on the origin s3 bucket.
CF cache settings
Any suggestion?
I faced the same issue with a cloudfront video failing to load due to this error. I was able to resolve it using javascript like this:
var videoLink = videoControl1.children[0].src; // videoControl1 is the HTML5 video element, should work similarly for audio.
if (!videoControl1.readyState){
videoControl1.children[0].src = videoLink + "?v=" + Math.random();
videoControl1.load();
}
I followed the suggestion from here: https://github.com/igvteam/igv.js/issues/424#issuecomment-336336788
If you are going to change audio/video source dynamically and play that video/audio, you need to load with load() JS function first that resource before playing.