|
|
|
|
1
|
-#Estructuras de repetición - Esteganografía
|
|
|
|
|
1
|
+# Estructuras de repetición - Esteganografía
|
2
|
|
2
|
|
3
|
![main1.png](images/main1.png)
|
3
|
![main1.png](images/main1.png)
|
4
|
![main2.png](images/main2.png)
|
4
|
![main2.png](images/main2.png)
|
5
|
![main3.png](images/main3.png)
|
5
|
![main3.png](images/main3.png)
|
6
|
|
6
|
|
|
|
7
|
+[Verano 2016 - Ive]
|
|
|
8
|
+
|
7
|
Una de las ventajas de utilizar programas de computadoras es que podemos realizar tareas repetitivas fácilmente. Los ciclos como `for`, `while`, y `do-while` son estructuras de control que nos permiten repetir un conjunto de instrucciones. A estas estructuras también se les llama *estructuras de repetición*. En la experiencia de laboratorio de hoy completarás una aplicación de esteganografía para practicar el uso de ciclos anidados en la manipulación de arreglos bi-dimensionales.
|
9
|
Una de las ventajas de utilizar programas de computadoras es que podemos realizar tareas repetitivas fácilmente. Los ciclos como `for`, `while`, y `do-while` son estructuras de control que nos permiten repetir un conjunto de instrucciones. A estas estructuras también se les llama *estructuras de repetición*. En la experiencia de laboratorio de hoy completarás una aplicación de esteganografía para practicar el uso de ciclos anidados en la manipulación de arreglos bi-dimensionales.
|
8
|
|
10
|
|
9
|
|
11
|
|
10
|
-##Objetivos:
|
|
|
|
|
12
|
+## Objetivos:
|
11
|
|
13
|
|
12
|
1. Aplicar ciclos anidados y estructuras de control para manipular arreglos bi-dimensionales y extraer mensajes escondidos en imágenes.
|
14
|
1. Aplicar ciclos anidados y estructuras de control para manipular arreglos bi-dimensionales y extraer mensajes escondidos en imágenes.
|
13
|
|
15
|
|
|
|
|
|
16
|
3. Utilizar la representación binaria de caracteres.
|
18
|
3. Utilizar la representación binaria de caracteres.
|
17
|
|
19
|
|
18
|
|
20
|
|
19
|
-##Pre-Lab:
|
|
|
|
|
21
|
+## Pre-Lab:
|
20
|
|
22
|
|
21
|
Antes de llegar al laboratorio debes haber:
|
23
|
Antes de llegar al laboratorio debes haber:
|
22
|
|
24
|
|
|
|
|
|
39
|
|
41
|
|
40
|
|
42
|
|
41
|
|
43
|
|
42
|
-##Esteganografía
|
|
|
|
|
44
|
+## Esteganografía
|
43
|
|
45
|
|
44
|
La esteganografía es la ciencia de camuflar la presencia de mensajes ocultos en portadores legítimos (archivos que parecen inofensivos). Esta ciencia ha sido utilizada por delincuentes cibernéticos para ocasionar daños a sistemas de computadoras, y por terroristas para codificar mensajes ocultos en transmisiones de internet. Se dice que Al-Qaeda puede haber utilizado esteganografía para codificar mensajes en imágenes y luego transportarlos por correo electrónico, y posiblemente por USENET, para preparar y ejecutar los ataques terroristas del 11 de septiembre de 2001.
|
46
|
La esteganografía es la ciencia de camuflar la presencia de mensajes ocultos en portadores legítimos (archivos que parecen inofensivos). Esta ciencia ha sido utilizada por delincuentes cibernéticos para ocasionar daños a sistemas de computadoras, y por terroristas para codificar mensajes ocultos en transmisiones de internet. Se dice que Al-Qaeda puede haber utilizado esteganografía para codificar mensajes en imágenes y luego transportarlos por correo electrónico, y posiblemente por USENET, para preparar y ejecutar los ataques terroristas del 11 de septiembre de 2001.
|
45
|
|
47
|
|
|
|
|
|
53
|
---
|
55
|
---
|
54
|
|
56
|
|
55
|
|
57
|
|
56
|
-##Edición de imágenes
|
|
|
|
|
58
|
+## Edición de imágenes
|
57
|
|
59
|
|
58
|
En esta experiencia de laboratorio, recuperarás un mensaje secreto que ha sido ocultado en una imagen. Para poder realizar tu tarea debes entender algunos conceptos relacionados a imágenes, conocer métodos de la clase `QImage` de `Qt` y funciones para trabajar con datos de tipo `QRgb`.
|
60
|
En esta experiencia de laboratorio, recuperarás un mensaje secreto que ha sido ocultado en una imagen. Para poder realizar tu tarea debes entender algunos conceptos relacionados a imágenes, conocer métodos de la clase `QImage` de `Qt` y funciones para trabajar con datos de tipo `QRgb`.
|
59
|
|
61
|
|
60
|
-###Píxeles
|
|
|
|
|
62
|
+### Píxeles
|
61
|
|
63
|
|
62
|
Al elemento más pequeño de una imagen se le llama un *píxel*. Esta unidad consiste de un solo color. Como cada color es una combinación de tonalidades de los colores primarios rojo, verde y azul, se codifica como un entero sin signo cuyos bytes representan los tonos de rojo, verde y azul del pixel (Figura 1). A esta combinación se le llama el *RGB* del color por las siglas de "Red-Green-Blue". Por ejemplo, un píxel de color rojo (puro) tiene una representación RGB `0x00ff0000`, mientras que un píxel de color blanco tiene una representación RGB de `0x00FFFFFF` (ya que el color blanco es la combinación de los tonos rojo, verde y azul en toda su intensidad).
|
64
|
Al elemento más pequeño de una imagen se le llama un *píxel*. Esta unidad consiste de un solo color. Como cada color es una combinación de tonalidades de los colores primarios rojo, verde y azul, se codifica como un entero sin signo cuyos bytes representan los tonos de rojo, verde y azul del pixel (Figura 1). A esta combinación se le llama el *RGB* del color por las siglas de "Red-Green-Blue". Por ejemplo, un píxel de color rojo (puro) tiene una representación RGB `0x00ff0000`, mientras que un píxel de color blanco tiene una representación RGB de `0x00FFFFFF` (ya que el color blanco es la combinación de los tonos rojo, verde y azul en toda su intensidad).
|
63
|
|
65
|
|
|
|
|
|
71
|
|
73
|
|
72
|
En `Qt` se utiliza el tipo `QRgb` para representar valores `RGB`. Utilizando las funciones que describimos abajo podemos realizar algunas operaciones importantes de análisis de imágenes, tales como determinar el RGB de cada píxel de una imagen, y obtener los componentes rojo, verde y azul del valor `QRgb` del píxel.
|
74
|
En `Qt` se utiliza el tipo `QRgb` para representar valores `RGB`. Utilizando las funciones que describimos abajo podemos realizar algunas operaciones importantes de análisis de imágenes, tales como determinar el RGB de cada píxel de una imagen, y obtener los componentes rojo, verde y azul del valor `QRgb` del píxel.
|
73
|
|
75
|
|
74
|
-###Biblioteca
|
|
|
|
|
76
|
+### Biblioteca
|
75
|
|
77
|
|
76
|
La experiencia de laboratorio de hoy utilizará la clase `QImage`. Esta clase permite acceder a los datos de los pixeles de una imagen para poder manipularla. La documentación de la clase `QImage` se encuentra en http://doc.qt.io/qt-4.8/qimage.html.
|
78
|
La experiencia de laboratorio de hoy utilizará la clase `QImage`. Esta clase permite acceder a los datos de los pixeles de una imagen para poder manipularla. La documentación de la clase `QImage` se encuentra en http://doc.qt.io/qt-4.8/qimage.html.
|
77
|
|
79
|
|
|
|
|
|
94
|
* `qBlue(pixel)` // devuelve el tono del color azul del píxel, i.e. un valor entre (0x00 y 0xFF)
|
96
|
* `qBlue(pixel)` // devuelve el tono del color azul del píxel, i.e. un valor entre (0x00 y 0xFF)
|
95
|
|
97
|
|
96
|
|
98
|
|
97
|
-####Ejemplos:
|
|
|
|
|
99
|
+#### Ejemplos:
|
98
|
|
100
|
|
99
|
1. Si la siguiente imagen `4 x 4` de píxeles representa el objeto `origImage`,
|
101
|
1. Si la siguiente imagen `4 x 4` de píxeles representa el objeto `origImage`,
|
100
|
|
102
|
|
101
|
![ejemplo.png](images/ejemplo.png)
|
103
|
![ejemplo.png](images/ejemplo.png)
|
102
|
|
104
|
|
103
|
- entonces `origImage.pixel(2,1)` devuelve un valor `rgb` que representa el color azul (`0x0000ff`).
|
|
|
|
|
105
|
+ entonces `origImage.pixel(2,1)` devuelve un valor `rgb` que representa el color azul (`0x0000ff`).
|
104
|
|
106
|
|
105
|
2. La siguiente instrucción le asigna a la variable `greenContent` el valor del tono de verde que contiene el píxel `(1,1)` de `origImage`:
|
107
|
2. La siguiente instrucción le asigna a la variable `greenContent` el valor del tono de verde que contiene el píxel `(1,1)` de `origImage`:
|
106
|
|
108
|
|
107
|
- `int greenContent = qGreen(origImage.pixel(1,1));`.
|
|
|
|
|
109
|
+ `int greenContent = qGreen(origImage.pixel(1,1));`.
|
108
|
|
110
|
|
109
|
|
111
|
|
110
|
3. El siguiente programa crea un objeto de clase `QImage` e imprime los componentes rojo, verde y azul del pixel en el centro de la imagen. La imagen utilizada es la que se especifica dentro del paréntesis durante la creación del objeto, esto es, el archivo `chuck.png`.
|
112
|
3. El siguiente programa crea un objeto de clase `QImage` e imprime los componentes rojo, verde y azul del pixel en el centro de la imagen. La imagen utilizada es la que se especifica dentro del paréntesis durante la creación del objeto, esto es, el archivo `chuck.png`.
|
111
|
|
113
|
|
112
|
----
|
|
|
113
|
-
|
|
|
114
|
-```cpp
|
|
|
115
|
-#include <QImage>
|
|
|
116
|
-#include <iostream>
|
|
|
|
|
114
|
+ #include <QImage>
|
|
|
115
|
+ #include <iostream>
|
117
|
|
116
|
|
118
|
-using namespace std;
|
|
|
119
|
-int main() {
|
|
|
120
|
- QImage myImage(“/Users/rarce/Downloads/chuck.png”);
|
|
|
121
|
- QRgb centralPixel;
|
|
|
|
|
117
|
+ using namespace std;
|
|
|
118
|
+ int main() {
|
|
|
119
|
+ QImage myImage(“/Users/rarce/Downloads/chuck.png”);
|
|
|
120
|
+ QRgb centralPixel;
|
122
|
|
121
|
|
123
|
- centralPixel = myImage.pixel(myImage.width() / 2, myImage.height() / 2);
|
|
|
|
|
122
|
+ centralPixel = myImage.pixel(myImage.width() / 2, myImage.height() / 2);
|
124
|
|
123
|
|
125
|
- cout << hex;
|
|
|
|
|
124
|
+ cout << hex;
|
126
|
|
125
|
|
127
|
- cout << “Los componentes rojo, verde y azul del pixel central son: “
|
|
|
128
|
- << qRed(centralPixel) << “, “
|
|
|
129
|
- << qGreen(centralPixel) << “, “
|
|
|
130
|
- << qBlue(centralPixel) << endl;
|
|
|
131
|
- return 0;
|
|
|
132
|
-}
|
|
|
133
|
-```
|
|
|
|
|
126
|
+ cout << “Los componentes rojo, verde y azul del pixel central son: “
|
|
|
127
|
+ << qRed(centralPixel) << “, “
|
|
|
128
|
+ << qGreen(centralPixel) << “, “
|
|
|
129
|
+ << qBlue(centralPixel) << endl;
|
|
|
130
|
+ return 0;
|
|
|
131
|
+ }
|
134
|
|
132
|
|
135
|
|
133
|
|
136
|
-###Empotrando un mensaje en una imagen
|
|
|
|
|
134
|
+### Empotrando un mensaje en una imagen
|
137
|
|
135
|
|
138
|
Uno de los métodos más simples para esconder un mensaje en una imagen es codificando el mensaje en los bits menos significativos de los componentes de los colores de los píxeles de la imagen. Este método esconde el mensaje en la imagen eficientemente porque el efecto al cambiar el bit menos significativo en un color de 8 bits es casi imperceptible para el ojo humano.
|
136
|
Uno de los métodos más simples para esconder un mensaje en una imagen es codificando el mensaje en los bits menos significativos de los componentes de los colores de los píxeles de la imagen. Este método esconde el mensaje en la imagen eficientemente porque el efecto al cambiar el bit menos significativo en un color de 8 bits es casi imperceptible para el ojo humano.
|
139
|
|
137
|
|
|
|
|
|
156
|
|
154
|
|
157
|
El primer paso sería obtener la representación ASCII del mensaje. Los bits de la representación ASCII son los bits que codificaremos en los colores de los píxeles. La representación ASCII de "Dog" es:
|
155
|
El primer paso sería obtener la representación ASCII del mensaje. Los bits de la representación ASCII son los bits que codificaremos en los colores de los píxeles. La representación ASCII de "Dog" es:
|
158
|
|
156
|
|
159
|
-
|
|
|
160
|
-```
|
|
|
161
|
-"Dog" = 01000100 01101111 01100111
|
|
|
162
|
-```
|
|
|
|
|
157
|
+`"Dog" = 01000100 01101111 01100111`
|
163
|
|
158
|
|
164
|
El código `01000100` corresponde a la `D`, y así sucesivamente.
|
159
|
El código `01000100` corresponde a la `D`, y así sucesivamente.
|
165
|
|
160
|
|
166
|
El proceso de codificación es más fácil de entender si separamos los bits en grupos de tres (un bit por cada componente del RGB):
|
161
|
El proceso de codificación es más fácil de entender si separamos los bits en grupos de tres (un bit por cada componente del RGB):
|
167
|
|
162
|
|
168
|
-```
|
|
|
169
|
-"Dog" = 010 001 000 110 111 101 100 111
|
|
|
170
|
-```
|
|
|
|
|
163
|
+`"Dog" = 010 001 000 110 111 101 100 111`
|
171
|
|
164
|
|
172
|
Ahora, comenzamos a recorrer la imagen píxel por píxel, empotrando en cada píxel tres bits del código ASCII (un bit en cada componente de color del píxel). Por ejemplo, empotraríamos `010` en el primer píxel, `001` en el segundo, y así sucesivamente.
|
165
|
Ahora, comenzamos a recorrer la imagen píxel por píxel, empotrando en cada píxel tres bits del código ASCII (un bit en cada componente de color del píxel). Por ejemplo, empotraríamos `010` en el primer píxel, `001` en el segundo, y así sucesivamente.
|
173
|
|
166
|
|
|
|
|
|
233
|
Pregunta:
|
226
|
Pregunta:
|
234
|
¿Qué mensaje está escondido (usando la técnica del bit menos significativo) en una imagen cuyos primeros 8 píxeles son:
|
227
|
¿Qué mensaje está escondido (usando la técnica del bit menos significativo) en una imagen cuyos primeros 8 píxeles son:
|
235
|
|
228
|
|
236
|
-
|
|
|
237
|
-```
|
|
|
238
|
-0x545554 0x666667 0x444544 0x333232
|
|
|
239
|
-0xff0000 0x0100ff 0x00ff00 0x10aaba
|
|
|
240
|
-```
|
|
|
|
|
229
|
+`0x545554 0x666667 0x444544 0x333232 0xff0000 0x0100ff 0x00ff00 0x10aaba`
|
241
|
|
230
|
|
242
|
Explica tu respuesta.
|
231
|
Explica tu respuesta.
|
243
|
|
232
|
|
|
|
|
|
245
|
|
234
|
|
246
|
---
|
235
|
---
|
247
|
|
236
|
|
248
|
-!INCLUDE "../../eip-diagnostic/steganography/es/diag-steganography-01.html"
|
|
|
249
|
-<br>
|
|
|
250
|
-
|
|
|
251
|
-!INCLUDE "../../eip-diagnostic/steganography/es/diag-steganography-02.html"
|
|
|
252
|
-<br>
|
|
|
253
|
-
|
|
|
254
|
-!INCLUDE "../../eip-diagnostic/steganography/es/diag-steganography-03.html"
|
|
|
255
|
-<br>
|
|
|
256
|
|
237
|
|
257
|
-!INCLUDE "../../eip-diagnostic/steganography/es/diag-steganography-04.html"
|
|
|
|
|
238
|
+!INCLUDE "../../eip-diagnostic/steganography/es/diag-steganography-05.html"
|
258
|
<br>
|
239
|
<br>
|
259
|
|
240
|
|
260
|
-!INCLUDE "../../eip-diagnostic/steganography/es/diag-steganography-05.html"
|
|
|
261
|
-<br>
|
|
|
262
|
-
|
|
|
263
|
-!INCLUDE "../../eip-diagnostic/steganography/es/diag-steganography-06.html"
|
|
|
264
|
-<br>
|
|
|
265
|
-
|
|
|
266
|
-!INCLUDE "../../eip-diagnostic/steganography/es/diag-steganography-07.html"
|
|
|
267
|
-<br>
|
|
|
268
|
|
241
|
|
269
|
---
|
242
|
---
|
270
|
|
243
|
|
271
|
---
|
244
|
---
|
272
|
|
245
|
|
273
|
|
246
|
|
274
|
-##Sesión de laboratorio:
|
|
|
|
|
247
|
+## Sesión de laboratorio:
|
275
|
|
248
|
|
276
|
En la experiencia de laboratorio de hoy completarás una aplicación de esteganografía para extraer mensajes ocultos en imágenes.
|
249
|
En la experiencia de laboratorio de hoy completarás una aplicación de esteganografía para extraer mensajes ocultos en imágenes.
|
277
|
|
250
|
|
278
|
-###Ejercicio 1: Extraer el mensaje binario
|
|
|
|
|
251
|
+### Ejercicio 1 - Extraer el mensaje binario
|
279
|
|
252
|
|
280
|
-####Instrucciones
|
|
|
|
|
253
|
+#### Instrucciones:
|
281
|
|
254
|
|
282
|
|
255
|
|
283
|
1) Carga a QtCreator el proyecto `Steganography` haciendo doble "click" en el archivo `Steganography.pro` en el directorio `Documents/eip/Repetitions-Steganography` de tu computadora. También puedes ir a `http://bitbucket.org/eip-uprrp/repetitions-steganography` para descargar la carpeta `Repetitions-Steganography` a tu computadora.
|
256
|
1) Carga a QtCreator el proyecto `Steganography` haciendo doble "click" en el archivo `Steganography.pro` en el directorio `Documents/eip/Repetitions-Steganography` de tu computadora. También puedes ir a `http://bitbucket.org/eip-uprrp/repetitions-steganography` para descargar la carpeta `Repetitions-Steganography` a tu computadora.
|
|
|
|
|
309
|
Para poder implementar el algoritmo de extracción del mensaje, debes entender cómo fue empotrado el mensaje. Si es necesario, repasa la sección “Empotrando un mensaje en una imagen”.
|
282
|
Para poder implementar el algoritmo de extracción del mensaje, debes entender cómo fue empotrado el mensaje. Si es necesario, repasa la sección “Empotrando un mensaje en una imagen”.
|
310
|
|
283
|
|
311
|
|
284
|
|
312
|
-###Ejercicio 2: Interpretar el mensaje
|
|
|
|
|
285
|
+### Ejercicio 2 - Interpretar el mensaje
|
313
|
|
286
|
|
314
|
-####Instrucciones
|
|
|
|
|
287
|
+#### Instrucciones:
|
315
|
|
288
|
|
316
|
|
289
|
|
317
|
1. Completa la función `binaryStringToMessage` que recibe el "string" de `0`'s y `1`'s extraido de la imagen para que devuelva el mensaje oculto. Puedes aprovechar la función `binStringToChar` para convertir "substrings" de 8 `0`'s y `1`'s en el caracter que le corresponde.
|
290
|
1. Completa la función `binaryStringToMessage` que recibe el "string" de `0`'s y `1`'s extraido de la imagen para que devuelva el mensaje oculto. Puedes aprovechar la función `binStringToChar` para convertir "substrings" de 8 `0`'s y `1`'s en el caracter que le corresponde.
|