![\"diagram](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/bb-bh-Free-Image-Hosting-with-Cloudflare-Transform-Rules-and-Backblaze-B2_Design-D.png\" "\\"Free")
<\/p>\n<\/p>\n
Before I dive into using Cloudflare Transform Rules to implement image hosting on Backblaze B2 Cloud Storage, I\u2019d like to take a moment to introduce myself. I\u2019m Pat Patterson, recently hired by Backblaze as chief developer evangelist. I\u2019ve been working with technology and technical communities for close to two decades, at companies such as Sun Microsystems and Salesforce. I\u2019ll be creating and delivering technical content for you, our Backblaze B2 community, and advocating on your behalf within Backblaze. Feel free to follow my journey and reach out to me via Twitter<\/a> or LinkedIn<\/a>.<\/p>\n Now, on with the show! Cloudflare Transform Rules<\/a> give you access to HTTP traffic at the CDN edge server, allowing you to manipulate the URI path, query string, and HTTP headers of incoming requests and outgoing responses. Where Cloudflare Workers allow you to write JavaScript code that executes in the same environment, Transform Rules give you much of the same power without the semi-colons and curly braces.<\/p>\n Let\u2019s look at a specific use case: implementing image hosting on top of a cloud object store. Backblaze power user James Ross<\/a> wrote an excellent blog post back in August 2019, long before the introduction of Transform Rules, explaining how to do this with Cloudflare Workers and Backblaze B2<\/a>. We\u2019ll see how much of James\u2019 solution we can recreate with Transform Rules, without writing any<\/em> code. We\u2019ll also discover how the combination of Cloudflare and Backblaze allows you to create your own, personal 10GB image hosting site for free.<\/p>\n James\u2019 requirements were simple:<\/p>\n I\u2019ll work through each of these requirements in this blog post, and wrap up by explaining why Backblaze B2 might be a better long term provider for this and many other cloud object storage use cases than other cloud object stores.<\/p>\n It\u2019s worth noting that nothing here is Backblaze B2-specific\u2014the user\u2019s browser is requesting objects from a B2 Cloud Storage public bucket via their URLs, just as it would with any other cloud object store. The techniques are exactly the same on Amazon S3, for example.<\/p>\n You\u2019ll need accounts with both Cloudflare and Backblaze. You can get started for free with both:<\/p>\n You\u2019ll also need your own DNS domain, which I\u2019ll call If you already have a B2 Cloud Storage bucket you want to use for your image store, you can skip this section. Note: It doesn\u2019t matter whether you created the bucket and its objects via the B2 Native API<\/a>, the Backblaze S3 Compatible API<\/a>, or any other mechanism\u2014your objects are accessible to Cloudflare via their friendly URLs.<\/p>\n Log in to Backblaze, and click Buckets<\/strong> on the left under B2 Cloud Storage<\/strong>, then Create a Bucket<\/strong>. You will need to give your bucket a unique name, and make it public. Leave the other settings with their default values.<\/p>\n Note that the bucket name must be globally unique<\/em> within Backblaze B2, so you can\u2019t just call it something like \u201cmyfiles.\u201d You\u2019ll hide the bucket name from public view, so you can call it literally anything, as long as there isn\u2019t already a Backblaze B2 bucket with that name.<\/p>\n Finally, click Upload\/Download<\/strong> and upload a test file to your new bucket.<\/p>\n Click the file to see its details, including its various URLs.<\/p>\n In the next step, you\u2019ll rewrite requests that use your custom subdomain, for example, Make a note of the hostname<\/strong> in the friendly URL. As you can see in the previous paragraph, mine is You will need to activate your domain ( Now, in the Cloudflare dashboard, create your subdomain by adding a DNS CNAME record pointing to the bucket hostname you made a note of earlier.<\/p>\n I created If you test this right now by going to your test file\u2019s URL in your custom subdomain, for example, This is because, by default, Cloudflare accesses the upstream server via plain HTTP, rather than HTTPS. Backblaze only supports secure HTTPS connections, so the HTTP request fails. To remedy this, in the SSL\/TLS section of the Cloudflare dashboard, change the encryption mode from \u201cFlexible\u201d to \u201cFull (strict),\u201d so that Cloudflare connects to Backblaze via HTTPS, and requires a CA-issued certificate. Plus, although Full (strict) works, the TSL setting can be `Full` too.<\/p>\n Now you should be able to access your test file in your custom subdomain via a URL of the form You must also ensure that Automatic Signed Exchanges (SXGs) are not enabled in your Cloudflare domain configuration, as this feature is not compatible with Backblaze B2. See this Cloudflare forum post<\/a> for a deeper explanation.<\/p>\n There are three varieties of Cloudflare Transform Rules:<\/p>\n Click Rules<\/strong> on the left of the Cloudflare dashboard, then Transform Rules<\/strong>. You\u2019ll see that the Cloudflare free plan includes 10 Transform Rules\u2014plenty for our purposes. Click Create Transform Rule<\/strong>, then Rewrite URL<\/strong>.<\/p>\n It\u2019s useful to pause for a moment and think about what we need to ask Cloudflare to do. Users will be requesting URLs of the form Give your rule a descriptive name such as \u201cAdd file and bucket name.\u201d<\/p>\n There is an opportunity to set a condition that incoming requests must match to fire the trigger. In James\u2019 article, he tested that the path did not already begin with the At first glance, the Cloudflare dashboard doesn\u2019t offer \u201cdoes not start with\u201d as an operator.<\/p>\n However, clicking Edit expression<\/strong> reveals a more powerful way of specifying the condition:<\/p>\n The Cloudflare Rules language allows us to express our condition precisely:<\/p>\n Moving on, Cloudflare offers static and dynamic options for rewriting the path. A static rewrite would apply the same value to the URL path of every request. This use case requires a dynamic rewrite, where, for each request, Cloudflare evaluates the value as an expression which yields the path.<\/p>\n Your expression would prepend the existing path with Save the Transform Rule, and try to access your test file again, this time without the You should see your test file, as expected:<\/p>\n Great! Now, let\u2019s take a look at those HTTP headers in the response.<\/p>\n You could use Chrome Developer Tools to view the response headers, but I prefer the curl command line tool<\/a>. I used the Note: I\u2019ve removed some extraneous headers from this and subsequent HTTP responses for clarity and length.<\/p>\n Our goal is to remove all the Unfortunately there isn\u2019t a way to tell Cloudflare to remove all the headers that are prefixed Save the rule, and request your test file again. You should see fewer headers:<\/p>\n We can follow James\u2019 lead in making caching more efficient by leveraging the The Essentially, a cache can just request the HTTP headers for a resource and only proceed to fetch the resource body if the James constructed the ETag by using one of It\u2019s not possible to express this level of complexity in a Transform Rule, but we can apply a little lateral thinking to the problem. We can easily concatenate the three headers to create a result that will change when any one or more of them changes:<\/p>\n Note that it\u2019s possible for there to be multiple values of a given HTTP header, so Edit the Transform Rule you just created, update its name to something like \u201cRemove Backblaze B2 Headers, set ETag,\u201d and add a header with a dynamic value:<\/p>\n Don\u2019t worry about the ordering; Cloudflare will reorder the operations so that \u201cset\u201d occurs before \u201cremove.\u201d Also, if none of those headers are present in the response, resulting in an empty value for the Another test shows the result. Note that HTTP headers are not case-sensitive, so The other cache-related header is James\u2019 code, on the other hand, sets Note: We\u2019re effectively assuming that once created, files on the image host are immutable. This is often true for this use case, but you should think carefully about cache policy when you build your own solutions.<\/p>\n At present, Cloudflare Transform Rules do not give access to the HTTP status code, but, again, we can satisfy the requirement with a little thought and investigation. As mentioned above, for successful operations, Cloudflare sets Again, we need to use We\u2019ll leave the header as it\u2019s set by B2 Cloud Storage for failure cases, though it would be just as easy to override it.<\/p>\n Another test shows the results of our efforts:<\/p>\n Checking the failure case. As expected, Backblaze B2\u2019s default Success! Browsers and caches will aggressively cache responses, reducing the burden on Cloudflare and Backblaze B2.<\/p>\n We\u2019re almost done! Our final requirement is to set a cross-origin resource sharing (CORS)<\/a> header for images so that they can be manipulated in web pages from any domain on the web.<\/p>\n The Transform Rule must match a range of file extensions, and set the Upload a text file and run a final couple of tests to see the results. First, the image:<\/p>\n The Finally, the text file, without an Hello, World!<\/p>\n The most frequent issue I encountered while getting all this working was mixing up request and response when referencing HTTP headers. If things are not working as expected, double check that you don\u2019t have Backblaze B2 pricing<\/a> is very simple:<\/p>\nCloudflare Transform Rules<\/strong><\/h2>\n
Implementing Image Hosting on a Cloud Object Store<\/strong><\/h2>\n
\n
files.example.com<\/code>, rather than the cloud storage provider\u2019s domain.<\/li>\nPrerequisites<\/strong><\/h3>\n
\n
example.com<\/code> in this article, on which you can create subdomains such as files.example.com<\/code>. If you\u2019ve read this far, you likely already have at least one. Otherwise, you can register a new domain at Cloudflare for a few dollars a year, or your local equivalent.<\/p>\nCreate a Bucket for Your Images<\/strong><\/h3>\n
![\"B2](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/1-717x1024.png\")
<\/p>\n![\"B2](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/2-1024x464.png\")
<\/p>\n![\"B2](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/3-1024x865.png\")
<\/p>\nhttps:\/\/files.example.com\/smiley.png<\/code>, to the friendly URL of the form, https:\/\/f004.backblazeb2.com\/file\/metadaddy-public\/smiley.png<\/code>.<\/p>\nf004.backblazeb2.com<\/code>.<\/p>\nCreate a DNS Subdomain for Your Image Host<\/strong><\/h3>\n
example.com<\/code>, rather than files.example.com<\/code>) in your Cloudflare account, if you have not already done so.<\/p>\n![\"Cloudflare](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/4-1024x340.png\")
<\/p>\nfiles.superpat.com<\/code>, which points to my bucket\u2019s hostname, f004.backblazeb2.com<\/code>.<\/p>\nhttps:\/\/files.example.com\/file\/my-unique-bucket-name\/smiley.png<\/code>, after a few seconds you will see a 522 \u201cconnection timed out\u201d error from Cloudflare:<\/p>\n![\"Error](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/5-1024x765.png\")
<\/p>\n![\"Cloudflare](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/6-1024x681.png\")
<\/p>\nhttps:\/\/files.example.com\/file\/my-unique-bucket-name\/smiley.png<\/code>. The next task is to create the first Transform Rule to remove \/file\/my-unique-bucket-name<\/code> from the URL.<\/p>\nRewrite the URL Path on Incoming Requests<\/strong><\/h3>\n
\n
https:\/\/files.example.com\/smiley.png<\/code>, and we want the request to Backblaze B2 to be like https:\/\/f004.backblazeb2.com\/file\/metadaddy-public\/smiley.png<\/code>. We\u2019ve already taken care of the domain part of the URL, so it becomes clear that all we need to do is prefix the outgoing URL with \/file\/<bucket name><\/code>.<\/p>\n![\"Edit](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/7.png\")
<\/p>\n\/file\/<bucket name><\/code> prefix, so that you can refer to a file with either the short or long URL.<\/p>\n![\"When](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/8-1024x396.png\")
<\/p>\n![\"(http.request.uri.path](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/9-1024x229.png\")
<\/p>\n![\"not](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/10-1024x225.png\")
<\/p>\n\/file\/<bucket name><\/code>, like this:<\/p>\n![\"Cloudflare](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/11-1024x320.png\")
<\/p>\n\/file\/<bucket name><\/code> prefix in the URL path, for example: https:\/\/files.example.com\/smiley.png<\/code>.<\/p>\n![\"smiley](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/12-1024x474.png\")
<\/p>\nRemove HTTP Headers From the Response<\/strong><\/h3>\n
--head<\/code> argument to show the HTTP headers without the response body, since my terminal would not be happy with binary image data!<\/p>\n% curl --head https:\/\/files.superpat.com\/smiley.png
\nHTTP\/2 200
\ndate:<\/strong> Thu, 20 Jan 2022 01:26:10 GMT
\ncontent-type:<\/strong> image\/png
\ncontent-length:<\/strong> 23889
\nx-bz-file-name:<\/strong> smiley.png
\nx-bz-file-id:<\/strong> 4_zf1f51fb913357c4f74ed0c1b_f1163cc3f37a60613_d20220119_m204457_c004_v0402000_t0044
\nx-bz-content-sha1:<\/strong> 3cea1118fbaab607a7afd930480670970b278586
\nx-bz-upload-timestamp:<\/strong> 1642625097000
\nx-bz-info-src_last_modified_millis:<\/strong> 1642192830529
\ncache-control:<\/strong> max-age=14400
\ncf-cache-status:<\/strong> MISS
\nlast-modified:<\/strong> Thu, 20 Jan 2022 01:26:10 GMT<\/code><\/p>\nx-bz<\/code> headers. Create a Modify Response Header rule and set its name to something like \u201cRemove Backbaze B2 Headers.\u201d We want this rule to apply to all<\/em> traffic, so the match expression is simple:<\/p>\n![\"Use](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/13-1024x213.png\")
<\/p>\nx-bz<\/code>, so we just have to list them all:<\/p>\n![\"Modify](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/14-1024x437.png\")
<\/p>\n% curl --head https:\/\/files.superpat.com\/smiley.png
\nHTTP\/2 200
\ndate:<\/strong> Thu, 20 Jan 2022 01:57:01 GMT
\ncontent-type:<\/strong> image\/png
\ncontent-length:<\/strong> 23889
\ncache-control:<\/strong> max-age=14400
\ncf-cache-status:<\/strong> HIT
\nage:<\/strong> 1851
\nlast-modified:<\/strong> Thu, 20 Jan 2022 01:26:10 GMT<\/code><\/p>\nOptimize Cache Efficiency via the ETag and Cache-Control HTTP Headers<\/strong><\/h3>\n
ETag<\/code> header. As explained in the MDN Web Docs for ETag<\/a>:<\/p>\nETag<\/code><\/strong> (or entity tag<\/strong>) HTTP response header is an identifier for a specific version of a resource. It lets caches be more efficient and save bandwidth, as a web server does not need to resend a full response if the content was not changed.<\/p><\/blockquote>\nETag<\/code> has changed.<\/p>\nx-bz-content-sha1<\/code>, x-bz-info-src_last_modified_millis<\/code>, or x-bz-file-id<\/code>, in that order. If none of those headers are set, then neither is ETag<\/code>. James wanted to be sure that, in case x-bz-content-sha1<\/code> was not present in the Backblaze B2 response, he could set a value for ETag. In fact, x-bz-content-sha1<\/code> is present as an HTTP header in every Backblaze B2 response, so it\u2019s safe to use it directly as the value for ETag<\/code>. It\u2019s an interesting challenge to try to implement James\u2019 Cloudflare Worker logic in a Transform Rule, though!<\/p>\nconcat(http.response.headers[\"x-bz-content-sha1\"][0],
\nhttp.response.headers[\"x-bz-info-src_last_modified_millis\"][0],
\nhttp.response.headers[\"x-bz-file-id\"][0])<\/code><\/p>\nhttp.response.headers[\"<header-name>\"]<\/code> is an array. http.response.headers[\"<header-name>\"][0]<\/code> yields the first, and in most cases only, element of the array.<\/p>\n![\"You](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/15-1024x423.png\")
<\/p>\nETag<\/code> header, Cloudflare will not set that header at all. Exactly the behavior we need!<\/p>\netag<\/code> has just the same meaning as ETag<\/code>:<\/p>\n% curl --head https:\/\/files.superpat.com\/smiley.png
\nHTTP\/2 200
\ndate:<\/strong> Thu, 20 Jan 2022 02:01:19 GMT
\ncontent-type:<\/strong> image\/png
\ncontent-length:<\/strong> 23889
\ncache-control:<\/strong> max-age=14400
\ncf-cache-status:<\/strong> HIT
\nage:<\/strong> 2198
\nlast-modified:<\/strong> Thu, 20 Jan 2022 01:24:41 GMT
\netag:<\/strong> 3cea1118fbaab607a7afd930480670970b27858616421928305294_zf1f51fb913357c4f74ed0c1b_f1163cc3f37a60613_d20220119_m204457_c004_v0402000_t0044<\/code><\/p>\nCache-Control<\/code>, which tells the browser how to cache the resource. As you can see in the above responses, Cloudflare sets Cache-Control<\/code> to a max-age<\/code> of 14400 seconds<\/code>, or four hours.<\/p>\nCache-Control<\/code> according to whether or not the request to B2 Cloud Storage is successful. For an HTTP status code of 200, Cache-Control<\/code> is set to public<\/code>, max-age=31536000<\/code>, instructing the browser to cache the response for 31,536,000 seconds; in other words, a year. For any other HTTP status, Cache-Control<\/code> is set to public<\/code>, max-age=300<\/code>, so the browser only caches the response for five minutes. In both cases, the public<\/code> directive indicates that the response can be cached in a shared cache, even if the request contained an Authorization<\/code> header field.<\/p>\nCache-Control<\/code> to max-age=14400<\/code>, or four hours. For failed operations, for example, requesting a non-existent object, Cloudflare passes back the Cache-Control<\/code> header from Backblaze B2 of max-age=0<\/code>, no-cache<\/code>, no-store<\/code>. With this information, it\u2019s straightforward to construct a Transform Rule to increase max-age<\/code> from 14400<\/code> to 31536000<\/code> for the successful case:<\/p>\n![\"HTTP](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/16-1024x567.png\")
<\/p>\n[0]<\/code> to select the first matching HTTP header. Notice that this rule uses a static<\/em> value for the header\u2014it\u2019s the same for every matching response.<\/p>\n% curl --head https:\/\/files.superpat.com\/smiley.png
\nHTTP\/2 200
\ndate:<\/strong> Thu, 20 Jan 2022 02:31:38 GMT
\ncontent-type:<\/strong> image\/png
\ncontent-length:<\/strong> 23889
\ncache-control:<\/strong> public, max-age=31536000
\ncf-cache-status:<\/strong> HIT
\nage:<\/strong> 4017
\nlast-modified:<\/strong> Thu, 20 Jan 2022 01:24:41 GMT
\netag:<\/strong> 3cea1118fbaab607a7afd930480670970b27858616421928305294_zf1f51fb913357c4f74ed0c1b_f1163cc3f37a60613_d20220119_m204457_c004_v0402000_t0044<\/code><\/p>\ncache-control<\/code> header is passed through. Also, notice that there is no ETag<\/code> header, since B2 Cloud Storage did not return any x-bz<\/code> headers:<\/p>\n% curl --head https:\/\/files.superpat.com\/badname.png
\nHTTP\/2 404
\ndate:<\/strong> Thu, 20 Jan 2022 02:32:35 GMT
\ncontent-type:<\/strong> application\/json;charset=utf-8
\ncontent-length:<\/strong> 94
\ncache-control:<\/strong> max-age=0, no-cache, no-store
\ncf-cache-status:<\/strong> BYPASS<\/code><\/p>\nSet a CORS Header for Image Files<\/strong><\/h3>\n
Access-Control-Allow-Origin<\/code> HTTP response header to allow any<\/em> webpage to access resources:<\/p>\n![\"CORS](\"https:\/\/www.backblaze.com\/blog\/wp-content\/uploads\/2022\/02\/17-1024x565.png\")
<\/p>\n% curl --head https:\/\/files.superpat.com\/smiley.png
\nHTTP\/2 200
\ndate:<\/strong> Thu, 20 Jan 2022 02:50:52 GMT
\ncontent-type:<\/strong> image\/png
\ncontent-length:<\/strong> 23889
\ncache-control:<\/strong> public, max-age=31536000
\ncf-cache-status:<\/strong> HIT
\nage:<\/strong> 4459
\nlast-modified:<\/strong> Thu, 20 Jan 2022 01:36:33 GMT
\netag:<\/strong> 3cea1118fbaab607a7afd930480670970b27858616421928305294_zf1f51fb913357c4f74ed0c1b_f1163cc3f37a60613_d20220119_m204457_c004_v0402000_t0044
\naccess-control-allow-origin:<\/strong> *<\/code><\/p>\nAccess-Control-Allow-Origin<\/code> header is present, as expected.<\/p>\nAccess-Control-Allow-Origin<\/code> header. You can use the --include<\/code> argument rather than --head<\/code> to see the file content as well as the headers:<\/p>\n% curl --include https:\/\/files.superpat.com\/hello.txt
\nHTTP\/2 200
\ndate:<\/strong> Thu, 20 Jan 2022 02:48:51 GMT
\ncontent-type:<\/strong> text\/plain
\ncontent-length:<\/strong> 14
\naccept-ranges:<\/strong> bytes
\ncf-cache-status:<\/strong> DYNAMIC
\netag:<\/strong> 60fde9c2310b0d4cad4dab8d126b04387efba28916426467400754_zf1f51fb913357c4f74ed0c1b_f1092902424a40504_d20220120_m024635_c004_v0402003_t0000<\/code><\/p>\nTroubleshooting<\/strong><\/h3>\n
http.response.headers[\"<header-name>\"]<\/code> where you need http.request.headers[\"<header-name>\"]<\/code> or vice versa.<\/p>\nCan I Really Do This Free of Charge?<\/strong><\/h2>\n
Storage<\/strong><\/h5>\n
\n
Downloaded Data<\/strong><\/h5>\n
\n
Transactions<\/strong><\/h5>\n