Cloudinary Blog

Secure Image Transformations With Signed URLs on the Fly

Secure Image Transformations With Signed URLs
Modern websites and mobile apps frequently showcase images of various dimensions, sometimes varying the graphics, resolutions, and look and feel for different devices (desktop, mobile, etc.); and revamping the graphics with upgrades.
 
A key benefit Cloudinary offers is an easy, intuitive, and flexible process of modifying images. A case in point: by setting simple parameters in our dynamic URLs, you can resize or crop images, alter their shapes, and apply effects. After transforming images on the fly in the cloud and optimizing the resulting thumbnails, Cloudinary delivers them through a fast content delivery network (CDN).
 
All that makes it a snap to view the various images derived from a single high-resolution source. Here's an example of a dynamic image-manipulation URL in action:
 
 
 
100x80 Manipulated Yellow Tulip
 
 
Cloudinary's dynamic URLs can also fetch, manipulate, and deliver Facebook or Twitter profile pictures—in fact, any image with a public URL. For example:
 
 
100x80 Manipulated Facebook Profile
 
The above approach lacks security, however: anyone could delete a parameter, such as that for a watermark, by tweaking the image’s dynamic URL.
 
page load speed
 
To prevent arbitrary image fetches and edits, you can transform images while uploading them to Cloudinary or enable Cloudinary's strict-transformations mode to limit the number of transformations. However, because those are manual tasks that require working with authenticated APIs, you lose some of the flexibility in image manipulation. A better alternative is to secure your images.
 
To that end, check out Cloudinary's signed image URLs, which impose a higher degree of security while retaining the capabilities of dynamic flexible URLs.

Signed Image URLs

Cloudinary’s signed image URLs dynamically validate image signatures before display. Creating those URLs after enabling the Strict Transformations setting on your Cloudinary account's Settings page limits access to specific transformations and presigned URLs.
 
 
Strict settings
 
 
For example, take this scaled-down thumbnail, which is sourced from an image uploaded to Cloudinary:
 
 
 
Scaled down yellow tulip
 
To create a signed URL for the image (sometimes called signed images for short), set the 'sign_url' parameter to 'true' when building the URL or creating an image tag. The following Ruby on Rails example creates an image tag of a 300x200-pixel, center-cropped thumbnail of the original image and signs the generated URL:
Copy to clipboard
<%= cl_image_tag("yellow_tulip.jpg", :sign_url => true, 
                 :width =>300, :height => 200, :crop => :crop, :gravity => :center) %>
 
The image tag points to this CDN-based delivery URL, which contains a signature component:
 
 
300x200 signed manipulated yellow tulip
 
 
With the above setup, an attempt to apply a different transformation or add an invalid signature results in a 401 error message with the appropriate `X-Cld-Error` HTTP-header response, such as this one:
 
https://res.cloudinary.com/private-demo/image/upload/w_400,h_300,c_crop/yellow_tulip.jpg
 
X-Cld-Error: Transformation w_400,h_300,c_crop is not allowed
 
Below is another signed-URL example (in PHP), which applies a saturation-reduction effect and generates a circular crop.
Copy to clipboard
<?php echo cl_image_tag("yellow_tulip.jpg", array( "sign_url" => true, 
                        "width" => 300, "height" => 200, "crop" => "crop", 
                        "radius" => "max", "effect" => "saturation:-50" )); ?>
 
Rounded cornered signed yellow tulip 
Behind the scenes, a Cloudinary client-integration SDK creates the signature component in the format `/s--SIGNATURE--/`, which is a Base64 encoding of a SHA-1 digest of your image’s public ID and transformation string, concatenated with your API secret. If Cloudinary has already or is set to apply the transformation in question, Cloudinary skips the signature check and the signature itself can be omitted.
 

Strict Fetch URLs

You can pull original images with fetch URLs on Cloudinary. Concatenating a public image’s URL and Cloudinary's delivery URL fetches the original image, transforms; optimizes, and caches it; ultimately delivering the final version through a CDN.
 
Tip: To prevent dynamic fetching of images from arbitrary domains, go to your Cloudinary account's Settings page, click the Security tab near the top, and select Fetched URL under Restricted media types.
 
Additionally, by signing fetch URLs, you bypass the strict list of fetch domains and reap the dynamicity benefit of those URLs. As a demo, the following Django code generates an image tag of a signed URL that dynamically fetches a remote image from Wikipedia:
Copy to clipboard
cloudinary.CloudinaryImage(
  "http://upload.wikimedia.org/wikipedia/commons/4/44/Tulip_-_floriade_canberra.jpg").
  image(type = 'fetch', sign_url = True)
 
Signed fetched wikipedia tulip
 
Also, if you must fetch and manipulate images from different locations, signed URLs enable you to stay strict without having to manually update your Cloudinary configurations or use the authenticated APIs. For instance, this slightly more complex Node.js example generates a signed URL of a resized, fetched image, applies effects, and adds a watermark:
 
Copy to clipboard
cloudinary.image(
  "http://upload.wikimedia.org/wikipedia/commons/4/44/Tulip_-_floriade_canberra.jpg",
  { type: 'fetch', sign_url: true,
    transformation: [
     { width: 200, crop: 'scale', effect: 'saturation:30' }, 
     { overlay: "cloudinary_icon", opacity: 40, effect: 'brightness:200', 
       width: 0.8, flags: 'relative' }
    ] 
  });
 
Signed manipulated fetched wikipedia tulip
 

Summary

Coupled with a signature-based security mechanism, Cloudinary’s dynamic, flexible image-fetching and manipulation URLs are your answer for effective image management. You can embed any image in your website, create a responsive design with dynamic dimensions, and update it any time by changing the intuitive and simple URL parameters in your code. All the tasks are secure and abuse proof.
 
Recall that Cloudinary's client SDKs create signed URLs by automatically generating the signature for you. Ensure that you’re running the latest versions of the SDKs:
 
Image delivery based on signed URLs is available to all our free and paid plans. To try it out, first sign up to our free account

Recent Blog Posts

Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more
How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more
The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more