I am trying to upload an image to s3 bucket from CkEditor5. My front-end is built on vue and backend is on NodeJs. The uploading of images is working as expected as i can see the image is being saved to s3 bucket correctly. However I am having a confusion whether the bucket should be public or not ?
How CkEditor behaves to image uploading?
The ckEditor uses a simple upload adapter which uses its own built-in adapater that enables image uploading feature. When an images is dropped/copy-pasted to the ckEditor, it makes an http POST request to my backend NodeJs server and server in turns makes a call to S3 to upload that image(till this point everything is working as expected).
Now in order to embed an image inside CkEditor5, the server should respond with an URL attribute as JSON response like following so that CkEditor can fetch it and display inside editor.
{
url: url-path-of-image //full path of image in s3 bucket
}
This is where I am confused and need some pointers.
Question 1:
Should I make it public ? If yes, then what do I do about security, making it public will give access to anybody.
If I make it accessible with key/secret, how do I do it ?
Question 2:
This one is related to question#1
If I make it public then question#2 will not be an issue.However if I am not allowed to make it public in that case how would i display the images in normal div element ? Later on I need to display the content of CkEditor inside a div, with html parsing meaning inside a v-html attribute.
Any suggestions or pointers would be much helpful. Really appreciate taking time to read through the question.
I am not sure I am looking for the solutions. I can tell that it is related to signed urls in AWS S3. You keep bucket private, upload image to S3 and generate a signed url whenever you need to display the image to user on frontend.
If you learn more into the correct implementation please let me know.
Related
I have image upload in my system. I am struggling to understand what is the logic of serving images.
If I upload directly to wwwroot, the files will be accessible to everyone, which is not what I want.
I understand I could save the file contents in the database as base64 but those can be big files, and I would like them on the server in files.
I could convert them on the fly when requested. Most probably getting the path to file, then loading it in a memory stream and spitting out the base64. But seems overkill, and not an elegant solution. I use Automapper for most data and I have to write some crazy custom mappers, which I will If there is no other way.
I could create virtual path, which from what I understand maps physical path on server to a url which doesn't seem any different than option 1
I fancy there is a way to spit out a link/url that this user has access to (or at least logged users) that can be passed to the app so it can load it. Is this impossible or unreasonable? Or am I missing something?
What is the correct way of doing in general?
Also, what is a quick way to do it without spending days for setup?
To protect the specific static files, you can try the solutions explained in this official doc.
Solution A: Store static files you want to authorize outside of wwwroot, and call UseStaticFiles to specify a path and other StaticFileOptions after calling UseAuthorization, then set the fallback authorization policy.
Solution B: Store static files you want to authorize outside of wwwroot, and serve it via a controller action method to which authorization is applied and return a FileResult object.
Our product-specific images are at CDN and we want to store the image URL.
I found that we can do it in ProductContent with image type [PcntImageUrlOriginal]. Do we have an existing service?
You can use the inbuilt crud service:
create#mantle.product.ProductContent and set the contentLocation to a url I guess
The following is not an option as it receives the contents of the file as well as the extension but down below uses the inbuilt crud service.
mantle.product.ProductServices.create#ProductContent
declared in mantle-usl/service/mantle/product/ProductServices.xml
Why I can't update image this way?
Bigcommerce::createProductImage($product_id, array('image_file'=>'/home/user/bigcommerce/api/picture.jpg'));
The follow code works:
Bigcommerce::createProductImage($product_id, array('image_file'=>'https://cdn6.bigcommerce.com/s-0cvdh/products/32/images/299/apitec71q__46081.1484240387.1280.1280__30161.1484331218.1280.1280.jpg'));
According to the documentation, it is not possible to upload an image locally. The docs say:
When specifying a product image, the image_file should be specified as either:
a path to an image already uploaded via FTP to the import directory (with the path
relative to the import directory); or a URL to an image accessible on the internet.
It doesn't work because the BigCommerce servers have no idea where "/home/user/bigcommerce/api/picture.jpg" lives. That's a file that exists on your local machine, and you're passing a string to BigCommerce telling it where to get the file. It works in the second case because BigCommerce can access that URI.
In more general terms, you need to upload the image to a location that BigCommerce can access it, and then pass a URI that BigCommerce can use to retrieve the image. It may seem a little cumbersome, but it relieves BigCommerce from having to stream large amounts of data through their API.
I think I need some explanation on this. On this page:http://stage.bullydog.com/Products/unfiltered-product/bd/BDGTPD/bully-dog-gt-platinum-diesel, you will see the following images:
The 2 on the left don't have any query strings and are located at:
http://stage.bullydog.com/azure/bdgtpd/40420_1.png and http://stage.bullydog.com/azure/bdgtpd/40420_4.png
On the third image, I put a query string of ?w=500 and that is located at:
http://stage.bullydog.com/azure/bdgtpd/40420_5.png?w=500
Her is a capture of the network traffic when I requested the page that contained the images:
Here is where I need some clarification and overall what is happening here:
If the image url contains a query string, does it pull the image from the azure cdn? I noticed the image 40420_5.png?w=500 has a Request Url of http://stage.bullydog.com/azure/bdgtpd/40420_5.png?w=500, so it doesn't appear to be pulling from the azure cdn. Why is this?
For the other images, take 40420_4 for example, I noticed it issues a 302 first and then another request. Why does it do this?
If using srcset, is ImageResizer beneficial here, for example, is it better to set the different sources with the query string attached, such as 40420_5.png?w=250, 40420_5.png?w=500, etc or is it better to just create the different image sizes such as 40420_5_w250.png, 40420_5_w500.png? or maybe Slimmage with SlimResponse would be the way to go?
AzureReader2 will issue a redirect to Azure if processing isn't required. Otherwise, your browser will not be able to see that AzureReader2 is making an HTTP request in the background to fetch the source resource. Your URLs should always point to the ImageResizer server.
Srcset + ImageResizer is great. Most people use it with the w=[value] and zoom=[value] querystring commands.
On my photography website, I am storing photos on Amazon S3. To actually display them on the website, I am using signed URLs. This means that image URLs expire. Only the web application itself is able to generate valid image file URLs.
An example URL would look like this:
http://media.jungledragon.com/images/1849/21346_small.JPG?AWSAccessKeyId=05GMT0V3GWVNE7GGM1R2&Expires=1411603210&Signature=9MMO3zEXECtvB0w%2FuMEN8obt1ow%3D
Note that by the time you read this, that URL may have already expired. That's ok, the question is about the format.
Whilst the above URL format works fine on the website, it breaks XML files. The reason for this is the & character, which should be escaped.
For example, I'm trying to implement Windows 8.1 live tiles for the website, which you can link to an RSS feed. My RSS feed is here:
http://www.jungledragon.com/all/rss/promoted
That feed will work in most RSS readers, however, the Windows 8 tile builder (http://www.buildmypinnedsite.com/en) is particularly strict about the XML being valid. Here you can see the error it throws on said feed:
http://notifications.buildmypinnedsite.com/?feed=http://www.jungledragon.com/all/rss/promoted&id=1
Now, my simple thinking was to encode the & that are part of the signed URLs, by & or &. Whilst that may make the XML valid, unfortunately S3 does not accept & to be encoded. When used like that, the image will no longer load.
I'm wondering whether I am in a circular problem that cannot be solved?
I have had many similar problems with RSS feeds. XML documents should always use & (or an equivalent like & or &). If a reader is not capable of extracting the URL properly, then the reader is the culprit, not you. But I can tell you that reader programmers will disagree with you.
If you are a programmer, you could fix the problem by having a redirect, but that's a bit of work. So you'd retrieve the URL from S3, save that in your database and create a URL on your website such as http://www.jungledragon.com/images/123 and link the S3 URL with your images/123 page. Now when someone goes to page images/123, you retrieve the URL you saved from your S3 server.
Actually, if the URL http://www.jungledragon.com/images/123 is a reference to your image, you can get the S3 URL at that time and do the redirect on the fly!