[Tip] How to protect Image file

Question

Hello,
If you have ever wanted to protect your image file,
especially within your Flash content,
this article will be helpful.
First of all, there are some points you need to protect when
you deliver image data with Flash.
1. Internet Browser Cache.
Even though you use 'HTTPS' protocol when you deliver your
file,
if it is pass the 'Network (or Protocol) Layer' of your
machine, it is already in 'plain' data
(not encrypted), and can be read by Internet Browser.
Those 'plain' data will be stored in Internet Browser's
Cache directory.
There are many Internet Browser Cache reader programs, and
they can intercept those
data before the Internet Browser program deletes the cache
files.
So, just using 'HTTPS' is not an answer. You need to encode
your image data
with your own (or with well known cypher algorithms)
encoding/decoding methods.
In this article, I want to explain more detail about this. I
scramble the image
so that make it hard to figure out what the original image
was, not only with human eyes
but also with 'strong enough' 'Key' length.
2. Screen Capture.
Even if you encoded your image data, it will be finally
shown on your screen,
without any noises, or any other ugly filters.
So, you can 'Capture' your monitor screen itself.
There can be many ways to avoid this. First, you can erase
the system's 'Clip board'.
You just can erase it regularly, or you can detect whether
the Internet Browser -which is
showing your image data- is active or not and erase clip
board when it is active (in foreground),
and hide your Flash area when the browser is inactive (in
background).
If a hacker just take a picture of monitor screen with high
quality Camera,
you still can avoid that, by showing some black rectangle,
or any layers on the screen
regularly only in very short period (like mili-second). But
I think this way sometimes you feel
tired or be annoyed when you watch that kind of blinking
screen.
== About my code ==
What I want to present here today is 'modifying(encoding) the
image' data itself.
There are many ways you can try for modifying your image data
and revert it back to original data.
You can use legacy block cipher algorithms like DES, AES, for
encoding and decoding the
image data, because the image data (RGB values) what Flash
uses is actually a combination of 'bit's.
But if you decode the 'encoded image' data, you probably use
'get pixel'/'set pixel' function for
reconstructing the proper 'RGB' value of each pixel. But I am
sorry that this function is extremely slow
so that you need to wait for a couple of minutes to see an
image.
So, what I want to show you today is 'Scrambling the image'
like 'picture puzzle',
with using 'copyPixels' function which is 'extremely fast'.
(Actually, there can be many other solutions for this, so
please don't hesitate to proceed your own research)
Let's say you have 8*8 pixel size of image blocks, and you
completely disorder those blocks for
entire image area. That size of block is too small to figure
out where it should be, with our
humble human being's naked eyes. So, you need to know the
'answer', which is saying what image block
was originally on which 'cell'. This 'answer' is the 'key'
for my simple 'image scramble' logic.
The 'key' I said here, you should understand that, is the
'key' value of normal 'block cipher' algorithms.
So, if you know the key, you can rearrange all those 'blocks'
back, but if you don't know the key,
simply you can't do that, or you need to wates tremendous
time for that.
Here, I use 16*16 size block for your eye's convenience, and
with 8*8 size of 'matrix' which is
comprised of each 16*16 size blocks. I mean, one 8*8 matrix
has 64 blocks, so each block of
one 'matrix' can be at '1st cell of matrix or 64th cell of
matrix. So, the 'odds' is 'Factorial of 64',
which is 64! == 1.268869322e+89 .
Let's say you know my algorithm (complete source code), and
you try every different 'matrix' values.
If it takes 0.001 seconds to test one 'matrix' value you have
chosen, it will take
"(64!) / (1000*60*60*24*365) =
4.0235582250724303685766549129617e+78" Years!!!! to find exact
matrix value.
== FLA sample ==
In my sample *.fla file, I embedded all those 'key' values.
So, you can not use my sample directly for your
own project. But I think this sample will give you an useful
idea for your own implementation.
<* Exchanging the key values *>
For example, you need to get the 'key' values from the
server, only when it is needed.
You can use 'loadVariables()' function for this purpose.
But, all data delivered by 'loadVariables()' or
'getUrl()', or any other functions of Flash, are
'Cached'.... So, you need to exchange that 'key' values
more safer way.
One of that 'safer key exchange' is to use 'token'. For
example, when the client requests the key value
to the server, the client should generate an random value (I
will call it 'token') and send it to the server.
Now the server modifies the 'key' value 'with the token',
and sends back to client. Finally, the client
decode the 'key' value with the token value it generated.
As you can see, my logic is just 'rearranging each blocks'
with respond to the given matrix values (key).
It is really really simple. There in the ActionScript code,
you can see 3 matrix, and some other variables.
var chessunit = 16 // Size of block
var arrayw = 8 // Width of Matrix
var arrayh = 8 // Height of Matrix
var arraysize = arrayh * arrayw
var chessarray = Array (arraysize) // Matrix for decoding
chessarray = Array
(64,37,5,35,45,25,52,38,12,61,34,23,3,26,39,58,32,28,17,2,60,16,59,19,57,48,43,18,47,21,4 0,15,31,6,44,46,30,51,27,56,20,24,13,7,42,1,49,54,36,53,9,50,4,8,10,14,33,11,22,63,55,29,4 1,62)
// In case of the width of an image is not exactly the
multiple of the width of matrix,
// we need to encode the right most area of the image.
// So, I simply use another matrix for only that area.
// Maybe You can generate more bigger image, of which the
width of it is exactly the multiple of
// the width of matrix. And you let the decoder to show only
the original size of the image.
// Please try yourself. :)
var dwArray = Array
(32,19,3,18,23,13,26,6,31,17,12,2,20,29,16,14,9,1,30,8,10,24,22,11,15,28,7,4,21,25,27,5)
// In case of the Height of an image is not exactly the
multiple of the Height of matrix,
// we need to encode the bottom most area of the image.
// So, I simply use another matrix for only that area.
// Maybe You can generate more bigger image, of which the
Height of it is exactly the multiple of
// the Height of matrix. And you let the decoder to show
only the original size of the image.
// Please try yourself. :)
var dhArray = Array
(40,23,4,22,29,16,33,24,8,38,21,15,2,17,37,20,18,11,1,10,12,36,30,27,13,25,28,14,19,32,35 ,7,5,26,3,31,34,6,9,39)
You can change the block size, matrix size, any values you
want.
By the way, if the block size becomes smaller, you'll get
more stronger security level. But you have to
compensate it with the slow down of the performance.
** Ooops, I can not attach my sample *.fla file, but only
ActionScript code here...
But I believe you can try without testing my *.fla sample.
If you really want to test it, please mail me.
([email protected])
** You need to 'export' image object, with the name of
"img0".
== Image encoder ==
Encoding (Scramble) the original image is also simple. You
just need to copy each blocks in reverse of
the 'ActionScript code'. That's all. You just use same
'matrix', but copy source and target reverse of
ActionScript code. I think you can write it with any
languages you like, C/C++, C#, Java, and
anything.... right?
== Block cipher ==
Now, you know that my implementation is kind of 'intuitive'
representation of 'block cipher'.
More precisely, it is called 'ECB', which encodes each
encoding block (matrix) with the key values
from the beginning to the end. You can twist the matrix every
time you pass one matrix area of an image.
It is called 'chaining'. There are some 'chaining' block
cipher methods like 'CBC'...
(If you want to know more, please look up "
http://en.wikipedia.org/wiki/Block_cipher_modes_of_operation
Thank you for your time to read my humble article,
and wish you Good luck. :)

Answer 1

Hello Crandom,
If you want to encrypt a critical strings, like special
server script url or parameters, then it is simple.
The most simple and faster method is to "XOR ing the string"
with a key string. You use the same key string when you encode and
decode (by Just using XOR). This is similar to 'Stream cipher'
algorithms.
And there is "open source cipher algorithm" (called
AS-CryptoLib) written in ActionScript, including most of algorithms
like Hash, Block cipher, RSA... if you want more stronger
encryption strength..
But I bet you also want to encode your script logic itself.
In that case, you should write your own 'Interpreter'. For example,
you encode all your ActionScript source code string, and decode it,
and you interpret each script tokens like 'if' 'for' 'while',
etc...
Actually, your question also inspired me to think about
loading script string and run it on the fly.
Maybe.... we can start from this article...
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16691"
I suggest you just use commercial SWF file encrypting tools
like Ameyata's "SWF encrypt". It changes the SWF file structure so
that usual 'SWF file decompilers' can not read codes properly.
And.... If you can use Flex2 (for your current project), and
it is ok with you (If you don't need to change a lot in your
current project) to use JavaScript to control your objects or
behavior of SWF file, then I think there is another possible way.
After you decode the Javascript string, you load a web page,
or change the content of HTML file already opened, so that your new
script will be working, as what you wanted to be. But I didn't test
it :)
Best regards.