Steganografi Nedir? Bir arkadaşınıza gizli bir mesaj göndermek istediğinizi ancak kullanmak istediğiniz kanalın güvenliğinin ihlal edildiğini ve izlendiğini düşünün. Bir miktar şifreleme kullanabilirsiniz, ancak bu, konuşmalarınızı izleyen kişilerde şüphe uyandırır, dolayısıyla başka bir şey kullanmanız gerekir. Günümüzde steganografi, gizli mesajları gizli olmayan başka bir dosyada (bir kedi resmi gibi) saklama yöntemidir, böylece o dosyayı gönderdiğinizde tespit edilmez. Steganografi, görsellerdeki metni gizlemekle sınırlı değildir ve genellikle "gizli bilgilerin gizli olmayan başka bir mesajda veya fiziksel nesnede saklanması" anlamına gelir: ses, video veya diğer metinlerdeki bazı mesajları, örneğin sütunlu aktarım kullanarak gizleyebilirsiniz. Steganografi diğer birçok durumda da son derece yararlı olabilir; örneğin, hassas belgeleri sızıntıya karşı korumak için filigranlamaya iyi bir alternatif olabilir. Görüntülerdeki bilgileri gizlemenin, metni dosyanın sonuna eklemekten meta verilerde gizlemeye kadar birçok yolu vardır. Bu makalede steganografinin daha gelişmiş bir yöntemini, ikili seviyeye inerek ve mesajları görüntünün kendi sınırları içinde gizleyerek ele almak istiyorum. Steganografik Motor Oluşturmak Kullanıcı arayüzü Steganografi örneğim için JavaScript kullanmaya karar verdim çünkü bu, tarayıcıda çalıştırılabilen güçlü bir programlama dilidir. Kullanıcıların bir görseli yükleyerek içindeki gizli mesajı okumasına ya da görseldeki bir mesajı kendilerinin kodlamasına olanak tanıyan basit bir arayüz geliştirdim. <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Steganography</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } textarea { width: 300px; height: 100px; } button { margin: 10px; } #outputImage { margin-top: 20px; max-width: 100%; } </style> </head> <body> <h1>Steganography Example</h1> <input type="file" id="upload" accept="image/*"><br> <canvas id="canvas" style="display:none;"></canvas><br> <textarea id="text" placeholder="Enter text to encode"></textarea><br> <button id="encode">Encode Text</button> <button id="decode">Decode Text</button> <p id="decodedText"></p> <img id="outputImage" alt="Output Image"> <script src="./script.js"></script> </body> </html> Bunu kullanmak için kullanıcılar, değiştirmek istedikleri bir görseli seçebilir ve bu görseldeki metnin bir kısmını çözmeye çalışabilir veya onu kodlayıp görseli daha sonra indirebilirler. Görüntüleri İşleme JavaScript'te görsellerle çalışmak için kullanabiliriz. Görüntüleri, animasyonları ve hatta oyun grafiklerini ve videolarını değiştirmek ve çizmek için birçok farklı işlev sağlar. Canvas API'sini Canvas API öncelikle 2D grafikler için kullanılır. 3D, donanım hızlandırmalı grafiklerle çalışmak istiyorsanız kullanabilirsiniz (bu arada <canvas> öğesini de kullanır). WebGL API'sini const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const image = new Image(); Görüntü dosyasını dosya sisteminden okumak ve tuval bağlamına eklemek için kullanabiliriz. Kullanıcının bilgisayarında saklanan herhangi bir dosyanın içeriğini özel bir kütüphaneye ihtiyaç duymadan kolayca okumamızı sağlar. FileReader API'sini function handleFileUpload(event) { const reader = new FileReader(); reader.onload = function (e) { image.src = e.target.result; image.onload = function () { canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0); }; }; reader.readAsDataURL(event.target.files[0]); } Bir dosyayı okur ve o dosyadaki görüntüyü önceden tanımladığımız 2B tuval bağlamımıza çizer, ardından o görüntünün içine bir miktar metin kodlayabiliriz veya görüntüdeki metni okumayı deneyebiliriz. Görsellerdeki Metni Gizleme Görüntüler piksellerden oluşur ve her piksel kendi renkleri hakkında bilgi içerir. Örneğin, bir görüntü RGBA modeli kullanılarak kodlanırsa her piksel, ne kadar kırmızı, yeşil, mavi ve alfayı (opaklığı) temsil ettiğine ilişkin 4 baytlık bilgi içerir. Bir görüntüdeki bazı metinleri kodlamak için bu kanallardan birini (örneğin alfa kanalı) kullanabiliriz. Bu bilgi ikili sistemde (01001100 gibi) temsil edildiğinden, son biti ihtiyacımız olana çevirebiliriz. Buna En Az Önemli Bit (LSB) adı veriliyor ve bunun değiştirilmesi görüntünün kendisinde çok az değişikliğe neden oluyor ve onu bir insandan ayırt edilemez hale getiriyor. Şimdi "Merhaba" gibi bir metnimiz olduğunu ve bunu bir görüntüye kodlamak istediğimizi hayal edin. Bunu yapacak algoritma şu şekilde olacaktır: "Merhaba" metnini ikiliye dönüştürün. Görüntü verilerinin baytlarını yineleyin ve bu baytların LSB'sini ikili metinden bir bit ile değiştirin (her piksel, renklerin her biri için 4 bayt veri içerir; benim örneğimde görüntünün opaklık kanalını değiştirmek istiyorum) , bu yüzden her 4 baytta bir yineleme yapardım). Mesajın sonuna bir ekleyin, böylece kod çözerken ne zaman duracağımızı bilebilelim. boş bayt Değiştirilen görüntü baytlarını görüntünün kendisine uygulayın. Öncelikle kodlamak istediğimiz metni kullanıcıdan alıp üzerinde bazı temel doğrulamalar yapmamız gerekiyor. const text = document.getElementById("text").value; if (!text) { alert("Please enter some text to encode."); return; } Daha sonra metni ikiliye dönüştürmemiz ve bu metni kodlayacağımız görüntünün bir tuvalini oluşturmamız gerekiyor. const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imgData.data; let binaryText = ""; for (let i = 0; i < text.length; i++) { let binaryChar = text.charCodeAt(i).toString(2).padStart(8, "0"); binaryText += binaryChar; } Bunu yapmak için, karakterlerin her biri üzerinde yinelemeler yapabilir ve işlevini kullanarak bir Unicode dizini elde edebiliriz. Bu Unicode daha sonra ikili koda dönüştürülür ve diğer karakterlerle aynı uzunlukta olacak şekilde doldurulur. charCodeAt Örneğin "H" harfi Unicode'da 72 olarak temsil edilir; daha sonra bu sayıyı ikili sayıya (1001000) dönüştürürüz ve tüm harflerin aynı uzunlukta (8 bit) olmasını sağlamak için başına 0 ekleriz (01001000). Daha sonra, mesajın şifresini çözdüğümüzde, gerçek metin ile görüntünün rastgele piksel verilerini ayırt edebildiğimizden emin olmak için mesajın sonuna bir boş bayt eklememiz gerekir. binaryText += "00000000"; Ardından, görüntünün taşmaması için mesajımızı kodlamak için yeterli piksele sahip olduğundan emin olmak için bazı temel doğrulama yapmamız gerekir. if (binaryText.length > data.length / 4) { alert("Text is too long to encode in this image."); return; } Daha sonra en ilginç kısım geliyor; mesajın kodlanması. Daha önce tanımladığımız veri dizisi, görüntüdeki her piksel için RGBA değerleri formundaki piksel bilgilerini içerir. Dolayısıyla, eğer görüntü RGBA ile kodlanmışsa, içindeki her piksel, veri dizisinin 4 değeriyle temsil edilir; her değer o pikselin ne kadar kırmızı, yeşil ve maviye sahip olduğunu temsil eder. for (let i = 0; i < binaryText.length; i++) { data[i * 4] = (data[i * 4] & 0b11111110) | parseInt(binaryText[i]); } ctx.putImageData(imgData, 0, 0); const outputImage = document.getElementById("outputImage"); outputImage.src = canvas.toDataURL(); Yukarıdaki kodda ikili kodlanmış metnimizi yineliyoruz. değiştirmemiz gereken bir bayt bulur ve yalnızca belirli bir kanalın baytlarını değiştirmek istediğimizden, ona erişmek için değişkenini ile çarparız. data[i * 4] i 4 işlemi en az anlamlı biti olarak ayarlar. Örneğin, ikili olarak ise, işlemi ile sonuçlanır. Bu, LSB üzerinde herhangi bir değişiklik yapmadan önce LSB'nin ayarlanmasını sağlar. data[i * 4] & 0b11111110 0 data[i * 4] 10101101 10101101 & 11111110 10101100 0 ikili kodlanmış dizeden geçerli bir bittir; ya ya da . Daha sonra bit düzeyinde VEYA ( ) işlemini kullanarak bu biti LSB'ye ayarlayabiliriz. Örneğin, bitsel OR'nin sol kısmı ise ve ise, ile sonuçlanacaktır. Geçerli bit olsaydı, OR ile sonuçlanırdı. Bu yüzden ilk etapta LSB'yi silmek zorunda kaldık. parseInt(binaryText[i]) 1 0 | 10101100 binaryText[i] 1 10101100 | 00000001 10101101 0 10101100 Mesaj kodlandıktan sonra onu geçerli tuvale yerleştirebilir ve yöntemini kullanarak HTML'de işleyebiliriz. canvas.toDataURL Resimlerdeki Gizli Mesajların Kodunu Çözme Bir görüntünün kodunu çözme işlemi aslında kodlamadan çok daha basittir. Yalnızca alfa kanalını kodladığımızı zaten bildiğimiz için, her 4'üncü baytı tekrarlayabilir, son biti okuyabilir, onu son dizemizde birleştirebilir ve bu verileri ikiliden bir Unicode dizeye dönüştürebiliriz. Öncelikle değişkenleri başlatmamız gerekiyor. zaten görüntü bilgileriyle doldurulmuş olduğundan (dosya sisteminden bir dosyayı her okuduğumuzda çağırırız), onu basitçe veri değişkenine çıkartabiliriz. imgData ctx.drawImage const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imgData.data; let binaryText = ""; let decodedText = ""; Daha sonra görüntünün her 4 baytını yinelememiz, son biti okumamız ve bunu değişkenine birleştirmemiz gerekir. binaryText for (let i = 0; i < data.length; i += 4) { binaryText += (data[i] & 1).toString(); } kodlanmış bayttır ve LSB'yi çıkarmak için bit düzeyinde AND ( ) operatörünü kullanabiliriz. İki değer alır ve karşılık gelen her bit çifti üzerinde bir VE işlemi gerçekleştirir. ile karşılaştırarak temel olarak piksel bilgisinden en az anlamlı biti izole ediyoruz ve eğer LSB ise böyle bir işlemin sonucu olur. LSB ise sonuç da olacaktır. data[i] & data[i] 1 1 1 0 0 Tüm LSB'leri okuyup bunları değişkeninde sakladıktan sonra, onu ikili metinden düz metne dönüştürmemiz gerekir. Her karakterin 8 bitten oluştuğunu bildiğimiz için (her karakteri aynı uzunlukta yapmak için nasıl kullandığımızı hatırlıyor musunuz?), her 8'inci karakterini yineleyebiliriz. binaryText padStart(8, "0") binaryText Daha sonra yinelememize dayalı olarak mevcut baytı çıkarmak için işlemini kullanabiliriz. İkili dize işlevi kullanılarak bir sayıya dönüştürülebilir. Daha sonra sonucun (boş bayt) olup olmadığını kontrol edebiliriz - dönüşümü durdururuz ve sonucu sorgularız. Aksi halde Unicode numarasına hangi karakterin karşılık geldiğini bulup sonuç stringimize ekleyebiliriz. binaryText .slice() parseInt(byte, 2) 0 for (let i = 0; i < binaryText.length; i += 8) { let byte = binaryText.slice(i, i + 8); if (byte.length < 8) break; // Stop if the byte is incomplete let charCode = parseInt(byte, 2); if (charCode === 0) break; // Stop if we hit a null character decodedText += String.fromCharCode(charCode); } Kodu çözülen metin daha sonra kullanıcıya güvenli bir şekilde görüntülenebilir: document.getElementById("decodedText").textContent = decodedText; Bu makalede kullanılan kodun tamamını depomda bıraktım; onunla oynamaktan çekinmeyin. Geliştirilebilecek çok şey var :) GitHub Son düşünceler Steganografi çok güçlü bir tekniktir ve belge doğrulama, sızıntı önleme, görüntü yapay zeka doğrulama, müzik dosyası DRM yönetimi ve çok daha fazlasından başlayarak birçok farklı kullanım senaryosuna uygulanabilir. Bu teknik videolara, oyunlara ve hatta ham metinlere bile uygulanabilir, dolayısıyla büyük bir potansiyele sahip olduğunu düşünüyorum. NFT'ler ve blok zincirler çağında, kullanım durumlarını nasıl bulacağını ve bu tekniğin nasıl gelişeceğini görmek daha da ilginç.
