PetaPixel recently posted an article about a flaw in Getty’s new free image embed control.
The presented method was based on resizing the frame height so that the attribution would fall outside the client area of the iframe. Getty quickly addressed the issue by scaling the image width relative to the height.
However, there is a more effective way to circumvent attribution; a way that Getty has no control over — short of revoking your access to the image or sending a C&D letter.
To be clear, I’m not suggesting people do this. Although I generally think Getty is an evil organization (prime example: their treatment of Daniel Morel), I’m a supporter of photographers’ rights… and it’s all the photographers who are getting screwed here.
IFrames and Web Security
This security feature makes it possible for unscrupulous websites to abuse Getty’s image embed control without Getty knowing.
An Aside: HTTP Referrer
As it stands, the only information Getty gets from you is the HTTP referrer (i.e. the URL where the image is hosted). One could eliminate this by forcing the image to come from https:// instead of // but this may show a security alert to end users in some cases. Also keep in mind that Getty could also very easily decide to block requests from blank referrers.
Visible Client Areas
Rather than resize the iframe, which Getty can react to, someone could create an outer element and resize its client area. This allows the iframe to be full size but the bottom portion containing attribution will overflow into a non-visible area.
<div style=" width: 507px; height: 333px; overflow: hidden;"> <iframe src="https://embed.gettyimages.com/embed/171583573?..." width="507" height="407" frameborder="0" scrolling="no"></iframe> </div>
Consider the archetypal stock photo of an attractive young woman sitting at a computer; wearing a headset:
And now without attribution:
This is another easy challenge to solve with a little CSS. In essence we’ll place an inert element above the iframe. Building upon the previous example:
<div style="position: relative; width: 507px; height: 333px; overflow: hidden;"> <div style="position: absolute: z-index: 1; width: 100%; height: 100%;"></div> <iframe src="https://embed.gettyimages.com/embed/171583573?..." width="507" height="407" frameborder="0" scrolling="no"></iframe> </div>
Here it is again… try to click on it:
Ways Getty Could Address This
I can think of a few ways Getty could overcome this scenario.
First, they could build a tool to crawl all the referring URLs and check for compliance/abuse. When they find an abuser, simply revoke access to the image tags. However, this is a large and complex task — although definitely within the realm of possibility.
Third, Getty could require users to sign up and register the website on which Getty’s images will be appearing. This would allow Getty to assign (and revoke) image tags based on the specific user and website. (For example, Joe registers example.com and then all image requests made by Joe have a token baked into the URL. This token uniquely identifies example.com. Next, when an image is requested, Getty checks that the referring URL matches the registered URL associated with the token — this added step prevents someone else from using Joe’s image tag on a different website).
Can you think of any other technical solutions Getty could employ?