Liberating out-of-copyright photos from SmartFrame's DRM
copyright drm · 40 comments · 800 words · read ~5,124 times.
During the middle of the 20th Century, the UK's Royal Air Force took thousands of photographs of the country from above. Think of it like a primitive Google Earth.
Those photographs are "Crown Copyright". For photographs created before 1st June 1957, the copyright expires after 50 years.
Recently, the organisation "Historic England" started sharing high-resolution copies of these photos on a nifty interactive map.
But there were two problems.
Firstly, they claimed that the photographs were still under copyright. This (no doubt inadvertent) mistake was pointed out to them and was eventually corrected.
It seems that, without announcement, @HistoricEngland have dropped the claim that copyright-expired pre-June 1957 RAF images are still in copyright, from their Aerial Photo Explorer pic.x.com/ucek7qzqxd
The second, and to my mind more troubling, problem is that the photos were "protected" using SmartFrame's Digital Restrictions Management.
SmartFrame has some useful features - it allows for high-resolution photos to be loaded "zoomed out" in lower resolution. The user can then zoom in on a portion which then gets loaded as higher resolution. That's it really. SmartFrame's main selling point is that it "brings robust image control". AKA, it uses DRM to prevent users from downloading images.
It also promises "Complete image protection". This is nonsense. If you transmit an image to a user, the user can copy that image.
Here's how easy it is to download the images which SmartFrame claims to protect.
Screenshots
The obvious flaw in SmartFrame is that users can take screenshots of the high-resolution image. Zoom in, screenshot, pan left, another screenshot, repeat.
Of course, stitching together all those images is a bit of a pain. But perfectly possible to automate if you wanted to.
Canvas Chunks
The way SmartFrame works is by loading small "chunks" of the image and then drawing then on a <canvas> element.
In your browser's network inspector, you'll see each 256x256 sub-image loading. 
The images are not encrypted, so they can be saved directly. Again, it is a manual and tedious process to scrape them all and then stitch them together.
Inspecting the network requests shows that they all use the same Accept Header of authorization/wndeym9ajvin,*/* - that appears to be common across multiple SmartFrame instances. Bad form of them to reuse that key!
Canvas Access
It's fairly easy to download anything drawn onto a <canvas> element by running:
JavaScript
var c = document.getElementsByClassName("stage")
c[0].toDataURL()
However, SmartFrame have overloaded the .toDataURL() function - so it produces a warning when you try that. It's simple enough to disable their JS once the image has loaded.
Of course, the <canvas> is smaller than the full resolution image - so you may need to manually increase its size first.
It's also possible to simply right-click on the <canvas> in the inspector and copy the Base64 representation of the image:
Putting it all together
I am indebted to Stuart Langridge for connecting all the dots. He has written and fully documented some code which is, essentially:
- Grab the canvas
- Resize it
- Wait several seconds for the image chunks to fully load onto the canvas
- Turn the canvas into a Data URL
- Download the data
It looks something like this:
var container = document.querySelector("div.articlePage.container");
container.style.width="6000px";
container.style.maxWidth="6000px";
setTimeout(()=>{
var stage = document.querySelector("canvas.stage");
var url = document.createElement("canvas").toDataURL.call(stage);
var a = document.createElement("a");
a.href = url;
a.download = "liberated.png";
a.click();
}, 3000);
And that's it. A user can paste a dozen lines of Javascript into their browser's console and get a full-resolution PNG.
Warnings
This technique should only be used to download images which are free of copyright restrictions.
Companies should be careful before buying a DRM solution and ensure that it is fit for purpose. SmartFrame really isn't suitable as sold. Despite its grandiose claims of "Super-strong encryption" and "Multi-layered theft-prevention" - it took less than weekend to bypass.
It is possible that SmartFrame will update their systems to defeat this particular flaw. But, thankfully, DRM can never work effectively. You can't give users a locked box and a key - then expect them to only unlock the box under the "right" circumstances. As Bruce Schneier once said:
trying to make digital files uncopyable is like trying to make water not wet.
var sf = document.querySelector("smart-frame"); var wedge = document.querySelector("canvas.canvas-wedge"); sf.style.width = wedge.width + "px";Daniel says:
k. says:
k. says:
k. says:
@edent says:
k. says:
Ray says:
Ray says:
var container = document.querySelector("div.articlePage.container"); container.style.width="6000px"; container.style.maxWidth="6000px";Right-clicked on the canvas element in the inspector and chose Copy> 'Image Data-URL' (as shown in the 'Canvas Access' section) to get the Base64 version. Pasted that into the address bar (in Firefox - presume it works similarly in other browsers) and pressed enter. Right-clicked the decoded Base64 image and saved the image as normal. Not quite as automated as the original method, but I got the high-res images.Concerned Citizen says:
Ray says:
Ray says:
Concerned Citizen says:
Dave Hedhehog says:
John says:
@edent says:
John says:
Ray says:
John says:
k. says:
John says:
Ray says:
k. says:
HedHuntr says:
@edent says:
HedHuntr says:
KT says:
HedHuntr says:
XD says:
https://github.com/hoixw/SmartFrameDownloader/ allows me to download any smart-frame files. Just a simple tampermonkey script.
k. says:
Hi XD,
It's not working anymore, or I wasn't able to use it. Can you check it?