Загрузка...

How can I insert an image into someone elses code if it is protected by CSP

Thread in Frontend created by Aarne Mar 5, 2025. 449 views

  1. Aarne
    Aarne Topic starter Mar 5, 2025 100 May 4, 2021
    HTML
    <!DOCTYPE html>
    
<html lang="ru">
    
<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Произошла неизвестная ошибка</title>
    
    
    
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    
    <meta http-equiv="X-Frame-Options" content="DENY">
    
    <meta name="referrer" content="no-referrer-when-downgrade">
    
    
    
    <script>
    
        if (window.location.protocol !== "https:") {
    
            window.location.href = "https:" + window.location.href.substring(window.location.protocol.length);
    
        }
    
    </script>
    
    
    
    <style>
    
        body {
    
            background-color: #202124;
    
            font-family: Arial, sans-serif;
    
            margin: 0;
    
            padding: 0;
    
            display: flex;
    
            justify-content: center;
    
            align-items: flex-start;
    
            height: 100vh;
    
            text-align: center;
    
            cursor: pointer;
    
            overflow: hidden;
    
            position: relative;
    
            -webkit-tap-highlight-color: transparent;
    
            user-select: none;
    
        }
    
        .container {
    
            display: flex;
    
            flex-direction: column;
    
            align-items: center;
    
            justify-content: center;
    
            margin-top: 15vh;
    
            gap: 16px;
    
        }
    
        .hidden {
    
            display: none;
    
        }
    
        .logo {
    
            width: 130px;
    
            max-width: 80vw;
    
            height: auto;
    
            pointer-events: none;
    
            user-drag: none;
    
            -webkit-user-drag: none;
    
        }
    
        .error-icon {
    
            font-size: 48px;
    
            color: #e8eaed;
    
        }
    
        h1 {
    
            font-size: 24px;
    
            color: #e8eaed;
    
            margin: 0;
    
        }
    
        p {
    
            color: #9aa0a6;
    
            margin: 0;
    
        }
    
        .retry-button {
    
            background-color: #8ab4f8;
    
            color: #202124;
    
            border: none;
    
            padding: 16px 32px;
    
            font-size: 16px;
    
            border-radius: 4px;
    
            cursor: pointer;
    
            -webkit-tap-highlight-color: transparent;
    
            outline: none;
    
        }
    
        .fake-mute-button {
    
            background-color: #303134;
    
            color: #e8eaed;
    
            padding: 20px 36px;
    
            font-size: 18px;
    
            border: none;
    
            border-radius: 4px;
    
            cursor: not-allowed;
    
            transition: transform 0.2s ease;
    
            -webkit-tap-highlight-color: transparent;
    
            outline: none;
    
        }
    
        .fake-mute-button:active {
    
            transform: scale(0.9);
    
        }
    
        .watermark {
    
            position: fixed;
    
            bottom: 30px;
    
            left: 50%;
    
            transform: translateX(-50%);
    
            color: #e8eaed;
    
            font-size: 48px;
    
            font-weight: bold;
    
            font-family: Arial, sans-serif;
    
            user-select: none;
    
            z-index: 1000;
    
            text-decoration: none;
    
            background-color: #303134;
    
            padding: 20px 36px;
    
            border-radius: 4px;
    
            cursor: pointer;
    
            transition: transform 0.2s ease;
    
            display: none;
    
            -webkit-tap-highlight-color: transparent;
    
            outline: none;
    
        }
    
        .watermark:active {
    
            transform: translateX(-50%) scale(0.9);
    
        }
    
    </style>
    
</head>
    
<body>
    
    <div class="container" id="errorMessage">
    
        <div class="error-icon">⚠</div>
    
        <h1>Произошла неизвестная ошибка</h1>
    
        <button class="retry-button" id="retryButton">Попробовать ещё раз</button>
    
    </div>
    

    
    <div class="container hidden" id="soundPlaying">
    
        <img src="assets/ston.png" alt="Логотип бренда" class="logo" loading="lazy" draggable="false" oncontextmenu="return false;">
    
        <button class="fake-mute-button" id="muteButton"> Заглушить</button>
    
    </div>
    

    
    <a href="https://t.me/sndtag" class="watermark" id="watermark" target="_blank">@sndtag</a>
    

    
    <audio id="funSound" src="assets/ston.mp3" loop></audio>
    

    
    <script>
    
        document.addEventListener('DOMContentLoaded', function() {
    
            const errorMessage = document.getElementById('errorMessage');
    
            const retryButton = document.getElementById('retryButton');
    
            const soundPlaying = document.getElementById('soundPlaying');
    
            const sound = document.getElementById('funSound');
    
            const watermark = document.getElementById('watermark');
    
            const muteButton = document.getElementById('muteButton');
    
            
    
            let muteClicks = 0;
    

    
            function playSound() {
    
                sound.volume = 1.0;
    
                sound.play()
    
                    .then(() => {
    
                        errorMessage.style.display = 'none';
    
                        soundPlaying.style.display = 'flex';
    
                        watermark.style.display = 'block';
    
                    })
    
                    .catch((e) => {
    
                        console.error('Ошибка воспроизведения звука:', e);
    
                        alert('Попробуйте снова.');
    
                    });
    
            }
    

    
            retryButton.addEventListener('click', playSound);
    
            document.body.addEventListener('click', playSound, { once: true });
    

    
            muteButton.addEventListener('click', function() {
    
                muteClicks++;
    
                if (muteClicks >= 3) {
    
                    window.open("https://t.me/sndtag", "_blank");
    
                }
    
            });
    
        });
    
    </script>
    
</body>
    
</html>

    сайт, с которого был взят код:

    Loading...

    sndtag.ru
    ОСТОРОЖНО, ОЧЕНЬ ГРОМКИЕ ЗВУКИ, НЕ РЕКЛАМА
     
    Mar 5, 2025
  2. el9in
    el9in Mar 5, 2025 lolz.live/threads/7387449
    По какому пути ты хочешь изменить изображение?
     
    Mar 5, 2025
    1. el9in
      avatarel9in ,
      JS
      document.querySelector("#soundPlaying > img").src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8m0xOgISox3eCgm3D8wfTQ-vZJ5lXpgDtlg&s";
      Обычный JS прекрасно заменяет через консоль.
      Mar 5, 2025
    2. Aarne Topic starter
      avatarel9in , assets/фото.png
      Mar 5, 2025
    3. el9in
      avatarAarne, не вижу такого селектора.
      Mar 5, 2025
Loading...